how to hide vector features in openlayers

Question

I have written some code to hide specific markers in our maps based on checkboxes outside of the map itself. However, these markers also have vector features too (really on separate layers) but I want to just hide the features rather than destroy them. I tried using display(false) but get errors. Is there a function for hiding vectors?

Answer 1

Solution

Change the style property for OpenLayers.Feature.Vector instances. Set the display attribute to none or the visibility attribute to hidden. Redraw the layer afterwards.

According to comments in OpenLayers code:

display - {String} Symbolizers will have no effect if display is set to "none". All other values have no effect.

Example Code

For a given OpenLayers layer variable called layer, you could hide all the features as follows:

var features = layer.features;

for( var i = 0; i < features.length; i++ ) {
  features[i].style = { visibility: 'hidden' };
}

layer.redraw();

This iterates over all features in a layer, allowing full control of the specific features to hide.

Answer 2

I have wrestled with OpenLayers a few times trying to get my features within the same layer to display exactly as I want. @igorti's solution overrides all of the feature's style properties, so I don't recommend this approach unless you have no reason to re-display the feature later on (in which case the removeFeatures() method is probably a better way to do this anyways).

Hiding Vector Features

The way I do this is to manually set the feature's style display to none and then redraw the layer. If I need to display the feature again, set the display property to block. Pretty simple:

function hideFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (!isVisible(feature)) {
            feature.style.display = 'none';
        }
    }
    layer.redraw();
}

Re-Displaying Vector Features

Re-displaying hidden features is a little bit trickier depending on your situation. Take a look at the OpenLayers documentation on styling for some possibilities. But in general, if I need to display the feature again, I set the feature's style attribute to null. This ensures that when the OpenLayers renderer performs the drawFeature function, your pre-configured styles from your layer's styleMap are redrawn:

// from OpenLayers drawFeature()
if (!style) {
    style = this.styleMap.createSymbolizer(feature, renderIntent);
}

So your display function might look something like this:

function displayFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (isVisible(feature)) {
            feature.style = null; //redraw the feature
        }
    }
    layer.redraw();
}

Other Approaches

There are a couple other approaches to doing this. You can set the feature's fillOpacity and strokeOpacity to 0, like so:

function displayFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (isVisible(feature)) {
            feature.style.fillOpacity = 1;
            feature.style.strokeOpacity = 1;
        }
        else {
            feature.style.fillOpacity = 0;
            feature.style.strokeOpacity = 0;
        }
    }
    layer.redraw();
}

The downside to this approach is that any active map controls will still be able to interact with the "hidden" feature, so if a user accidentally clicks or hovers over the feature these events will still fire.

You can also create a style within your layer's styleMap called hidden, with either of the two approaches above. Then to hide a feature, simply change the feature's renderIntent to hidden.

Finally, you can add subsets of your features to separate layers, and call the layer's setVisibility method to false. This is only a good option if you don't have a need to interact with all features concurrently, since only controls for the top layer of your map will be active. (There are ways to use controls for multiple layers, but there's a lot more juggling involved and I don't recommend it unless it is absolutely necessary)

Answer 3

You can set display:'none' in style property. So that features will not be display

Answer 4

To hide features

    for( var i = 0; i < features.length; i++ ) {
      features[i].style = { display: 'none' };
    }
    layer.redraw();

To display back the hidden features

    for( var i = 0; i < features.length; i++ ) {
      features[i].style = null;
    }
    layer.redraw();

Answer 5

To hide the one feature

var feature = vectorlayer.getFeatureByFid(fid);
feature.style = { display: 'none' };
vectorLayer.removeFeatures(feature);
vectorLayer.addFeatures(feature);