As you already know, I wrote a JavaScript library (leaflet-openweathermap) to use OpenWeatherMap’s data in your own Leaflet based maps. And I already made an example map using this library (see here). But what else beside the default behaviour can one achieve for a selfmade map using this library? Let’s see …
I’d like to have a look at the wind direction and wind speed. Switching on the “city” layer and clicking on every city marker to see the direction and speed in the popup isn’t satisfying. Yes, I can see all the the numbers but I get no overview of a bigger area.
Fortunately leaflet-openweathermap offers the feature to use your own code to create markers for current weather items.
First I made a dummy method providing a simple marker and added it to the layer as an option. That’s just to be sure that setting my own marker method works:
function myMarker(data) {
return L.marker([data.coord.lat, data.coord.lon]);
}
var weather = L.OWM.current({markerFunction: myMarker});
// don't forget to add this weather layer to your map
Instead of the default cities marker I get standard markers. Everything works as desired.
Now I changed my marker method to read wind speed and wind direction from the given data object. Drawing an arrow, rotating it according to wind direction and changing color depending on wind speed was just a matter of programming experience.
And here is the result: open the map or have a look at the screenshot of a stormy day at the German and Danish coastline.
OpenStreetMap
