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

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.

0

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';
});
  • Thanks for response! I have tried your solution without success. I slimmed it down to just $.each(pois.features, function (index, feature) { feature.style.display = 'none'; }); Still not working. I'm calling the function hideFeatures() with an onclick event: button onclick="hideFeatures()" Might this be a problem? Am I completely missing something? – Martin Liungman Oct 29 '14 at 21:23
  • And I'm also using pois.redraw(); after changing the style. – Martin Liungman Oct 29 '14 at 21:31
  • Can you make a working example? – Dennis van Schaik Oct 30 '14 at 8:43
  • My project is here and the db-generated txt-file is here. My hideFeatures function begins on line 142, and I also tried the function on line 156, just to see if my script can access the features at all. No success, I am lost... :( – Martin Liungman Oct 30 '14 at 9:48
0

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... ;)

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.