Coder Social home page Coder Social logo

isabella232 / wind-js-leaflet Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cloudybay/wind-js-leaflet

0.0 0.0 0.0 10.49 MB

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

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

License: Other

CSS 1.61% HTML 2.03% JavaScript 96.36%

wind-js-leaflet's Introduction

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.

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)

wind-js-leaflet's People

Contributors

danwild avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.