Newfangled Package Modernizer

    leaflet-wms-animator

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

    Keywords

    none

    Install

    npm i leaflet-wms-animator

    DownloadsWeekly Downloads

    0

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • danwild