4

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? – Owen J Lamb Dec 17 '16 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. – RyanDalton Dec 17 '16 at 5:14
2

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';
});
  • 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! – RyanDalton Dec 20 '16 at 18:14

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.