Giter Site home page Giter Site logo

onaci / leaflet-velocity Goto Github PK

View Code? Open in Web Editor NEW
571.0 26.0 210.0 5.96 MB

Visualise velocity data on a leaflet layer

Home Page: https://onaci.github.io/leaflet-velocity/

License: Other

CSS 0.74% JavaScript 99.26%
leaflet velocity wind water ocean current weather visualization visualisation

leaflet-velocity's Introduction

leaflet-velocity NPM version NPM Downloads

Version 2 Notice

As of version 2, leaflet-velocity is now under CSIRO's Open Source Software Licence Agreement, which is variation of the BSD / MIT License.

There are no other plans for changes to licensing, and the project will remain open source.


A plugin for Leaflet (v1.0.3, and v0.7.7) to create a canvas visualisation layer for direction and intensity of arbitrary velocities (e.g. wind, ocean current).

Live Demo: https://onaci.github.io/leaflet-velocity/

  • Uses a modified version of WindJS for core functionality.
  • Similar to wind-js-leaflet, however much more versatile (provides a generic leaflet layer, and not restricted to wind).
  • Data input format is the same as output by wind-js-server, using grib2json.

Screenshot

Example use:

var velocityLayer = L.velocityLayer({
  displayValues: true,
  displayOptions: {
    // label prefix
    velocityType: "Global Wind",

    // leaflet control position
    position: "bottomleft",

    // no data at cursor
    emptyString: "No velocity data",

    // see explanation below
    angleConvention: "bearingCW",

    // display cardinal direction alongside degrees
    showCardinal: false,

    // one of: ['ms', 'k/h', 'mph', 'kt']
    speedUnit: "ms",

    // direction label prefix
    directionString: "Direction",

    // speed label prefix
    speedString: "Speed",
  },
  data: data, // see demo/*.json, or wind-js-server for example data service

  // OPTIONAL
  minVelocity: 0, // used to align color scale
  maxVelocity: 10, // used to align color scale
  velocityScale: 0.005, // modifier for particle animations, arbitrarily defaults to 0.005
  colorScale: [], // define your own array of hex/rgb colors
  onAdd: null, // callback function
  onRemove: null, // callback function
  opacity: 0.97, // layer opacity, default 0.97

  // optional pane to add the layer, will be created if doesn't exist
  // leaflet v1+ only (falls back to overlayPane for < v1)
  paneName: "overlayPane",
});

The angle convention option refers to the convention used to express the wind direction as an angle from north direction in the control. It can be any combination of bearing (angle toward which the flow goes) or meteo (angle from which the flow comes), and CW (angle value increases clock-wise) or CCW (angle value increases counter clock-wise). If not given defaults to bearingCCW.

The speed unit option refers to the unit used to express the wind speed in the control. It can be m/s for meter per second, k/h for kilometer per hour or kt for knots. If not given defaults to m/s.

Public methods

method params description
setData {Object} update the layer with new data
setOptions {Object} update the layer with new options

Build / watch

npm run watch

Reference

leaflet-velocity is possible because of things like:

Example data

Data shown for the Great Barrier Reef has been derived from CSIRO's eReefs products

License

CSIRO Open Source Software Licence Agreement (variation of the BSD / MIT License)

leaflet-velocity's People

Contributors

brentfraser avatar claustres avatar danwild avatar dependabot[bot] avatar mylesmc123 avatar phil-krull avatar pvernier avatar slutske22 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leaflet-velocity's Issues

Inverse Y axis animation

When we get sub-region data for wind for example:

leftlon: -40, rightlon: -30, toplat: 40, bottomlat: 30

The rendered wind animations shows on wrong points for y axis. Have a look at attached wind json file using above bounds:

2018070512.txt


Upon further investigation, I found out the issue is related to Scan mode. Leaflet Velocity works with Scan mode 0 only while the sub-region data is rendered in scan mode 64

Leaflet-Velocity with TIME ?

Hello.
I'm new around here and I'd like to know if it's possible to use this great plugin (Velocity) with any kind of TIME control in Leaflet maps.
Any help will be very appreciated.
Thanks much.

