Using several Marker Cluster Groups displays overlapping Clusters

by

The issue is that each Leaflet Marker Cluster Group (i.e. L.markerClusterGroup) will perform its own clustering and render Clusters irrespective of what other Cluster Groups may display. Therefore if you have some individual Markers (or any point Features) that are in different Cluster Groups but close to each other, these Groups will display Clusters also close to each other, which may end up overlapping, especially at low zoom level, exactly like in your screenshot.

If you want your Markers to cluster all together (mixing “oranges with apples”), you should use a single Marker Cluster Group.

Now if I understand correctly, your “difficulty” is that you would like to be able to add and remove the Markers dynamically, i.e. in your case the user can use a Layers Control to switch on/off some Features on map.

In that case, you would probably be interested in Leaflet.FeatureGroup.SubGroup plugin (see demo). Simply create 1 subgroup per “switchable” Features Group and set their parent as your single Marker Cluster Group:

var map = L.map('map', {
  maxZoom: 18,
}).setView([48.86, 2.35], 11);

var parentGroup = L.markerClusterGroup().addTo(map);

var overlays = {};

for (var i = 1; i <= 5; i += 1) {
  overlays['Group ' + i] = L.featureGroup.subGroup(
    parentGroup,
    getArrayOfMarkers()
  ).addTo(map);
}

L.control.layers(null, overlays, {
  collapsed: false,
}).addTo(map);

function getArrayOfMarkers() {
  var result = [];
  for (var i = 0; i < 10; i += 1) {
    result.push(L.marker(getRandomLatLng()));
  }
  return result;
}

function getRandomLatLng() {
  return [
    48.8 + 0.1 * Math.random(),
    2.25 + 0.2 * Math.random()
  ];
}

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
html,
body,
#map {
  height: 100%;
  margin: 0;
}
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js"></script>

<!-- Leaflet.FeatureGroup.SubGroup assets -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.featuregroup.subgroup.js"></script>

<div id="map"></div>

See also Cluster multiple Layers with markercluster

Note: for more complex use cases, there is also another plugin Leaflet.MarkerCluster.LayerSupport.

See also How to apply leaflet marker cluster using layers

Disclosure: I am the author of these plugins.

More Related Contents:

  1. Plotting 140K points in leafletjs
  2. Large dataset of markers or dots in Leaflet [closed]
  3. Leaflet changing Marker color
  4. Determine if a point reside inside a leaflet polygon
  5. Embedding a Leaflet map on a Blazor SPA
  6. Data-toggle tab does not download Leaflet map
  7. How to reference static assets within vue javascript
  8. Leaflet drawing tiles disjointly
  9. How to fix error “Failed to compile : ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41)”
  10. How to save Leaflet in R map as png or jpg file?
  11. Leaflet- marker click event works fine but methods of the class are undefined in the callback function
  12. refresh leaflet map: map container is already initialized
  13. Leaflet – How to find existing markers, and delete markers?
  14. Leaflet map not displayed properly inside tabbed panel
  15. Leaflet event: how to propagate to overlapping layers
  16. Storing Image Data for offline web application (client-side storage database)
  17. How to display Leaflet markers near the 180° meridian?
  18. Is there a way to use leaflet.heat in react?
  19. How to load a Google Maps baselayer in Leaflet (after june 2018)?
  20. How Do I connect two coordinates with a line using Leaflet in R
  21. Leaflet marker event fires at wrong time
  22. Click link inside Leaflet Popup and do Javascript
  23. Leaflet Legend for Custom Markers in R
  24. Can’t loop with R’s leaflet package to produce multiple maps
  25. How to secure the JavaScript API Access Token?
  26. Leaflet Map API with Google Satellite Layer [duplicate]
  27. leaflet map shows up grey
  28. R: Add title to Leaflet map
  29. How to get a leaflet map canvas to have a 100% height?
  30. in R, leaflet don’t reflect the latitude nor longitude?

Leave a Comment