I have a set of basemaps and overlays on my simple web mapping application with Leaflet. I would like to be able to select one overlay at a time like base layers so that multiple selection of overlays is not allowed.

I cannot make those overlays into base layers as at least one base layer should be visible on the map at any time.

Currently I have the following code snippet.

var baseLayers = {baselayer1, baselayer2, baselayer3};
var overlayMaps = {overlay1, overlay2, overlay3};
L.control.layers(baseLayers, overlayMaps).addTo(map);

Create a second L.Control.Layers, with your "overlays" as "base layers".

var baseLayers = {baselayer1, baselayer2, baselayer3};
var overlayMaps = {overlay1, overlay2, overlay3};

Keep in mind that "overlay" and "base layer" is just nomenclature for L.Control.Layers ("base layer"s are exclusive among themselves in the context of a layers control, "overlay"s are not). Those words have no meaning in the context of a L.Map, which means that if you don't have a layers control, then you cannot tell a layer is a base layer or an overlay.


Another option: a grouped layer control.

Working example: http://www.gistechsolutions.com/leaflet/DEMO/senate/index.html

Where I found the code: https://github.com/ismyrnow/leaflet-groupedlayercontrol

How I used the code:

var groupedOverlays = {
            "US House":congress


    var options = {
      // Make the "Landmarks" group exclusive (use radio inputs)
      exclusiveGroups: ["Reprensitives"],
      // Show a checkbox next to non-exclusive group labels for toggling all
      groupCheckboxes: true

    // Use the custom grouped layer control, not "L.control.layers"
    var layerControl = L.control.groupedLayers(baseMaps, groupedOverlays, options);
   // End of switcher control.

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.