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