leaflet-superclaster v0.1.5

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

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' }
  ])
]
...