Newfangled Package Modernizer


    0.1.1 • Public • Published

    leaflet wms animator npm version

    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){
  'getImage', requestUrl, function(err, base64ImgString) {
                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.


    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);






    npm i leaflet-wms-animator

    DownloadsWeekly Downloads






    Last publish


    • danwild