1

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.

4
  • There is no code above to turn clustering on/off, so it's not clear what you are asking.
    – TomazicM
    Aug 4 at 7:28
  • Yes, because I want that part to be done by the button, lets say clustering is on by default and can be turned off / on with the button.
    – CLa
    Aug 4 at 7:30
  • You have answer to that here: gis.stackexchange.com/questions/437387/…. Use that in your code and then ask further questions.
    – TomazicM
    Aug 4 at 7:35
  • This part works if there are just simple markers on the map, but i do not know how to implemt it with my overlay.
    – CLa
    Aug 4 at 7:38

1 Answer 1

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);

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.