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.
	proxyFunction: function(requestUrl, time, resolve, reject){
		
		Meteor.call('getImage', requestUrl, function(err, base64ImgString) {
			if(err){
				reject(err);
			}

			resolve({ time: time, img: base64ImgString });
		});
	},
	
	// 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.initAnimation(args, function(frames){

	// if you didn't provide your own frames this callback function returns the 
	// array of images with their respective time stamps (e.g. you can use timestamps in UI)
});

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 new Promise((resolve, reject) => {
	encode(url, {string: true}, function (err, res) {
		if(err) reject(err);
		
		// returns a base64 encoded string representing our layer image
		resolve('data:image/png;base64,' + res);
	});
});

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.addEventListener('wmsAnimatorFrameIndexEvent', function (e) {
   console.log('current frame time is at array index: '+ e.detail);
});

license

MIT

danwild / leaflet-wms-animator Goto Github PK