[GIS] Leaflet.TextPath: how to set zoom level from which text would be displayed

labelingleafletzoom

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?

Best Answer

...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);
    }
});
Related Question