how to add winlayer overlay( on top) over temperature data?

i seen this
https://earth.nullschool.net/#current/wind/surface/level/overlay=temp/orthographic=84.40,10.30,431/loc=90.698,5.106

i have already add temperature layer and i want add windlayer overlay over this temperature layer
but it when i add windlayer it always botoom

$.getJSON('wind-global.json', function (data) {

            var velocityLayer = L.velocityLayer({
                displayValues: true,
                displayOptions: {
                    velocityType: 'Global Wind',
                    displayPosition: 'bottomleft',
                    displayEmptyString: 'No wind data'
                },
                data: data,
                maxVelocity: 15,  
            })
            layerControl.addOverlay(velocityLayer, 'Wind - Global');

        })

i need some help

Use with CRS.Simple coordinate system

I want to use Velocity with Leaflet's Custom Coordinate Reference System, but even though something shows up, the results look far away from what they should, see a JS Fiddle of how far I got.

Basically I made a 10x10 Velocity grid, and also use a 1-10 x 1-10 custom coordinates grid in Leaflet. The biggest issues I see are:

  • speed of particles is inverse to zoom, so the more I zoom in, the slower they become. Imo their speed should stay constant or become faster
  • for some reason they only move vertically, but the dataset is taken from sample Wind GBR where they also move horizontally so not sure why I don't see it?

Basically I am wondering - is Velocity able to work with Simple Custom Reference System at all through supplying matching dataset JSON and tweaking its settings, or does it require basic Earth Map only? Thanks a lot

Missing PR in new release ?

Just tested the 1.2.0 NPM package and it does not seem to include this yet merged PR #10, is it an error or do you plan to release a new version soon ?

Thanks

Tile selection blocked in Safary after displaying wind-global option.

Hi,

There is an issue using I-PAD and Safari ( IOS 10.0.4 ) . I can reproduce it with demo https://danwild.github.io/leaflet-velocity . After selecting global-wind option, the wind is displayed correctly but there is no way to unselect it, and it's also impossible to select an other tile layer. The bug seem's to occure only with Safari, an only with wind global option. Other option Wind - Great Barrier are ok. Pb with memory management?

Changing the speed unit has no effect

Value is always in m/s and m/s is always displayed in the UI even if the speedUnit: 'kt' option is set.

This is linked to the fact that the merge of PR #8 in commit 38fe1a4 was not completly right, see 38fe1a4#commitcomment-25654602.

The correct code as seen in my fork is the following:

if(gridValue && !isNaN(gridValue[0]) && !isNaN(gridValue[1]) && gridValue[2]) {
  htmlOut = "<strong>"+ this.options.velocityType +" Direction: </strong>"+  self.vectorToDegrees(gridValue[0],gridValue[1],this.options.angleConvention).toFixed(2) + "°" +
            ", <strong>"+ this.options.velocityType +" Speed: </strong>" + self.vectorToSpeed(gridValue[0],gridValue[1],this.options.speedUnit).toFixed(2) + this.options.speedUnit;
}

Since on my side the merge has been correct on my master it is not easy to create a specific PR for this, would you mind reporting it directly in your master branch ?

Thanks.

Proposal for a contribution

Dear Dan, for a project using weather forecast data I’ve been involved into I discovered your work, mainly https://github.com/danwild/wind-js-server and https://github.com/danwild/leaflet-velocity. I started modifying your code https://github.com/weacast/wind-server but then I decided starting an effort to create a more generic Open Source platform on this topic : https://github.com/weacast.

It is a work in progress but I start having a running base, you have some information here https://weacast.gitbooks.io/weacast-docs/. Because you have done a similar work before I wonder if you were interested in collaborating to create a GFS plugin for Weacast ? I think we could also work on improving leaflet-velocity or creating npm module to share some code parts.

Sorry using the issue tracker for this but didn't know how to contact you otherwise (your GitHub e-mail does not seem to work), let me know any other prefered way to contact you.

Thanks in advance for your return,

Crashing with Leaflet v1.1.0

