https://github.com/danwild/wind-js-leaflet
Leaflet plugin to add visualisation overlay for wind direction, velocity, and temperature
https://github.com/danwild/wind-js-leaflet
leaflet temperature velocity visualisation visualization weather wind-js-leaflet
Last synced: 2 months ago
JSON representation
Leaflet plugin to add visualisation overlay for wind direction, velocity, and temperature
- Host: GitHub
- URL: https://github.com/danwild/wind-js-leaflet
- Owner: danwild
- License: other
- Created: 2016-03-18T03:24:09.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-13T02:28:16.000Z (over 8 years ago)
- Last Synced: 2025-03-31T06:02:13.072Z (2 months ago)
- Topics: leaflet, temperature, velocity, visualisation, visualization, weather, wind-js-leaflet
- Language: JavaScript
- Homepage: http://danwild.github.io/wind-js-leaflet/
- Size: 5.42 MB
- Stars: 215
- Watchers: 12
- Forks: 68
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# wind-js-leaflet [![NPM version][npm-image]][npm-url]
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](https://github.com/danwild/wind-js-server) instance.
The data is 1 degree, 6 hourly data from [NOAA](http://nomads.ncep.noaa.gov/).
## leaflet-velocity released
**Consider using [leaflet-velocity](https://github.com/danwild/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:
```javascript
WindJSLeaflet({ options: 'here' });
```
v2 way to init:
```javascript
WindJSLeaflet.init({ options: 'here' });
```
## 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:
- [Leaflet](leafletjs.com)
- [jQuery](https://jquery.com/)
## Options
```javascript
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:
- [L.CanvasOverlay.js](https://gist.github.com/Sumbera/11114288) (WindJSLeaflet v1)
- [gLayers.Leaflet](https://github.com/Sumbera/gLayers.Leaflet) (WindJSLeaflet v2)
- [grib2json](https://github.com/cambecc/grib2json)
- [earth](https://github.com/cambecc/earth)
- [WindJS](https://github.com/Esri/wind-js)
## License
MIT License (MIT)
[npm-image]: https://badge.fury.io/js/wind-js-leaflet.svg
[npm-url]: https://www.npmjs.com/package/wind-js-leaflet