This seemed simple on the face of it, but I am unable to figure out how to toggle the visibility of a marker feature using the Version 3 API of OpenLayers.

In my situation, I am adding features to a vector layer. Each feature is a marker icon denoting a place of interest. When I click on a checkbox somewhere else on the page, I'd like for the feature to appear of disappear (as the case may be). I am using JQuery in conjunction with OL3, but I don't care whether the solution is jquery or vanilla javascript.

Code snippets:

var vectorSource = new ol.source.Vector({
    projection: "EPSG:4326"
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: fieldIconStyle

var map = new ol.Map({
    layers: [osm, digitalglobe, vectorLayer],//osm and digitalglobe exist in unquoted code
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
    view: new ol.View({
        center: [0, 0],
        zoom: 2

function checkedchanged(item)//item is the checkbox that was clicked
    //this function does get called successfully.
    var selected = $(item).prop('checked');
    var id = $(item).val();

    vectorSource.forEachFeature(function (item) {

        var props = item.getProperties();
        if (props.FieldId = id) {
            item.setStyle({visible: selected});//I have tried many different things here, all to no avail

I have been struggling with the same issue, but I seem to have come across a solution that works pretty well.

In the Docs there is no visibility style option for vector features. But you can set the opacity of an ol.style.Icon or the alpha of the fill and stroke for an ol.style.Circle and ol.style.RegularShape

How I got it to work was to set a style functions for my visible and invisible states. Here are a few options for points

//visible style
var visibleStyleIcon = {
     'Point': [new ol.style.Style({
         image: new ol.style.Icon({
             src : 'your_icon.png',
             opacity : 1

// invisible Style Icon Opacity
var invisibleStyleIcon = {
    'Point': [new ol.style.Style({
        image: new ol.style.Icon({
            src : 'your_icon.png', //still need something even if it's invisible
            opacity : 0

// invisible Style Vector Alpha
var hiddenStyle = {
    'Point': [new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
                color: 'rgba(0,0,0,0)'
            stroke: new ol.style.Stroke({
                color: 'rgba(0,0,0,0)',

// invisible Style Shape No Points
var hiddenStyleRegularShape = {
    'Point': [new ol.style.Style({
        image: new ol.style.RegularShape({}) //a shape with no points is invisible

Then for the feature you want to hide/unhide just set the style for that feature

if (feature_should_be_visible){
} else {
|improve this answer|||||
  • I was hoping that there was an official way of doing this, but I guess you can't always get what you want. I'll just have to add a custom IsVisible flag to each feature to track its visibility. Thanks. – Captain Kenpachi Nov 16 '15 at 8:03

I found a simpler method, It only works if you have only one feature with the same image setted:

feature.getStyle().getImage().setOpacity(0) // Invisible
feature.getStyle().getImage().setOpacity(1) // Visible
// After doing this, you need to "refresh" the map. In Open Layers 3 it's

If 2 or more features share the same Image Object they will dissapear at the same time.

I hope it helps, sorry about my English, it's not my native language.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.