0

I have added a bunch layers as a leaflet overlays. How can I remove the radio button for 1 of the overlay layers so that it is by default on and users cannot toggle it on and off?. I have been looking at Layer.control.extend and I am not sure if it is the correct path.

enter image description here

1

Research

This comment on SO led me on the correct path:

According to the Leaflet documentation you can add HTML to the layer name:

The layer names can contain HTML, which allows you to add additional styling to the items:

{"<span id='disable_checkbox'>My Layer</span>": myLayer}

Quote adapted to example by me.

Solution

Given a layer name that has id="disable_checkbox" as an attribute, you can then call this in your Javascript to inject the disabled attribute to the checkbox using setAttribute():

document.getElementById('disable_checkbox').previousSibling.setAttribute("disabled","");

Result

It will result in the following:

<input class="leaflet-control-layers-selector" checked="" disabled="" type="checkbox">
<span id="disable_input">My Layer</span>
0
  1. YourLayerName.addTo(map);
  2. remove from the layer control.

The addTo(map) adds the layer to the map and if it's not in the layer control no one can turn it off.

  • Thanks. I know this but I want people to know that this layer is present. So having it in the layer control is one way. – kartoza-geek Jun 19 '18 at 11:42
  • 1
    Sounds like it's really a legend solution your after. If you had it in the layer control someone will always try to turn it off. You could write an onchange event for it to see if it's off and turn it back on, but they will try to turn it off again. – Bill Chappell Jun 19 '18 at 11:46

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.