After updating to leaflet v1.1.0 I get this error in console:

Cannot assign to read only property 'setTransform' of object '#<Object>'
    at Object.L.Control.Coordinates.L.Control.extend.options.position

There is a setTransform function defined to work on leaflet v0.7.x and if I remove it then it works. Is there a quick fix for that without dropping v0.7.x support?

Support already projected grid

Hi,
It work as expected when I use a grid coming from a mercator image, but if I use a generated Tile already projected as my source he result is not correct due to the projection.see attached files
velocity_mercator
Velocity_tile

Do you have any advice on how to achieve this ?

Thanks for your help

Error when build --prod on Angular 6

Hi,
I integrated it into Leaflet via Angular (6.0) and I had to set it up for the typescript but it works.
Except when I launch a build --prod, the velocity library doesn't work anymore. It seems that the data is not readable.
Do you know what the problem is?

Use of AddVelocity() in leaflet.extras2 in R

Hi, I am trying to use the AddVelocity function in the leaflet.extras2 package in R so that I can add wind velocity visualization data to my leaflet map. I have found JSON u and v wind data from NOAA, but I cant seem to successfully add my wind velocity data using the content=. Any suggestions on how to format the json data so that AddVelocity can process it into an animation? The code below runs in R, but no wind arrows or animation is produced. Any help would be much appreciated!

content<-"https://pae-paha.pacioos.hawaii.edu/erddap/griddap/ncep_global.json?ugrd10m%5B(2020-06-16T12:00:00Z)%5D%5B(-23.5):(80.0)%5D%5B(219.0):(323.5)%5D&.draw=surface&.vars=longitude%7Clatitude%7Cugrd10m&.colorBar=%7C%7C%7C%7C%7C&.bgColor=0xffccccff"

leaflet() %>%
addTiles(group = "base") %>%
setView(-71,42,5) %>%
leaflet.extras2::addVelocity(content =content ,group = "velo", layerId = "veloid")

Site with wind data :https://pae-paha.pacioos.hawaii.edu/erddap/griddap/ncep_global.graph?tmpsfc[(2011-05-07T00:00:00Z)][(34.625):(46.875)][(283.125):(295.375)],tmp2m[(2011-05-07T00:00:00Z)][(34.625):(46.875)][(283.125):(295.375)]&.draw=vectors&.vars=longitude%7Clatitude%7Ctmpsfc%7Ctmp2m&.color=0x000000&.bgColor=0xffccccff

Add a third "dimension" to the data

I'd like to add another dimension, such as temperature, rainfall, or something, to the data that appears on the mouseover. Ideally, I'd like to interpolate it as well as you do with the speeds,

Is that possible?

If so, how?

How would I use my own wind data with leaflet-velocity?

I have a network of weather stations that report wind speed and direction, I am wondering if/how I could use my data with leaflet-velocity. I took a look at the out.json file from the wind-js-server package and see that there is a lot more information there than what I could provide. I only have coordinates and a velocity for each station, so I am not sure if that is enough. What data does leaflet-velocity require? Thanks in advance.

The animation frame stop working when ZOOM the map

The animation frame stop working when ZOOM the map but if I move the map just a little bit the animation frame get back to the right place...

Please see file attached.

Does anyone here know how can I fix this please?

Thanks much in advance and best regards!

Selection_052

How to run the demo

Tried running using the demo files but the only things I see are the satellite map and the grey map

$ not found

In my app I don't have jquery installed - so I get an error

leaflet-velocity.min.js:formatted:150 Uncaught ReferenceError: $ is not defined
    at e._onMouseMove (leaflet-velocity.min.js:formatted:150)

