I'm a leaflet noob. I have some weather data and I'd like to display it using a leaflet map, but I'm having difficulty convincing myself that what I want to do is possible. Specifically I want to pare observed wind speed and direction with the predicted wind speed and direction. A usual way to visualize wind speed and direction is with a Wind Barb.

So there's two issues I see:
1. I need to be able draw the barb, and
2. I need to be able to rotate it to point in the correct cardinal direction.

For 1 I figure I could pre-draw some barbs for wind speeds from 5 up to say 50 every 5 units.

For 2 I would have to rotate that marker based on where it was located to point in the correct cardinal direction. This is where I get confused. Can anybody explain to me how this would be done? Is it projection dependant?

I don't suppose there's a leaflet plug-in out there that would take care of all this for me. I haven't been able to find anything thus far.

I'm a leaflet noob. I have some weather data and I'd like to display it using a leaflet map, but I'm having difficulty convincing myself that what I want to do is possible. Specifically I want to pare observed wind speed and direction with the predicted wind speed and direction. A usual way to visualize wind speed and direction is with a Wind Barb.

So there's two issues I see:
1. I need to be able draw the barb, and
2. I need to be able to rotate it to point in the correct cardinal direction.

For 1 I figure I could pre-draw some barbs for wind speeds from 5 up to say 50 every 5 units.

For 2 I would have to rotate that marker based on where it was located to point in the correct cardinal direction. This is where I get confused. Can anybody explain to me how this would be done? Is it projection dependant?

I don't suppose there's a leaflet plug-in out there that would take care of all this for me. I haven't been able to find anything thus far.

• javascript
• leaflet
• weather

3 Answers 3

I've been working on something similar. I found a pretty good looking and intuitive method being used to represent vector information. Have a look at the following examples:

http://earth.nullschool/

http://hint.fm/wind/

http://air.nullschool/

http://googlemapsmania.blogspot./2014/07/the-growth-of-slippy-wind-map.html

In my case, I still need to find a suitable format for the wind/ocean data I want to plot on my Leaflet map. It's certainly not a quick fix, but man, it looks great!

Maybe this can help you too. I hope to be able to post a working solution soon.

Hopefully someone can elaborate on my answer to help you achieve your goal. I suggest looking into Open Weather Map API.
The best idea I can think of for how the flow would be is:
1.Make a call to OWM passing in the lat/long of the point clicked on the map.
2.Capture the wind speed and direction of the JSON object that is returned from OWM.
3. Determine which wind barb marker to use based on the wind speed and direction. Add it to the map.

If all else fails, OWM does have a 'wind' tilelayer you can use to show wind data. Good luck.

I know this is an old question, but this might still be useful for someone. I had the same general problem: I wanted to display wind speeds and directions using the standard wind barbs. I found no useful plugin for Leaflet so I created my own.

The plugin takes input data in form of speed in knots (nautical miles (1.852 km) per hour) and direction in degrees. It then generates the wind barbs and outputs an icon. This icon can easily be added to a Leaflet marker.

You can download it here: https://github./JoranBeaufort/Leaflet.windbarb And you can see a live example here: http://www.geonet.ch/leaflet-windbarb/

I hope this helps you or someone with similar needs. Cheers