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: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: © <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: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: © <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: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Map style: © <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.