0

I am using the Leaflet.TextPath plugin for labeling polylines. It works fine into my Leaflet map, but I want to set the zoom level (scale-based visibility) from which labels would be displayed on the map.

How can I do that?

1

...set the zoom level [...] from which [stuff] would be displayed on the map.

In Leaflet, you don't specify zoom levels for visibility and let Leaflet handle visibility (except for L.TileLayers), but rather the other way around: depending on the zoom level, you make something (in)visible by yourself.

The usual way to do this is reacting to zoomend events, e.g.:

var myMarker = L.marker([lat, lon]).addTo(map);
map.on('zoomend', function(ev){
    if (map.getZoom() < 12) {
        myMarker.addTo(map);
    } else { // when zoom >= 12
        myMarker.remove();
    }
});

If you're using Leaflet.TextPath then you probably don't want to remove and addTo any L.Layers, but instead do something like

map.on('zoomend', function(ev){
    if (map.getZoom() < 12) {
        myPolyline.setText('something', {repeat: true});
    } else { // when zoom >= 12
        myPolyline.setText(null);
    }
});
  • Thank you very much!!! I changed "map.on" for "layer.on" and then that worked perfectly! Very grateful for this answer so detailed and clear. Just what I needed. – abrobia May 28 '18 at 12:31
  • I'm impressed that even works - L.Layers don't have a zoomend event. And as you're new here, let me remind you about accepting answers. – IvanSanchez May 28 '18 at 12:41
  • I was wrong.. So you are right to be impressed because in fact is not working with layer.on. Not even with map.on. I will continue testing and as soon as I find a solution, I will notify it here. I take your reminder into consideration as well. – abrobia May 28 '18 at 15:27

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.