leaflet-temporal-geojson
A somewhat unopinionated leaflet (v1+) plugin to animate GeoJSON features using an arbitrary time property:
- You decide how to change frames (event driven range slider components, methods calls, whatever 🤷♂️)
- You control feature styling (static, dynamic, whatever 🤷♀️)
how does it work
- features are clustered into layer 'keyframes' using supplied time property
- keyframes are rendered depending on time key
- features may have custom styles applied using properties
notes
- to improve rendering performance, points are rendered as
L.circleMarker
vectors using L.geoJSON'spointToLayer
function (i.e. to avoid use of DOM<img>
for markers)
install
npm install leaflet-temporal-geojson --save
development
npm install npm run build
use and options
See demo for detailed example.
const layer = L;
public methods
method | params | description |
---|---|---|
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 ) |
|
isActive |
check if the layer is currently active on the map | |
setFrame |
time: {string} |
display the features at the given ISO time (if calling from something like a range slider, recommended to throttle - see demo). |
setStyle |
style: {function} |
Changes styles of GeoJSON vector layers with the given style function. Set falsey for defaults. |
getBounds |
time {string} |
Get the bounds at given time (falls back to bounds of current keyframe, and then bounds of first keyframe if not set). |
example data
The included example data is fictional and intended for demonstration purposes only, however - if you're interested in marine connectivity modelling you should check out some of CSIRO's work on connectivity modelling here, and here.