leaflet wms animator
Animate WMS layers with temporal dimensions.
Some WMS implementations now support animations through the use of animated GIFs
(e.g. Geoserver WMS Animator).
However; the lack of start/stop/step/rewind etc. functionality in a GIF limits the usefulness of this approach.
This simple JS plugin provides some convenience functions to pre-fetch a collection of temporal slices from WMS to step through and/or animate them as leaflet image overlays.
Note that this plugin works for ncWMS (as per example, params
object accepts arbitrary key/value pairs).
notes before use
- Please use responsibly if you you attempt to request too many tiles at once, you may cause out of memory issues in your target WMS server.
A better approach for larger animations is to use the
frames
param to supply images you have pre-cached yourself. - To get around CORS restrictions, I am using a proxy server. If using this plugin to generate your own frames - you will also need a proxy server, OR have admin access to your target WMS to enable CORS.
- This plugin uses ES6 Promise syntax, which is not supported by older browsers - you may need a Polyfill.
example use
var args = // reference to your leaflet map map: map // WMS endpoint url: 'http://localhost:8080/geoserver/wms' // time slices to create (u probably want more than 2) times: "2016-09-17T11:00:00.000Z" "2016-09-17T12:00:00.000Z" // the bounds for the entire target WMS layer bbox: "144.9497022""-42.5917177""145.7445272""-41.9883032" // how long to show each frame in the animation timeoutMs: 300 // PREFERRED: provide your own frames, that have been cached earlier: frames: "time": "2016-09-17T11:00:00.000Z" "img": <base64 string> "time": "2016-09-17T12:00:00.000Z" "img": <base64 string> ... // OPTIONAL - only required if you are not providing your own frames // **See defining image request for more info** // due to CORS restrictions, you need to define an async function to ask your proxy server to make the WMS // GetMap request and resolve the result (as a base64 encoded string). This example is using a call to a server function called // 'getImage' (in MeteorJS). Note that if your target WMS is CORS enabled, you can just define a direct HTTP request here instead. { Meteor; } // OPTIONAL - only required if you are not providing your own frames // your WMS query params params: BBOX: "144.9497022,-42.5917177,145.7445272,-41.9883032" LAYERS: "temp" SRS: "EPSG:4326" VERSION: "1.1.1" WIDTH: 2048 HEIGHT: 2048 transparent: true // ncWMS params (optional) abovemaxcolor: "extend" belowmincolor: "extend" colorscalerange: "10.839295,13.386014" elevation: "-5.050000000000001" format: "image/png" logscale: false numcolorbands: "50" opacity: "100" styles: "boxfill/rainbow" ; LeafletWmsAnimator;
defining the image request
Images for the map layers are defined as base64 strings.
For simplicity, in my proxy server function - I use the encode
method from
node-base64-image wrapped in a Promise, like this:
return { ;};
convenience functions
- forward: step forward to next frame
- backward: step backward to previous frame
- play: start animating
- pause: pause animation
- setFrameIndex: skip to a specific animation frame
- destroyAnimation: destroy animation, removes image overlay layers from map etc.
events
The wmsAnimatorFrameIndexEvent
is dispatched from window
every time a frame is changed, you can listen to this event to know what time frame is currently active.
Example use:
window;
license
MIT