Which I guess is coming from Line 85 of L.Control.Velocity.js
I guess maybe a if (window.jQuery) { would help - but not being a user of jquery...

leaflet-velocity does not update from wind-js-server

Great project but I need a little help.
When running demo.html in firefox and selecting wind-global the wind pattern is always the same.
No errors in console when running npm in leaflet-velocity or wind-js-server.
XML Parsing Error: syntax error for wind-global.json Line Number 1, Column 1 in firefox.
If I take the most recent json-data from wind-js-server & copy to demo folder in leaflet-velocity and rename it to wind-global.json the wind pattern is updated.
Running on windows 10 system.
I placed wind-js-server folder in the leaflet-velocity main directory.
I am guessing a path needs changed being I am using windows but don't know for sure.
Thanks and any help would be appreciated.

How turn off animation?

Hi,

I currently use _clearWind() to stop the animation but it restarts when I zoom on the leaflet map.
The goal would be to have an on/off button on the map.

function clearAppWind() { _self._mapService.particles_layer._clearWind(); } function startAppWind() { _self._mapService.particles_layer._startWindy(); } myMap.on('zoomstart', clearAppWind); myMap.on('movestart', clearAppWind); myMap.on('zoomend', startAppWind); myMap.on('moveend', startAppWind);

EPSG 4326 projection support?

Hello,

I am interested in using your plugin in order to represent data of automatic weather stations interpolating them on a grid. I have achieved good outcomes with Leaflet without further problems. However, upon trying to use a different map projection from the one that Leaflet uses by default (Web Mercator EPSG3857), I do not manage to obtain any results, I only got wrong vertical lines.
I would like to know if you could help me editing your script so that I can use it with EPSG 4326 projection.

Find attached two images:

Web Mercator EPSG3857
https://imgur.com/MqbwGsR
https://imgur.com/B86uBQb
EPSG 4326 projection
https://imgur.com/NmRXUTI

Nevertheless, I've partly managed to solve the problem by modifying the H parameter in the function "distortion" from windy.js.

var H = Math.pow(10, -5.2) ; with a value around 3, particles appear in movement.

https://imgur.com/TKD0dw8

The problem is that the canvas image created does not adjust to the interpolated values in windy.js, that is to say, the grid of values adjusts perfectly to (latitude, longitude, value) but the canvas image is put above these latlon values (literally the problem lies on the latitude (height), not the longitude (width)), although the movement of the particles and their intensity are correct. It's like if the image wasn't correctly fit in the map in the 4326 projection and keeps the Web Mercator.

Do you have any idea about what could be happening regarding to the generated canvas bounds? Maybe the distortion function is not correct in another projection apart from Web Mercator?
Where and how could I change the mercator projection to 4326? I guess it lies in the invert (x, y, windy) function.

I've also seen that the function includes a variable called "projection" which is defined in the 274 line and I don't know where could it be used nor the function it has.

I look forward to your response.

Many thanks in advance.

Kind regards,

Positionning of a new layer after move

Hey there,
Great piece of work, I really enjoy leaflet-velocity.
One issue I noticed : If I select a layer, then move into my map, unselect the layer and select another one (or same one), this new layer is badly positionned until I move again.
Example with your demo :

  • select "Ocean Current - Great Barrier Reef"
  • move into map
  • uncheck "Ocean Current - Great Barrier Reef"
  • check "Wind - Great Barrier Reef"
  • This new layer is not positionned correctly
  • move into map
  • Layer is ok

drag too lag.

Thanks for This Great Plugins First.

I have created a demo by leaflet-velocity , the latest version 1.7 . the problem is when I drag or zoom the map.it seems that too lag. but the data is simple and short. the map projection is EPSG:4326 (wgs84)

[{"data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.5,-0.87,1.21,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.61,0.5,-1.84,-2.3,2.56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-1.05,0.55,1.03,0.09,0,0,0,0,0,0,0,0,0,0,-1.38,-1.54,-0.33,2.15,-3.48,-4.66,-6.3,0,0,0,0,0,0,0,0,0,0,0,0,-0.84,0.81,-0.18,-1.19,0.11,1.22,0,0,0,0,0,0,2.53,-1.38,3.9,-0.34,1.3,-1.47,-2.96,4.37,0,0,0,0,0,0,0,0,0,0,0,0,0.11,0.65,0.79,-0.43,-2.16,2.15,2.3,1.99,1.72,-1.45,-1.66,1.16,3.31,-4.7,2.24,0.62,0.98,-1.36,-0.25,-1.32,0,0,0,0,0,0,0,0,0,0,0,1.43,0.85,0.28,-0.75,0.3,-1.33,0.85,-0.75,1.19,-0.97,-2.62,-2.3,-1.87,1.22,-2.15,-0.73,-1.56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-2.53,-2.19,0.97,-0.37,-3.22,2.79,-1.6,-0.62,-1.11,2.37,1.6,-0.51,1.49,-1.1,0.08,-1.97,-2.43,0.16,0,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,4.29,-5.17,3.11,5.29,6.52,6.47,-4.22,-2.81,2.24,0.23,-0.11,0.32,0.3,0.49,-1.14,1.25,-1.57,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,2.2,-7.11,-0.2,1.49,4.11,1.03,-1.07,1.52,-1.79,0.06,-0.88,0.93,-0.45,-1.6,0.55,-0.5,2.66,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-1.02,0.76,1.86,1.95,null,0.82,0.5,-0.55,-0.03,0.11,0.83,-1.18,-1.29,1.02,-1.19,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-2.09,1.96,-1.75,-2.62,0.88,-0.31,0.65,1.39,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-0.35,0.7,0.89,0.19,-0.79,-1.49,0.03,-1.44,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.26,0,0,0,0.6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,null,-1.7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"header":{"parameterCategory":2,"la1":56.5,"parameterNumberName":"eastward_wind","nx":33,"refTime":"2020-01-01 11:00:00","ny":17,"parameterNumber":2,"lo2":145.35,"dx":2.5,"lo1":62.85,"parameterUnit":"m.s-1","la2":14,"dy":2.5}},{"data":[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-0.98,-3.18,-3.92,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1.48,2.04,2.74,1.92,1.74,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.58,0.95,0.38,0.18,0,0,0,0,0,0,0,0,0,0,0.8,-1.84,2.07,1.46,0.39,-5.75,-1.1,0,0,0,0,0,0,0,0,0,0,0,0,0.32,1.02,-0.78,1.35,-1.6,0.69,0,0,0,0,0,0,-2.7,4.07,0.12,1.05,-1.39,-2.5,-2.05,1.42,0,0,0,0,0,0,0,0,0,0,0,0,-0.59,-0.26,-0.1,-1.01,-0.42,-0.83,-1.21,-1.51,2.08,0.39,1.74,1.51,1.14,-0.19,-1.33,1.03,0.69,-1.33,1.28,-1.63,0,0,0,0,0,0,0,0,0,0,0,0.72,-0.29,-0.29,1.07,1.16,-0.44,1.47,1.18,-1.73,1.86,-0.65,-1.92,3.19,2.3,-0.45,-1.19,-0.36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2.56,-0.17,2.63,-4.69,6.22,4.85,-0.82,3.45,0.86,0.39,0.02,2.35,-0.82,-0.08,0.8,1.99,-1.75,-3,0,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,0.29,1.19,4.04,1.07,-5.14,-0.66,-3.98,5.42,-0.53,2.59,-1.7,1.57,0.85,1.31,1.52,1.69,-2.79,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-2.19,1.63,3.19,3.82,3.95,-5.5,0.25,1.98,0.17,-1.7,-0.96,0.38,1.11,0.09,-0.71,-2.55,-1.39,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,1.36,1.96,0.38,-2.01,null,-2.36,-0.98,0.43,1,-1.29,0.34,-1.08,-0.12,1.1,-0.92,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-0.7,1.38,0.4,0.98,0.21,-1.06,0.76,0.56,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,null,-1.04,0.05,-2.55,2.19,1.39,-0.17,1.6,-0.91,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.32,0,0,0,3.55,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,null,0.04,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],"header":{"parameterCategory":2,"la1":56.5,"parameterNumberName":"northward_wind","nx":33,"refTime":"2020-01-01 11:00:00","ny":17,"parameterNumber":3,"lo2":145.35,"dx":2.5,"lo1":62.85,"parameterUnit":"m.s-1","la2":14,"dy":2.5}}]

can you help me? about npm run watch can't run this project

first:
npm install
then done:
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] watch: ./node_modules/gulp/bin/gulp.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! D:\Nodejs\node_cache_logs\2019-08-09T07_33_17_760Z-debug.log

please call me: [email protected]

Vector display/animations not showing

I'm having some trouble getting the demo to display properly. Below is the HTML file I'm using, which is copied from demo.html (only exception being I pointed to my javascript file).

HTML file:

<!-- https://github.com/danwild/leaflet-velocity -->

<!doctype html>
<html>
<head>
	<title>LeafletVelocity Demo</title>
	<meta charset="utf-8">
</head>
<body>

<div id="map"></div>

<!--vendor-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>

<!--leaflet-velocity-->
<link rel="stylesheet" href="../dist/leaflet-velocity.css" />
<script src="../dist/leaflet-velocity.js"></script>

<!--demo-->
<link rel="stylesheet" href="demo.css" />
<script type="text/javascript" src="../../../js/write_coords.js"></script>

</body>
</html>

Below is the javascript code I wrote to display the map and velocity. It is more or less copied from following Leaflet tutorials and the demo.js script. One thing that is different is that instead of loading an external file, I just "beautified" the source file and pasted into javascript. I'm brand new to javascript, so this could very well be where I'm making a mistakes.

JS file:

// Earth
var earth = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
    id: 'MapID',
    attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS,' +
                 'AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
});


