I create a Leaflet map containing some base maps and overlay maps. I want to organize the layer control so that these two parts separated by a title, so I want to have such a view on my layer control:


  • Satellite
  • OSM

Personal Maps

  • Cities
  • Markets
  • Parks

How can I do such design? My code as below does not work:

var Basemaps = {
    "OSM": OSM,
    'Google Satellite':googleSat,
var overlayMaps = {
    "Cities": Cities, 
    "Markets": Markets,
    "Parks": Parks

var layerControl=L.control.layers(Basemaps, overlayMaps, {
    collapsed: false,
    baseLayersLabel: 'Base Layers',
    overlayLayersLabel: 'Overlayed Maps'

I add overlay maps from external JavaScript files.

1 Answer 1


I solved that. I should add the code below in head part:

<script src="https://rawgithub.com/ismyrnow/Leaflet.groupedlayercontrol/master/src/leaflet.groupedlayercontrol.js"></script>

and then use that layers as follows:

// Overlay layers are grouped
var groupedOverlays = {
    SelectType: {
    Type1Layer: L1,
    Type2Layer: L2
    SelectCategory: {
    Category1: L3,
    Category2: L4

L.control.groupedLayers(Basemaps, groupedOverlays).addTo(map);

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.