leaflet-superclaster

leaflet-superclaster

Leaflet binding for supercluster

move	static
example	example

import * as L from 'leaflet'

import {SuperclusterGroup} from 'leaflet-superclaster'
import 'leaflet-superclaster/dist/supercluster.css'

this.superclusterGroup = new SuperclusterGroup().addTo(this.map)
this.superclusterGroup.on('point.click', function({parentLayer, layer, target}) {
  let popup = layer.getPopup()
  if (!popup) {
    popup = L.popup({
      autoClose: false,
      closeOnClick: false,
      autoPan: false
    }).setContent(JSON.stringify(layer.feature.properties))
    layer.bindPopup(popup).openPopup()
  }
})

this.superclusterGroup.on('layer.updated', function ({layer}) {
  const popup = layer.getPopup()
  if (popup && popup.isOpen()) {
    popup.setContent(JSON.stringify(layer.feature.properties))
  }
})

const features = [{
  properties: {
    // !! id in properties are required
    // used for redraw markers which changes the position
    id: 1
  },
  type: "Feature",
  geometry: {type: "Point", coordinates: [45, 66]}
}]
this.superclusterGroup.loadGeoJsonData(features)

Methods

loadGeoJsonData(features) - set markers positions
keepPoint(id) - Save point id for keep in view useful if appended popup with keepView optio
unKeepPoint(id)

Events

name	params	desciption
point.click	parentLayer, layer, target	Fired on click by point
cluster.click	parentLayer, layer, target	Fired on click by cluster
layer.created	layer, feature	fired on marker(point or cluster) create
layer.updated	layer, target	fired on layer position(lat, lng) was updated
draw	layer, target	fired after markers draw, return layers with markers
end		all data in worker executed
wait		data execution in worker

Development

Run webpack in dev mode and server with fixtures data

npm run watch

Tests

npm run test:e2e

Fallback

For use in ie 11 with webpack. Install copy-webpack-plugin and copy leaflet-superclaster.worker.js to root folder:

const CopyPlugin = require('copy-webpack-plugin')

...
plugins: [
  new CopyPlugin([
    { from: 'node_modules/leaflet-superclaster/dist/leaflet-superclaster.worker.js', to: 'leaflet-superclaster.worker.js' }
  ])
]
...