[GIS] How to change the description (text) of a layer in the Leaflet Layer Control

layer-controlleaflet

In the Layer Groups and Layers Control tutorial, you first create the "cities" object, and add it to the overlayMaps group control with the "Cities" label name.

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};
var overlayMaps = {
    "Cities": cities
};

Is it possible to programatically change the "Cities" label (as seen in the checkbox) to "Cities (zoom in)"?

The reason I want to do this is because I'm "turning on/off" the layer at a specific zoom level by using "clearLayers" method, which leaves the checkbox turned on if the user has already checked it on.

So I am looking for a way to alert the user they need to zoom in to view the layer.

Best Answer

Maybe i'm not understanding correctly what you need, but if you only need to change the label, you just can access to the DOM to modify it.

To simplify it a bit, remember that you can use html in the label so:

var overlays = {
    "<span id='cities'>Cities</span>": cities
};

document.getElementById('cities').innerHTML = '"Cities (zoom in)"';

If you want to change the name when the user (un)checks the checkbox, you can register a callback to the overlayadd, overlayremove events.

map.on('overlayadd', function() {
    document.getElementById('cities').innerHTML = '"Cities (zoom in)"';
});

 map.on('overlayadd', function() {
    document.getElementById('cities').innerHTML = 'Cities';
});
Related Question