Leaflet toggle marker clustering with overlay

Question

I am using the Leaflet markercluster plug in, and now want to add a button to turn the clustering on/off. For that I wanted to use the leaflet button plug in, because I am already using it in my code.

var map = L.map('map', {zoom: 6,center: L.latLng([52.3900214, 12.419982])}),

osmLayer = new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

map.addLayer(osmLayer);

var extern2 = L.markerClusterGroup();
extern2.addLayer(extern);
 


var baseLayers = [
{
    name: "Open Street Map",
    layer: osmLayer
},
{
    name: "Satellit",
    layer: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
},
{
    name: "Open Railway Map",
    layer: L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
        attribution:  'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
    })
},
];

var overLayers = [
{
    group: "Radsatzdrehmaschinen",
    collapsed: false,
    layers: [
            {
            active:true,
            name: "externe Maschinen",
            layer: extern2
            },
    ]
},
];
var panelLayers = new L.Control.PanelLayers(baseLayers,overLayers, {
compact: true,
//collapsed: true,
collapsibleGroups: true
});

map.addControl(panelLayers);


var panelElement = document.getElementById(extern2._leaflet_id);
panelElement.parentNode.parentNode.style = 'border-color: #508B1B';

//until here i made it that the clustered markers are displayed by default    

var button = new L.Control.Button('Toggle me', {
toggleButton: 'active'
});
button.addTo(map);
button.on('click', function () {
if (button.isToggled()) {                //this option activates the clustered markers

var extern2 = L.markerClusterGroup();
extern2.addLayer(extern);

var baseLayers = [
{
    name: "Open Street Map",
    layer: osmLayer
},
{
    name: "Satellit",
    layer: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
},
{
    name: "Open Railway Map",
    layer: L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
        attribution:  'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
    })
},
];

var overLayers = [
{
    group: "Radsatzdrehmaschinen",
    collapsed: false,
    layers: [
        
            {
            active:true,
            name: "externe Maschinen",
            layer: extern2
            },
    ]
},

];
var panelLayers = new L.Control.PanelLayers(baseLayers,overLayers, {
compact: true,
//collapsed: true,
collapsibleGroups: true
});

map.addControl(panelLayers);


var panelElement = document.getElementById(extern2._leaflet_id);
panelElement.parentNode.parentNode.style = 'border-color: #508B1B';


} else {                         //this option activates the unclustered markers
    

var baseLayers = [
{
    name: "Open Street Map",
    layer: osmLayer
},
{
    name: "Satellit",
    layer: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
},
{
    name: "Open Railway Map",
    layer: L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
        attribution:  'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
    })
},
];

var overLayers = [
{
    group: "Radsatzdrehmaschinen",
    collapsed: false,
    layers: [
        
            {
            active:true,
            name: "externe Maschinen",
            layer: extern
            },
    ]
},
];
var panelLayers = new L.Control.PanelLayers(baseLayers,overLayers, {
compact: true,
//collapsed: true,
collapsibleGroups: true
});

map.addControl(panelLayers);

var panelElement = document.getElementById(extern._leaflet_id);
panelElement.parentNode.parentNode.style = 'border-color: #508B1B';
}
});

When clicking the button the unclustured markers appear and another overlay appears, so I would need to remove the clustured markers and the old overlay, everytime I click the button.

I know this Code is terribly at efficiency, but I did my best at making it as short as possible. If I would be able to not define the overlay everytime, it would help alot.

Answer 1

To have ability to switch between clustered and non clustered markers and have also possibility of having layer in layers control to show or hide it, another group layer overlayGroup has to be introduced. This layer is then referenced in layers control, but button control then adds/removes layers extern (not clustered) and extern2 to group layer overlayGroup instead of map.

Also button control for showing/hiding clusters is shown only when overlayGroup is shown on the map, using layer events add and remove to take care of that.

Whole code could then look something like this (extern layer is created from random points with turf.randomPoint):

var osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ'
  })
var map = L.map('map', {center: [-37.82, 175.24], zoom: 8, layers: [osmLayer]});

var points = turf.randomPoint(200, {bbox: [174, -39, 176, -36]});
var extern = L.geoJSON(points);     

var extern2 = L.markerClusterGroup();       
extern2.addLayer(extern);

var overlayGroup = L.layerGroup();
overlayGroup.addLayer(extern);

var baseLayers = [
  {
    name: "Open Street Map",
    layer: osmLayer
  },
  {
    name: "Satellit",
    layer: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}')
  },
  {
    name: "Open Railway Map",
    layer: L.tileLayer('https://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png', {
      attribution:  'Map data: &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: &copy; <a href="https://www.OpenRailwayMap.org">OpenRailwayMap</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)',
    })
  },
];

var overLayers = [
  {
    group: "Radsatzdrehmaschinen",
    collapsed: false,
    layers: [{
      active:true,
      name: "externe Maschinen",
      layer: overlayGroup
    }]
  },
];

var button = new L.Control.Button('Show clusters', {
  toggleButton: 'active'
});
button.on('click', function () {
  var txt;
  var controlElement = button.getContainer();
  console.log(button.getContainer());
  if (button.isToggled()) {
    txt = 'Show clusters';
    overlayGroup.removeLayer(extern2);
    overlayGroup.addLayer(extern);
    }
  else {
    txt = 'Show markers';
    overlayGroup.removeLayer(extern);
    overlayGroup.addLayer(extern2);
  }
  controlElement.innerHTML = txt;
});    

overlayGroup.on('add', function(evt) {
  setTimeout(function() {
    button.addTo(map);
  }, 10);
});
overlayGroup.on('remove', function(evt) {
  setTimeout(function() {
    button.remove();
  }, 10);
});

var panelLayers = new L.Control.PanelLayers(baseLayers,overLayers, {
  compact: true,
  collapsibleGroups: true
});    
map.addControl(panelLayers);