3

I am displaying and labelling a polygon Layer using a GeoJSON file and the field nom_comm. I would like to label the polygons between two scales i.e. two zooms. (So to speak, labels are to be invisible when scale of the map is too high or too little.)

How can I do that?

Sample of HTML:

var styleDS = new OpenLayers.Style({
                        'fillOpacity': 0,
                        'strokeColor': "red",
                        'strokeWidth': 0.8,
                        'fontFamily': "Verdana",
                        'fontWeight': "bold",
                        'fontSize': "6.5px",
                        'labelOutlineColor': "white",
                        'labelOutlineWidth': 1,
                        'label': "${getLabel}"/* options */
                                        },
                        {
                        context: { getLabel:function(feature) //affichage nom commune en fonction echelle
                                    { if (map.getZoom() > 9 && map.getZoom() < 12.5) 
                                    { console.log('affiché'); var label = feature.attributes['nom_comm']; 
                                    return label; } 
                                    else { console.log('caché'); return ''; }
                                    } 
                                }  
                            });     

Then I applied the style like this:

var commune = new OpenLayers.Layer.Vector(
        "commune", {
        strategies: [new OpenLayers.Strategy.Fixed()],
        protocol: new OpenLayers.Protocol.HTTP({
            url: "communes.geojson",
            format: new OpenLayers.Format.GeoJSON()
        }),
        //autre maniere de creer un style
        styleMap: styleDS, 
        }
);
  map.addLayer(commune);

And I don't have a link to the map because it belongs to a domain.

2

You could use a style with a context :

var monstyle = new OpenLayers.Style({
    'fillOpacity': 0,
    'strokeColor': "red",
    'strokeWidth': 0.8,
    'label': "${getLabel}",
    'fontFamily': "Verdana",
    'fontWeight': "bold",
    'fontSize': "7px",
    'labelOutlineColor': "white",
    'labelOutlineWidth': 1
}, {
    context: {
        getLabel: function(feature) {
            if (map.zoom > 10 && map.zoom < 13) {
                return feature.attributes.nom_comm;
            } else {
                return '';
            }
        }
    }
});
  • Thx.I added this context in styleMap in code above. I got labels "undefined" on the map. Any idea ? – Leehan Aug 29 '14 at 10:38
  • I'm not sure. Maybe it depends on how your attributes are stored. In my own map I have to return "feature.attributes[scencrue].value". You can try to return "feature.attributes.nom_comm.value" ? – Alkwts Aug 29 '14 at 10:52
  • does not work : same word "undefined" as label everywhere. – Leehan Aug 29 '14 at 10:54
  • Does it work if you replace map.zoom by map.getZoom() ? – Alkwts Aug 29 '14 at 12:08
  • nope. Labels appear still all the time. (And labels value are always marked as "undefined".) – Leehan Sep 1 '14 at 6:42

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.