How to make openlayers features externalGraphic reappear after hiding

Question

I'm displaying a vector layer with pois, generated from a text file:

lat lon icon    iconSize    iconOffset  title   description
56.030325   14.4774116666667    http://www.medinsbiologi.se/hano/Foto.png       -10.5,-25   102_1   UV-foto<br>More text and images

Code to draw layer:

    pois = new OpenLayers.Layer.Vector("Provpunkter", 
    {
    projection: map.displayProjection,
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol:   new OpenLayers.Protocol.HTTP(
        {
        url:        "../poi/DynPOIHano.txt",
        format:     new OpenLayers.Format.Text(
            {
            extractStyles: true,
            extractAttributes: true
            })
        })
    });

The layer shows up fine, and I have now added some checkboxes to hide icons, based on which icon type is used in my text file as so:

        var feature = pois.features;
        for (var i = 0; i < feature.length; i++) {
           if (feature[i].style.externalGraphic == "url to icon") {
           feature[i].style = { display: 'block' }; // or 'none'
           }
        }

Hiding works, but I cannot get the externalGraphic back when I uncheck the box, because I don't know how to restore the externalGraphic style. I've tried setting features.stayle to null and redraw layer but then only the default orange circles appear. If I use fillOpacity=0 to hide, the icons can be brought back, but when hidden they are still accessible by users clicking in the map, which I don't want.

How can I reset the original style with the externalGraphic for some of the features in my layer?

Answer 1

I have just had a quick play using the developer tools in chrome to apply display:none to hide a feature, by changing it to display:inherit, the feature reappeared. I suggest you try using:

var feature = pois.features;
        for (var i = 0; i < feature.length; i++) {
           if (feature[i].style.externalGraphic == "url to icon") {
           feature[i].style = { display: 'inherit' }; // should make the feature visible
           }
        }

Answer 2

I solved it myself. To hide the icon: set the externalGraphic to null. To be able to show the correct icon again I had to assign a new attribute to the feature, with info of the original icon (in my case just a code word, retrieved from the checkbox ID). To show the icon again: check if it is null, and if so set the correct icon with the icon attribute. The code:

    function HideShowFeatures(param) {
        var feature = pois.features;
        for( var i = 0; i < feature.length; i++ ) {
            if (feature[i].style.externalGraphic == "some_iconURL") {
                    feature[i].style.externalGraphic = null;
                    feature[i].attributes.ikon = param.id;
            } else {
                if (feature[i].attributes.ikon == param.id) {
                feature[i].style.externalGraphic = "some_iconURL";
                }
            }
        }
        pois.redraw();
        }

Surely not the ideal way, but works for me.