maptalks.wind

Usage

maptalks.wind is a maptalks layer used to rendering the globle wind data which get from the US National Weather Service publishes weather data for the whole globe, known as GFS. This project is heavily inspired by the work of https://github.com/mapbox/webgl-wind.

Examples

• A windlayer for the whole globe at 2016-11-20T00:00Z demo. (data from US National Weather Service).
• support for GFS data gfs.

Install

• Install with npm: npm install maptalks.wind.
• Download from dist directory.
• Use unpkg CDN: https://unpkg.com/maptalks.wind/dist/maptalks.wind.js

Vanilla Javascript

<script type="text/javascript" src="../maptalks.wind.js"></script>
<script>
var map = new maptalks.Map({});

var windData = {
    date: "2016-11-20T00:00Z",
    height: 180,
    image: '2016112000.png',
    source: "http://nomads.ncep.noaa.gov",
    uMax: 26.8,
    uMin: -21.32,
    vMax: 21.42,
    vMin: -21.57,
    width: 360
};
var windlayer = new maptalks.WindLayer('wind', {
    data : windData
}).addTo(map);
</script>

ES6

import { WindLayer } from 'maptalks.wind';

const windData = {
    date: "2016-11-20T00:00Z",
    height: 180,
    image: '2016112000.png',
    source: "http://nomads.ncep.noaa.gov",
    uMax: 26.8,
    uMin: -21.32,
    vMax: 21.42,
    vMin: -21.57,
    width: 360
};
const windlayer = new WindLayer('wind', {
    data : windData
});

support for GFS data

import { WindLayer } from 'maptalks.wind';

const windlayer = new WindLayer('wind', {
    data : '../path/gfs.json'
});

OR

const windData = {...};
const windlayer = new WindLayer('wind', {
    data : windData
});

Supported Browsers

IE 9-11, Chrome, Firefox, other modern and mobile browsers.

API Reference

Constructor

WindLayer is a subclass of maptalks.Layer and inherits all the methods of its parent.

new maptalks.WindLayer(id, options)

• id String layer id
• options Object options
  • count Number count of the particles (256 * 256 by default)
  • fadeOpacity Number how fast the particle trails fade on each frame(0.996 by default)
  • speedFactor Number how fast the particles move(0.25 by default)
  • dropRate Number how often the particles move to a random place(0.003 by default)
  • dropRateBump Number drop rate increase relative to individual particle speed (0.01 by default)
  • colors Object the color of the particles, it's usually a ramp color
  • data Object if your wind data is a lookup table image, it should includ lookup image, max wind velocity and min wind velocity, and if you wind data is a GFS json, it should be a json file path.

setWind(data)

set the wind data for windlayer

windlayer.setWind(data);

• data Object. It's an object like this:

   {
        height: 180,
        image: '2016112000.png',
        uMax: 26.8,
        uMin: -21.32,
        vMax: 21.42,
        vMin: -21.57,
        width: 360
    }

setParticlesCount(count)

set the count for particles

windlayer.setParticlesCount(count);

• count Number the count of the particles in layer

getParticlesCount()

get the count of particles for windlayer

windlayer.getParticlesCount();

Returns Number

• The count of particles.

setRampColors(colors)

set the ramp color for rendering particles

windlayer.setRampColors(colors);

• colors Object a ramp color object, the structure like this:

    {
        0.0: '#3288bd',
        0.1: '#66c2a5',
        0.2: '#abdda4',
        0.3: '#e6f598',
        0.4: '#fee08b',
        0.5: '#fdae61',
        0.6: '#f46d43',
        1.0: '#d53e4f'
    }

getWindSpeed(coordinate)

get the wind speed on specified location

windlayer.getWindSpeed(coordinate);

• coordinate maptalks.Coordinate

Returns Array

• The return value is a length of 2 Array which contains horizontal speed and vertical speed. The negative and positive of the value represent the direction of wind.

Develop

It is written in ES6, transpiled by babel and tested with mocha and expect.js.

• Install dependencies

$ npm install

• dev

$ npm run dev

• build

$ npm run build

• test

$ npm run test