nonconforme/leaflet.markercluster.placementstrategies

Impelements new possibilities to place markers for Leaflet.MarkerCluster plugin

Leaflet.MarkerCluster.PlacementStrategies

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

Demo:

random data demo

How to use:

1. include Leaflet and Leaflet.MarkerCluster libraries (cdnjs, ungkg, npm install...)

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

3. create L.markerClusterGroup instance, add markers and define placement strategy and othe options:

var markers = L.markerClusterGroup({
  spiderLegPolylineOptions: {weight: 0},
  clockHelpingCircleOptions: {weight: .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);

How to build:

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

npm start will watch and build on changes

Placement Strategies

• 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

Helping Circles

new type geometry called "helpingCircle" is added and can be used for the last three strategies to make the cluster more visually-consistent.

Options

• elementsPlacementStrategy (default value 'clock-concentric') - defines the strategy for placing markers in cluster, see above
• spiderfiedClassName (default value false) - if a value of type string is defined, the code will assign this value to the spiderfied markers

Options that are valid for placement strategies 'concentric', 'clock' and 'clock-concentric'

• firstCircleElements (default value 10) - number of elements in the first circle

• elementsMultiplier (default value 1.5) - multiplicator of elements number in the next circle

• spiderfyDistanceSurplus (default value 30) - value to be added to each new circle distance

• helpingCircles (default value true) - will draw helping circles

• helpingCircleOptions (default value { fillOpacity: 0, color: 'grey', weight: 0.6 } ) - possibility to specify helpingCircle style

Notes:

• 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 some technical issues with some visual properties, see #6)