1

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?

0

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
           }
        }
0

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.

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.