• Stars
    star
    206
  • Rank 190,504 (Top 4 %)
  • Language
    JavaScript
  • License
    Other
  • Created over 8 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Leaflet plugin to add visualisation overlay for wind direction, velocity, and temperature

wind-js-leaflet NPM version

A plugin for Leaflet to add visualisation overlay of wind direction, wind velocity, and temperature. To use this plugin, you will need to run your own wind-js-server instance. The data is 1 degree, 6 hourly data from NOAA.

leaflet-velocity released

Consider using leaflet-velocity instead of wind-js-leaflet, as it is more flexible and up to date.

v2 Breaking Changes

Now supports both leaflet version 0.7.7 and 1.0.3. However this update brings one breaking change - how you initialise the plugin.

v1 way to init:

WindJSLeaflet({ options: 'here' });

v2 way to init:

WindJSLeaflet.init({ options: 'here' });

Screenshot

Install

Basic

Download zip and include dist/wind-js-leaflet.js and dist/wind-js-leaflet.css files using resource tags.

npm

npm install wind-js-leaflet

Use

Demo use here: http://danwild.github.io/wind-js-leaflet/

Dependencies

Prior to loading wind-js-leaflet, you need to load:

Options

localMode: true                                 // use a local data file to test before hitting a real wind-js-server
map: map,                                       // ref to your leaflet Map
layerControl: layerControl,                     // ref to your leaflet layer control
useNearest: false,                              // get nearest data to your ISO time string
timeISO: null,                                  // your ISO time string, falls back to current time (can also use WindJsLeaflet.setTime(time))
nearestDaysLimit: 7,                            // the maximum range (±) to look for data 
displayValues: true,                            // whether or not to add a mouseover control to display values
displayOptions: {
   displayPosition: 'bottomleft',               // leaflet control position
   displayEmptyString: 'No wind data'           // what to display in mouseover control when no data
},
overlayName: 'wind',                            // string to display for the overlay in your layer control
pingUrl: 'http://localhost:7000/alive',        // url to check service availability
latestUrl: 'http://localhost:7000/latest',     // url to get latest data with no required params   
nearestUrl: 'http://localhost:7000/nearest',   // url to get data nearest a specified time ISO
errorCallback: handleError                      // callback function to get called on error

Reference

wind-js-leaflet is possible because of things like:

License

MIT License (MIT)

More Repositories

1

wind-js-server

Service to expose Grib2 wind forecast data as JSON
JavaScript
142
star
2

react-webpack-django

De-coupled ReactJS client for greater flexibility and less black-box Django magic
JavaScript
29
star
3

leaflet-fa-markers

Simple svg map markers with FontAwesome icons.
JavaScript
22
star
4

text2json

Convert delimited txt file to json
JavaScript
22
star
5

decision-tree-builder

Build serialisable flowchart-style decision trees with D3.
JavaScript
17
star
6

leaflet-event-forwarder

Catches unhandled canvas layer events and re-dispatches them to the next layer in the stack
JavaScript
13
star
7

leaflet-network

PROJECT MOVED TO: https://bitbucket.csiro.au/projects/ONACI/repos/leaflet-network
JavaScript
6
star
8

react-redux-scaffold

WIP project to learn React+Redux concepts, and setup a project scaffold
JavaScript
5
star
9

leaflet-heatmap-radius

A plugin for heatmap.js to add heatmaps to leaflet, with a fixed radius option (meters).
JavaScript
4
star
10

leafletjs-canvas-overlay

Repo for npm wrapper of https://gist.github.com/Sumbera/11114288
JavaScript
4
star
11

generator-angular-typescript-gulp

A no-fluff yeoman generator for AngularJS (v1) Typescript apps
JavaScript
4
star
12

leaflet-wms-animator

A simple plugin to animate WMS layers
JavaScript
3
star
13

aurora-australis-forecaster

A cross-platform application for aggregating and visualising real-time Aurora Australis forecast data.
JavaScript
3
star
14

flowchart-to-sql

Experimenting with konva.js API for drawing flowchart/decision trees with SVG.
JavaScript
2
star
15

sagemaker-sentiment-analysis

A PyTorch RNN model for Sentiment Analysis deployed with AWS SageMaker
HTML
2
star
16

seinfeld-script-generator

Use RNN to generate new Seinfeld scripts
HTML
2
star
17

ol2-offline

A simple example of using OpenLayers V2 with no network connection.
HTML
2
star
18

cesium-model-viewer

JavaScript
2
star
19

set-connection-options

Meteor set additional mongo connection settings (e.g. sslCert) via $MONGO_CONNECTION_OPTIONS
JavaScript
2
star
20

leaflet-particles

MOVED TO: https://bitbucket.csiro.au/projects/ONACI/repos/leaflet-particles
JavaScript
2
star
21

xy-coordinate-converter

Converts XY coordinates to Lat/Lon positions
JavaScript
2
star
22

media-storm

Explore Australian natural disasters and their social impact.
JavaScript
1
star
23

cesium-demo

Repo for experimenting with CesiumJS functionality, and learning some JS build/dependency management tools.
JavaScript
1
star
24

opendap-viewer

Visualise 3D data from OpenDAP in a Jupyter Notebook
Jupyter Notebook
1
star
25

leaflet-heatbin

MOVED TO: https://bitbucket.csiro.au/projects/ONACI/repos/leaflet-heatbin
JavaScript
1
star
26

react-redux-demo

JavaScript
1
star
27

stem-australia

Data-driven narrative, highlighting the importance of STEM education for Australia's future
JavaScript
1
star
28

babylon-4d-cube

Example visualisation of 4d imagery cube using BabylonJS
JavaScript
1
star
29

webpack-react-tutorial

Repo for React+Webpack tutorial: https://www.valentinog.com/blog/react-webpack-babel/
JavaScript
1
star