leaflet-particles
Plugin to visualise dispersion of particles on a leaflet map.
Creates a custom leaflet layer with display modes:
- Final particle distribution:
- final downstream (source) or upstream (sink) percentages
- Cumulative exposure:
- percentage passing through cell from an upstream source or to a downstream sink
- displays a heat-map of total exposure
- Animation:
- use key frames to facilitate animation of particle positions over time
- displays circles at particle locations, colored by their age
todo
- investigate
L.setOptions
ability to handle nested objects in initialise - unify color scale options for diff displayModes
- better parameterisation of styling, options
install
Assuming you have node and npm installed:
npm install leaflet-particles --save
dependencies
This plugin has external dependencies:
To use this plugin, you either need to:
- load these dependencies yourself (prior to loading
leaflet-particles
); or - use the standalone version with dependencies bundled, in
dist/leaflet-particles-standalone.js
use and options
Note that L.setOptions
does not seem to be deep extending as expected,
to avoid issues in the immediate term - supply a full set of options (explicitly define defaults)
// create a particle layerconst mode = 'FINAL';const particleLayer = L; // add the layer to overlay controlconst layerControl = Lcontrollayers{} particles: particleLayer ;layerControl; // data and display mode can be updated like:particleLayer;particleLayer; // when in keyframe mode, set active frame like:particleLayer;
public methods
method | params | description |
---|---|---|
isActive |
check if the particle layer is currently active on the map | |
setData |
data: {Object} |
update the layer with new data |
update |
update the layer/redraw | |
setOptions |
options: {Object} |
update the layer with new options |
setDisplayMode |
mode: {String} |
one of: FINAL , EXPOSURE , KEYFRAME |
getDisplayMode |
Returns the current displayMode |
|
setFrameIndex |
index: {Number} |
display the particles at the given frame index |
getFrameIndex |
Get the current frame index (-1 if not set) | |
getGridInfo |
A wrapper function for L.heatBin.getGridInfo to get information about the grid used for binning |
|
getParticleLayer |
get the current underlying map layer used for drawing READONLY | |
getParticleIds |
get an array of unique particle ID's | |
getUniquePercentRange |
ignoreStatic: {boolean} disregard staticMax if set |
get an array of unique particle ID's |
onAdd |
optional callback when layer has been added to map | |
onRemove |
optional callback when layer has been removed from map |
data format
const data = // ISO timestamp for each keyframe // contains an array of particles (each particle snapshot is represented by an array) "2017-03-02T01:00:00.000Z": 6 // particle id 145077 // lon 100710 // lat 05 // depth (m) 10 // age "2017-03-02T02:00:00.000Z": ...