Leaflet plugin to animate large number of GeoJSON points.

e.g. scrubbing through 60MB of GeoJSON:

If you don't have a lot of points, and require more flexibility (e.g. support for polygons) + interactivity you should check out: leaflet-temporal-geojson instead.

install

npm install leaflet-point-animator --save

use

Most importantly - point features can either be provided as:

Standard GeoJSON spec array of point features (slower)

this is slower as features must be reprocessed into keyframes; however
will use a web worker to avoid blocking main thread

Pre-formatted keyframes (faster)

an object where keys are ISO timestrings of the keyframes, and values are arrays of GeoJSON point features
see demo for concrete example

const pointAnimatorLayer = L.pointAnimatorLayer({
  // Create keyframes from raw GeoJSON features
  features: [
    {} // flat array of GeoJSON features
  ],
  // OR -> pre-formatted keyframes
  keyframes: {
    '<ISO_TIME>': [], // array of GeoJSON point features for this keyframe 
  },
  // which property to use for time (expects ISO 8601 string)
  timeKey: "time",
  style(feature) {
    return {
      // do custom styling things
      fillColor: color(feature.properties.age),
      stroke: false,
      radius: 5
    }
  },
  // OPTIONAL - supply the name of a custom pane,
  // will be created if doesn't exist, defaults to overlayPane
  // https://leafletjs.com/reference-1.6.0.html#map-pane
  paneName: 'myCustomPane',
  // OPTIONAL - callback to be notified when keyframes ready for use
  onKeyframesReady() {
    // DEMO - get a list of frame keys, and set first frame active
    const frameKeys = pointAnimatorLayer.getFrameKeys();
    pointAnimatorLayer.setFrame(frameKeys[0]);
  },
  // OPTIONAL - callbacks when layer is added/removed from map
  onAdd: function(){},
  onRemove: function(){},
});

public methods

method	params	description
`isActive`		check if the layer is currently active on the map
`getFrame`		Get the current frame time (-1 if not set)
`getFrameKeys`		Get an ascending array of all ISO times (can then be used to call `setFrame`)
`setFrame`	`time: {string}`	display the features at the given ISO time (if calling from something like a range slider, recommended to throttle - see demo).
`clearCanvas`		Clears canvas of any points
`redraw`		Trigger a redraw of the canvas

development

npm install
npm run build

thanks

https://github.com/Sumbera/gLayers.Leaflet