Hiding specific icons/markers on text generated vector layer

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

Code to draw layer:

        var 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 added descriptions to each poi. Now I'd like to be able to hide some of these markers depending on icon type, with a button somewhere else on the page. I've tried using features.style:

function hideFeatures() {
    var features = pois.features;
    for( var i = 0; i < features.length; i++ ) {
    features.style.display = 'none';
    }
    pois.redraw();
    }

but I don't seem to be able to identify the layers icons. Are they considered features, icons or markers? I know this can be done with the built-in OpenLayers.Control.LayerSwitcher() and by adding multiple layers, but would like to avoid that approach.

Answer 1

You can use an attribute form the feature to determine if the feature should be visible. I haven't tested it, but i think this should work:

$.each(pois.features, function (index, feature) {
  if ( feature.attributes.description == 'UV-foto' )
    feature.style.display = 'none';
});

Answer 2

Ok, it seems the "icon" in my text file was not interpreted as an attribute at all, but as an externalGraphics link. Logical off course, I just didn't get it. So now I'm able to access my icons with:

function hideFeatures() {
var feature = pois.features;
        for( var i = 0; i < feature.length; i++ ) {
            if (feature[i].style.externalGraphic == "http://www.medinsbiologi.se/hano/ikon/Foto.png") {
            feature[i].style= { display: 'none' };
            }
        }
        pois.redraw();
        }    

Piece of cake... ;)