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