// Collect base maps
var base_maps = {
    "Earth": earth
};

// Initialize the map
var map = L.map('map', {
    center: [-7.5, 156],
    zoom: 4,
    layers: [earth]
});

// Add control
var layer_control = L.control.layers(base_maps).addTo(map);


// Data
var data = [{
    header: {
        parameterUnit: "m.s-1",
        parameterNumber: 2,
        dx: 1.0,
        dy: 1.0,
        parameterNumberName: "Eastward current",
        la1: -7.5,
        la2: -28.5,
        parameterCategory: 2,
        lo2: 156,
        nx: 14,
        ny: 22,
        refTime: "2017-02-01 23:00:00",
        lo1: 143
    },
    data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.33000001311302185, 0.25, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.12999999523162842, -0.0, 0.6499999761581421, 0.44999998807907104, 0.5, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.03999999910593033, -0.1899999976158142, 0.4300000071525574, 0.23999999463558197, 0.44999998807907104, 0.23000000417232513, 0.4399999976158142, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1599999964237213, 0.0, -0.019999999552965164, -0.05000000074505806, 0.23000000417232513, 0.3700000047683716, 0.550000011920929, 0.2800000011920929, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.11999999731779099, -0.33000001311302185, 0.05999999865889549, 0.12999999523162842, 0.3199999928474426, 0.28999999165534973, 0.2800000011920929, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.20999999344348907, -0.30000001192092896, -0.8199999928474426, -0.27000001072883606, -0.019999999552965164, 0.23000000417232513, 0.20000000298023224, 0.10000000149011612, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.12999999523162842, -0.1899999976158142, -0.18000000715255737, -0.44999998807907104, 0.11999999731779099, -0.05000000074505806, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.20999999344348907, -0.1899999976158142, -0.27000001072883606, -0.6499999761581421, -0.3199999928474426, -0.3199999928474426, -0.07000000029802322, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.23999999463558197, -0.14000000059604645, -0.15000000596046448, -0.09000000357627869, -0.3799999952316284, -0.33000001311302185, -0.17000000178813934, -0.28999999165534973, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.03999999910593033, -0.17000000178813934, 0.07000000029802322, -0.27000001072883606, -0.10999999940395355, -0.1899999976158142, -0.019999999552965164, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.14000000059604645, -0.05999999865889549, -0.05000000074505806, -0.36000001430511475, -0.3700000047683716, -0.20000000298023224, -0.20999999344348907, -0.09000000357627869, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05000000074505806, -0.019999999552965164, 0.1599999964237213, 0.3100000023841858, -0.18000000715255737, -0.1599999964237213, -0.25999999046325684, -0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05999999865889549, -0.27000001072883606, -0.27000001072883606, 0.4099999964237213, 0.23999999463558197, -0.09000000357627869, 0.009999999776482582, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.20999999344348907, -0.3499999940395355, -0.23999999463558197, 0.009999999776482582, -0.14000000059604645, -0.18000000715255737, -0.1599999964237213, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.25, -0.23000000417232513, 0.17000000178813934, -0.17000000178813934, 0.09000000357627869, 0.1599999964237213, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.05000000074505806, -0.1899999976158142, 0.10999999940395355, -0.03999999910593033, -0.10999999940395355, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.009999999776482582, -0.009999999776482582, -0.23999999463558197, -0.33000001311302185, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.25999999046325684, -0.03999999910593033, 0.11999999731779099, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.11999999731779099, -0.17000000178813934, 0.25999999046325684, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.05000000074505806, -0.6100000143051147, -0.2199999988079071, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.5600000023841858, 0.3100000023841858, 0.36000001430511475]
}, {
    header: {
        parameterUnit: "m.s-1",
        parameterNumber: 3,
        dx: 1.0,
        dy: 1.0,
        parameterNumberName: "Northward current",
        la1: -7.5,
        la2: -28.5,
        parameterCategory: 2,
        lo2: 156,
        nx: 14,
        ny: 22,
        refTime: "2017-02-01 23:00:00",
        lo1: 143
    },
    data: [0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.1899999976158142, 0.28999999165534973, 0.019999999552965164, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.2800000011920929, 0.20999999344348907, 0.44999998807907104, 0.11999999731779099, -0.3100000023841858, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.18000000715255737, 0.36000001430511475, 0.20000000298023224, -0.20000000298023224, -0.25, -0.3100000023841858, 0.10000000149011612, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.15000000596046448, 0.38999998569488525, 0.14000000059604645, -0.1599999964237213, -0.28999999165534973, -0.1599999964237213, -0.1599999964237213, 0.10999999940395355, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.75, 0.23000000417232513, -0.07000000029802322, -0.3400000035762787, -0.18000000715255737, -0.3799999952316284, -0.3700000047683716, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.17000000178813934, 0.3400000035762787, -0.009999999776482582, -0.029999999329447746, -0.25999999046325684, -0.07000000029802322, -0.25999999046325684, -0.33000001311302185, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05999999865889549, 0.03999999910593033, 0.05000000074505806, -0.1599999964237213, -0.0, 0.009999999776482582, -0.2199999988079071, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.05000000074505806, -0.2199999988079071, -0.05999999865889549, -0.3799999952316284, -0.20000000298023224, -0.07000000029802322, 0.2199999988079071, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.019999999552965164, 0.2199999988079071, 0.05000000074505806, -0.10999999940395355, -0.25, -0.12999999523162842, 0.11999999731779099, 0.07000000029802322, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.07000000029802322, -0.05999999865889549, -0.1899999976158142, -0.41999998688697815, -0.10000000149011612, -0.12999999523162842, 0.009999999776482582, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.10000000149011612, -0.12999999523162842, 0.019999999552965164, -0.28999999165534973, -0.12999999523162842, 0.20000000298023224, 0.07999999821186066, -0.4399999976158142, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.11999999731779099, -0.7599999904632568, -0.49000000953674316, -0.550000011920929, -0.10000000149011612, 0.09000000357627869, 0.07000000029802322, -0.23999999463558197, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.47999998927116394, -0.5299999713897705, -0.550000011920929, -0.47999998927116394, -0.05000000074505806, 0.03999999910593033, -0.3700000047683716, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.5400000214576721, -0.019999999552965164, -0.3199999928474426, -0.18000000715255737, -0.09000000357627869, -0.1599999964237213, -0.3499999940395355, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.029999999329447746, 0.029999999329447746, -0.15000000596046448, -0.23000000417232513, -0.019999999552965164, -0.3799999952316284, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.1599999964237213, -0.18000000715255737, -0.05999999865889549, 0.5199999809265137, -0.07000000029802322, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.3100000023841858, -0.4699999988079071, 0.2800000011920929, -0.41999998688697815, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.5799999833106995, 0.019999999552965164, -0.4000000059604645, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.47999998927116394, -0.019999999552965164, -0.09000000357627869, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.7699999809265137, -0.019999999552965164, -0.05999999865889549, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -1.1699999570846558, 0.33000001311302185, -0.05000000074505806]
}]

