Skip to content

adammertel/Leaflet.MarkerCluster.PlacementStrategies

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

86 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

React-leaflet

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

How to build:

  1. install npm modules npm install
  2. 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 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)

Releases

No releases published

Packages

No packages published