leaflet-image-animator

Simple plugin to animate mutiple images as keyframes.

install

npm install leaflet-image-animator --save

use and options

See demo for detailed example.

const imageAnimatorLayer = L.imageAnimatorLayer({
  frames: [
    {
      time: '<time string>',
      img: '<base64 image string>'
    }
  ],
  startFrameIndex: 0,
  bbox: [
    '142.020371',
    '-28.589904',
    '155.372974',
    '-7.4053889999999996'
  ],
 
  // optional - supply the name of an existing custom pane 
  // default overlayPane (leaflet v0.7 compatible)
  paneName: 'myCustomPane' 
    
  // 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
getFrameTimes		Get an ascending array of all ISO times (can then be used to call setFrameTime)
setFrameTime	time: {string}	display the image at the given frame time
getFrameTime		Get the current frame time (-1 if not set)
setFrameIndex	index: {Number}	display the particles at the given frame index
getFrameIndex		Get the current frame index (-1 if not set)

Example data

Data shown for the Great Barrier Reef has been derived from CSIRO's eReefs products