// Overlay
var velocityLayer = L.velocityLayer({
    displayValues: true,
    displayOptions: {
        velocityType: 'GBR Wind',
        displayPosition: 'bottomleft',
        displayEmptyString: 'No wind data'
    },
    data: data,
    maxVelocity: 10
});

// Add
console.log(velocityLayer)
layer_control.addOverlay(velocityLayer,"GB Reef");

One thing I noticed is that when I drag my mouse over the data area, it does in fact display something relating to the data in the lower left part of the window. This makes me believe it's getting some data...however there is no velocity vector display. I'm not sure what I'm doing wrong. I download the files from here and only made the modifications above. Everything else is more or less the same.

draw wind

Why do I draw in the northern hemisphere the wind to plot in the southern hemisphere? The data is in the northern hemisphere the wind data .

wind.txt

Let Mousemove reflect selected units

Great plugin!

One thing, the "_onMouseMove" code hard-codes m/s as the speed indicator. Could we get that to reflect the speed units selected for the layer?

I tried to override the event handler, but my skills are weak. I could rewrite that part of the module, but that's bad practice...

ERROR TypeError: "this.animationBucket is undefined"

Sometimes I get the following error:
screen shot 2019-02-11 at 3 25 32 pm

But the component still works. I looked into the source and found the following:

    Windy.prototype.stop = function () {
        this.particules.splice(0, this.particules.length);
        this.animationBucket.clear();
        if (this.animationLoop) {
            clearTimeout(this.animationLoop);
            this.animationLoop = null;
        }
    };

