Leaflet.MarkerCluster.PlacementStrategies
subplugin for the Leaflet.MarkerCluster that implements new possibilities how to place clustered chidren markers
Demo:
How to use:
-
include Leaflet and Leaflet.MarkerCluster libraries (cdnjs, ungkg, ...) or npm install these libraries with
npm install leaflet leaflet.markercluster
-
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
-
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; for var i = 0; i < 10000; i++ var circle = L; markers; map;
React-leaflet
This sub-plugin can be easily used also with react-leaflet.
- Install leaflet, react-leaflet, leaflet.markercluster, react-leaflet-markercluster
npm install leaflet react-leaflet leaflet.markercluster react-leaflet-markercluster
- Install leaflet.markercluster.placementstrategies
npm install leaflet.markercluster.placementstrategies
- Import libraries and create component
; ; ;; ; ;
How to build:
- install npm modules
npm install
- run build command
npm run build
npm start
watches changes in js files and builds
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
the new type geometry called "helpingCircle" to make the cluster more visually-consistent (not supported for origin-locations strategy and spiral strategy)
Options
- 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...
Options that are valid for placement strategies 'concentric', 'clock' and 'clock-concentric'
- 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
Notes:
- this subplugin was not tested with the animations turned on (
animation
andanimateAddingMarkers
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)