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.

  • Can you remove the layer control, and add a new layer control with a different name? or are you looking for a more elegant/robust solution? Dec 17, 2016 at 4:35
  • That was my initial thought, too. However, after I tried this, I realized I didn't want to remove and re-add the layer, because it would uncheck the layer. Once the user checks the layer object on, I want it to stay on, regardless of of whether or not I am "hiding" the display of the features. Dec 17, 2016 at 5:14

1 Answer 1


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';
  • 1
    I'll need to test it out, but I think you've described what I was looking for. I had found the document.getElementById('cities').innerHTML code, but your suggestion to embed the HTML <span id='value'> is the missing piece I was struggling with. I'll use that to help manage the "finding" of the correct label. Thank you! Dec 20, 2016 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.