I am not sure why this is happening but isn't it safe to check for null and then apply clear() method?

Does not support leaflet v0.7.7

I tried the code in demo.html but only changed leaflet path to use version v0.7.7. The following error appeared.

image

Can anyone help to solve? Leaflet v1.0.3 is too new to my system. Many of the plugins that I need fail to support this new version.

Thank you so much !!

Any guide or write up on understanding how the json data is read?

Hello first of all amazing work. Secondly I wish to know if there is guide to understand the json data which is created. I want to implement this for our own data and the output file has 2d wind grid. However data in json seems 1D.
I only need to know how to interpret the la1, la2 and other parameters so that I can implement same for our own website.

Thank you

Support other projected coordinate systems

I'd like to use polar coordinate systems such as EPSG:3413. This would likely require changes to functions within the "Windy " function to use Leaflet's projection/coordinate functions instead of assuming a Mercator projection.

Update function?

Hi Folks,

Does leaflet-velocity have an Update function?

For example, if I externally change the values of the optional parameters (minVelocity, maxVelocity, velocityScale, colorScale), is it possible to dynamically update the display using an update function? Or one has to completely reload?

Thanks for this useful API. Its a gift to the leaflet users.

Processing data for leaflet-velocity

This isn't a leaflet-velocity issue, but I thought I'd start here. I'm trying to add wind data to a leaflet map. I download the data using the following link,

https://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_1p00.pl?file=gfs.t12z.pgrb2.1p00.f000&lev_10_m_above_ground=on&var_UGRD=on&var_VGRD=on&subregion=&leftlon=-72.74273&rightlon=-67.92787&toplat=43.64460&bottomlat=40.04384&dir=%2Fgfs.20210312%2F12

Then I convert the grib file to json using the weacast-grib2json program,

grib2json -d -n -o gfs.t06z.pgrb2.1p00.f000 gfs.t06z.pgrb2.1p00.f000.json

Basically following the guidance found here and here.

However, when I display the wind data on my leaflet map,

mine

it looks different than what is displayed on windy or earth.

windy_tv

Not sure what is going on, as the reference datetimes are the same, but it has to be a data issue.

Attached the json and index.html file as a MWE.

mwe_wind_data.zip

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.