danwild / wind-js-leaflet Goto Github PK

View Code? Open in Web Editor NEW

195.0 12.0 68.0 5.55 MB

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

Home Page: http://danwild.github.io/wind-js-leaflet/

License: Other

JavaScript 96.36% HTML 2.03% CSS 1.61%

leaflet velocity temperature weather visualization visualisation wind-js-leaflet

wind-js-leaflet's Introduction

wind-js-leaflet

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

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:

L.CanvasOverlay.js (WindJSLeaflet v1)
gLayers.Leaflet (WindJSLeaflet v2)
grib2json
earth
WindJS

License

MIT License (MIT)

wind-js-leaflet's People

Contributors

Stargazers

Watchers

Forkers

npmcdn-to-unpkg-bot rjdestigter schlunsen cuulee cloudybay simplegis dodolooking lpk-py gis520 leeon1982 tomhaitao gishome lu0371 vovoma foipngoc voole lzuniujp08 zjlwmz aaron-jo inwikipedia chaogis wegiangb happyport by1773 ag-networks nikospe aimuzi shawnd cannot gisdevelope tsc9 upcominglegend ycangus2415 ffye1981 adaniy anderssonpb ertian kokocheung sky110120 zkyq05 fishergisdldt martinadamsdev jobs123654 patience-lilisi weiqilee solocao jiaqiangstyle rambo2015 bodartv in-tang ljianga gzy21 fuwenjie victorstevan wanghenggit xfqbo amnhi77en aizhan87 begoniachee wr9264784 smitpatel-31 mynameisqishiqi seanpm2001 shangyuren555 aukeschaap aliencraft1512 xuanxiaotaizi

wind-js-leaflet's Issues

where's the data

where's the data?can you give me a direct link?noaa has so many datasets

Change "data" on-the-fly

If I want to change the dataset being rendered, must I rebuild the object with object, or can I somehow just change the "data" element during runtime?

How to load real-time wind data from server?

@danwild
I have set localMode to false, but how to retrieve new real-time info from server??

Right now the wind data is coming from the demo.json, but how to use real wind data??

What to replace these three URLs with??
pingUrl: 'http://localhost:7000/alive',
latestUrl: 'http://localhost:7000/latest',
nearestUrl: 'http://localhost:7000/nearest',

WindJSLeaflet.init({
localMode: false,
});
How to download the latest new JSON file automatically??

Windspeed varies on zoomlevel

Spotted something strange or an bug??
Zoomed out:

Zoomed in:

Disable zoom-out function after top-most zoom level

@danwild
I would like to disable the zoom-out after top-most zoom level like this: http://jsfiddle.net/gxzhc/3/

I'm unable to achieve this, look at the screenshot. I do not want to display "Map data not yet available", but instead I need to disable the zoom-out level, and of course no repetition of world map.

I have done so far: demo.js
var Esri_WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, ' +
'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
noWrap: true
});

var map = L.map('map', {
layers: [ Esri_WorldImagery ],
zoom: 0,
center: [49.009952, 2.548635],
maxBounds: [
[-85.0, -180.0],
[85.0, 180.0]
]
});

What code should I add to achieve the same as the jsfiddle I provided above?

How do i load the wind-js on page load?