Show/hide features on layer in OpenLayers?

Question

In previous versions of OpenLayers, features on a layer could be hidden by changing visibility to 'hidden' but that does not seem to work on OpenLayers 4. How can features be modified so that we can hide them or show them? Ultimately I want to be able to show or hide features based on an event on my map.

Answer 1

One approach is to change the features' style. In order to hide a feature, you can set its style to an empty style object:

myFeatureIWantToHide.setStyle(new ol.style.Style({}));

To show this feature again, simply set the feature's style to null:

myFeatureIWantToHide.setStyle(null);

Answer 2

I too went through the internet with the same question. I think all the answers tell you how to do it in a previous version of openlayers. Only way to do it in the latest version is below:

//When you want to hide feature
myFeature.setStyle(new Style(null)); 


//when you want to show features
showFeature(myFeature);

function showFeature(myFeature){
    myFeature.setStyle(new Style({
        image: new Icon({
            crossOrigin: 'anonymous',
            src: imgSrc,
        })
    }));
}

Answer 3

If you are using a newer version of OpenLayers with typescript, this solution of mine might help:

// somewhere where you create the feature, you can set this property:

let ftr: Feature = new Feature();
ftr.setProperties({
  layer: referenceToYourLayer,
  visible: true // important for showing/hiding
});
    
// ...

public showHideFeature(feature: Feature, newVisibility: boolean) {
    // if the visibility we are trying to set is the same, do nothing
    if (feature.get("visible") === newVisibility) {
      return;
    }
    // otherwise, change the style of the feature, 
    //and save the old style as a property so we can restore it later
    if (newVisibility === true) {
      let featureSavedStyle = feature.get("savedStyle");
      feature.setStyle(featureSavedStyle);
    } else {
      feature.set("savedStyle", feature.getStyle());
      feature.setStyle(new Style(null)); // this is actually hiding the feature
    }
    feature.set("visible", newVisibility);
}

Answer 4

Maybe this can help :

Instead of using

myFeatureIWantToHide.setStyle(**null**);

use

myFeatureIWantToHide.setStyle(**new Style(null)**);

It worked for me right away (Openlayers 5.3.0) without any map refresh or anything.

Now, I can't tell if there's any impact on memory management, maybe this isn't a good idea...

Answer 5

function hideshowfeature(layer,id) {
feature=layer.getSource().getFeatureById(id);
if (feature)
    {
        if (!feature.get('hidden')) 
        {
            feature.setStyle(new ol.style.Style({}));   
            feature.set('hidden',true);
        }
        else 
        {
            feature.setStyle(); 
            feature.unset('hidden');
        }
    }
}

Answer 6

There are many ways to solve this. The most recommended to hide a feature is this:

feature.set('hidden', true)

Another way is to set the display property to 'none', for example:

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

Note: In both cases don't forget to redraw the layer after setting a new value to the style property:

layer.redraw()