Openweather icon on Leafletjs?

[Luca Moiana]

As somebody succeeded including openweather n leafltejs?

I developed this map:

http://lucamoiana.github.io/stresa/

And I was wondering how to include in leaflet-control-container the current weather or forecast.

how would you do?

tahnks

[Rowan Winsemius]

Hi Luca,

Perhaps have a look at this plugin

https://github.com/buche/leaflet-openweathermap

Depending on what exactly you're trying to achieve this should do the job

Cheers

Rowan

---

This message is intended for the addressee named and may contain confidential information. If you are not the intended recipient, please delete it and notify the sender. Views expressed in this message are those of the individual sender, and are not necessarily the views of their organisation.

[Luca Moiana]

Hi Rowan,

thank you for your answer.

I read the plugin page and it does almost what I need...

In fact, I'd like to have the current forecast under the map title, in the info div.

I suppose I have to use:

function myOwmMarker(data) {
    // just a Leaflet default marker
    return L.marker([data.coord.lat, data.coord.lon]);
}

But how??

Have a great day

[Rowan Winsemius]

So do you only want to show the weather for a single location and it doesnt actually need to be located on the map, if that's the case it might be easier just to use the open weather api to return the data for a single location

http://openweathermap.org/current

Using jquery its quite easy to use the json response response from the api, see this tutorial

https://www.inkling.com/read/dummies-html-xhtml-css-all-one-andy-harris-2nd/chapter-7-6/working-with-json-data

or there is this jquery plugin

http://json2html.com/

Hope that helps

[Luca Moiana]

It looks like a lot of work to do for a nOOb, but thank you for poinitng me in the right direction

[Luca Moiana]

So, it looks like the easiest way would be to use By geographic coordinates in HTML and include it on the

info.update = function (props) {
    this._div.innerHTML = '<h4><span style="text-align:center"><h2>Stresa Night Trail - 2014</h2><h3>Lago Maggiore Trail &#169</h3></span></h4>';
};

but I can’t get it to work nor pasting the link (http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&mode=html) in a plain <div> nor using <iframe>.

Any help??

thanks for your help

[Rowan Winsemius]

Hi Luca,

Not sure why an iframe wouldn't work... Anyway here's the json way of doing it, it will require you to load jquery.

Add the following to your info.update function where you want the weather info to appear.

<div id="placeholder"></div>

Then add the following into your leaflet script, just update the lat lon accordingly

  $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139', function(data) {
     
      $('#placeholder').html("<p>Description="+data.weather[0].main+" <br>Country="+data.sys.country+"<br> Max temp="+data.main.temp_max+"</p>");

        });

You'll see that the code above accesses the various bits contained with the json response, eg 'data.sys.country' accesses the country which sits under sys . The one tricky bit is accessing the weather attributes where you have to add the [0] because there is potentially an array going on

Anyway I hope that helps, sorry it's not a simple answer

Goodluck
Rowan

[Luca Moiana]

Thank you for your great help!

[Luca Moiana]

Sorry for bother but, looking around I found this 

https://github.com/michael-lynch/open-weather

that can also be handy.

thanks again