subplugin for the Leaflet.MarkerCluster that implements new possibilities how to place clustered chidren markers

random data demo

1. include Leaflet and Leaflet.MarkerCluster libraries (cdnjs, ungkg, ...) or npm install these libraries with npm install leaflet leaflet.markercluster

2. download and include built leaflet-markercluster.placementstrategies.js or leaflet-markercluster.placementstrategies.src.js file from dist folder or npm install npm install leaflet.markercluster.placementstrategies

3. create L.markerClusterGroup instance, add markers, and define placement strategy and other options. We recommend to hide spiderLegs by spiderLegPolylineOptions: {weight: 0}

var markers = L.markerClusterGroup({
  spiderLegPolylineOptions: { weight: 0 },
  clockHelpingCircleOptions: {
    weight: 0.7,
    opacity: 1,
    color: "black",
    fillOpacity: 0,
    dashArray: "10 5",
  },

  elementsPlacementStrategy: "clock",
  helpingCircles: true,

  spiderfyDistanceSurplus: 25,
  spiderfyDistanceMultiplier: 1,

  elementsMultiplier: 1.4,
  firstCircleElements: 8,
});

for (var i = 0; i < 10000; i++) {
  var circle = L.circleMarker([Math.random() * 30, Math.random() * 30], {
    fillOpacity: 0.7,
    radius: 8,
    fillColor: "red",
    color: "black",
  });
  markers.addLayer(circle);
}

map.addLayer(markers);

This sub-plugin can be easily used also with react-leaflet.

1. Install leaflet, react-leaflet, leaflet.markercluster, react-leaflet-markercluster npm install leaflet react-leaflet leaflet.markercluster react-leaflet-markercluster
2. Install leaflet.markercluster.placementstrategies npm install leaflet.markercluster.placementstrategies
3. Import libraries and create component

import L from "leaflet";

import {
  Map,
  Marker,
  TileLayer,
  LayersControl,
  LayerGroup,
} from "react-leaflet";

import MarkerClusterGroup from "react-leaflet-markercluster";
import "leaflet.markercluster.placementstrategies";

import "./../node_modules/leaflet/dist/leaflet.css";

export const MapComponent: React.FC = ({ center, zoom, points }) => {
  return (
    <Map center={center} zoom={zoom}>
      <LayersControl position="bottomright">
        <LayersControl.BaseLayer name="Open Street Maps">
          <TileLayer
            attribution="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
            url="https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png"
          />
        </LayersControl.BaseLayer>
      </LayersControl>
      <LayerGroup>
        <MarkerClusterGroup
          showCoverageOnHover={false}
          spiderLegPolylineOptions={{ weight: 0 }}
          clockHelpingCircleOptions={{
            weight: 0.7,
            opacity: 1,
            color: "black",
            fillOpacity: 0,
            dashArray: "10 5",
          }}
          elementsPlacementStrategy="clock-concentric"
          helpingCircles={true}
          maxClusterRadius={25}
          iconCreateFunction={(cluster) => {
            return divIcon({
              html: `<div class="outer"><div class="inner"><span class="label">${cluster.getChildCount()}</span></div></div>`,
              className: "marker-cluster",
              iconSize: [20, 20],
            });
          }}
        >
          {points.map((point, ii) => {
            return (
              <Marker key={ii} position={point.coords}>
                <Popup>
                  <div className="tooltip-content">{point.info}</div>
                </Popup>
              </Marker>
            );
          })}
        </MarkerClusterGroup>
      </LayerGroup>
    </Map>
  );
};

1. install npm modules npm install
2. run build command npm run build

npm start watches changes in js files and builds

• default - one-circle strategy (up to 8 elements*, else spiral strategy)

• spiral - snail/spiral placement

  

• one-circle - put all the elements into one circle

  

• concentric - elements are placed automatically into concentric circles, there is a maximum of 4 circles

  

• clock - fills circles around the cluster marker in the style of clocks

  

• clock-concentric - in the case of one circle, elements are places based on the concentric style, more circles are dislocated in the clock style

  

• original-locations - elements are placed at their original locations

  

*can be changed - _circleSpiralSwitchover variable in the original markerCluster code

the new type geometry called "helpingCircle" to make the cluster more visually-consistent (not supported for origin-locations strategy and spiral strategy)

• elementsPlacementStrategy (default value 'clock-concentric') - defines the strategy for placing markers in cluster, see above
• spiderfiedClassName (default value false) - a classname value for spiderfied markers, usefull for styling...

• firstCircleElements (default value 10) - the number of elements in the first circle
• elementsMultiplier (default value 1.5) - the multiplicator of elements number for the next circle
• spiderfyDistanceSurplus (default value 30) - the value to be added to each new circle distance value
• helpingCircles (default value true) - switch drawing helping circles on
• helpingCircleOptions (default value { fillOpacity: 0, color: 'grey', weight: 0.6 } ) - the style object for helpingCircle element

• this subplugin was not tested with the animations turned on (animation and animateAddingMarkers variables)
• circleMarkers should be preferred to markers
• use with L.SVG renderer if possible (L.Canvas renderer has technical issues with some visual properties, see #6)