Leaflet.js – Calling OpenWeatherMap API in Leaflet.js Map

leafletopenweathermap-api

How to get weather data from OpenWeatherMap API in a popup by clicking any location on the map?

i am still new at calling APIs in my map, API return JSON files but i don't know how to call the API in my map and how to bind JSON file in an HTML element.

This is the API which uses coordinates to return weather data in a JSON file: api.openweathermap.org/data/2.5/weather?lat=35&lon=139

but i need to replace these lat and lng parameters by clicking any location on the map.

Best Answer

You should be able to do something like this

var mymap = L.map('maptest').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OSM contributors'
}).addTo(mymap)

var popup = L.popup()

function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("Fetching weather info")
        .openOn(mymap);

    fetch('https://api.openweathermap.org/data/2.5/weather?lat=' + e.latlng.lat + '&lon=' + e.latlng.lng + '&appid=' + yourApiKey)
        .then(r => r.json()) 
        .then(data => { 
            // Change this line to show exactly the info you need
            popup.setContent(data.weather.map(w => w.description).join(", "))
        })
}

mymap.on('click', onMapClick)

The example is using the fetch api to call the openweathermap api and fetch is only supported in modern browsers. If you need to support older browsers you need to use a polyfill (https://github.com/github/fetch)

Edit: As mentioned by @Spacedman in the comments, the above solution should only be used on private networks. If you use the above code on public available networks, you expose your apikey for openweathermap so that anyone can use it to request the service.

Related Solutions

[GIS] How to protect the loaded json file name and location using html5 and javascript

Remember that JavaScript runs on the client's machine, under their control. They are allowed to set breakpoints and inspect variables at run time on their own machine. You can minify and obfuscate JavaScript, but Chrome DevTools has a one-click pretty-format button to partially undo the minification enough to make breakpoints work effectively.

Long story short, if you give the raw data to the client machine, then you've given away the raw data, and you've done so using the client's own network infrastructure.

One alternative is you can "bake" the data into rasterized symbols embedded in the imagery on the server. For example I recently saw a CartoDB Cesium demo where the points of interest were burned into the imagery layers, so the client does not handle the raw lat/lon data directly. Getting back the raw points requires much more effort, sifting through high-res image tiles and some sort of image recognition, so this might be a way to keep the exact numeric values more confidential.

[GIS] Submit form information from a leaflet popup to MySQL table

Several things seem to be wrong in your code.

When you have forms inside a Leaflet popup, you want to avoid form submission in the classic way. You typically need to submit using some AJAX behind the scenes that prevent reloading your page. In order to do this, you need to prevent the default behavior for form submission. This question discusses how to achieve this. In your case, it should be sufficient to add some code like:
```
$('#form').submit(function(e){
    e.preventDefault();
});
```
after the popup creation with the form, after your code
```
var popup = L.popup({maxWidth: 1000})
...
SKIPPED, INCLUDING YOUR FORM
...
.openOn(map);
```
This makes sure your form is not going to be submitted.
You need to write the code for submitting the form manually. You can add this code after the e.preventDefault(); line in the code above or define your function addMarker handling the form submission. Write this function in the global scope, e.g. before your $(document).ready(function (){

The form submission can be handled e.g. using jQuery's post or ajax function. This answer shows well how to do this part. The URL (action URL) would be your PHP script.
You need to handle the PHP part, i.e. accessing the submitted values and inserting them in the database. The name attribute of your form controls must match the $_POST keys in your PHP file. I think you did assume that the id attribute is defining the $_POST keys. Very often, this means the name attribute has the same value as the id attribute.

For instance, your line
```
<select class="form-control" id="arrest" name="text">
```
should be
```
<select class="form-control" id="arrest" name="arrest">
```
in order to be able to retrieve its value in PHP using
```
$_POST['arrest']
```
In case your code should not only be for developing purpose, please be aware of SQL injection issues and fix your code before production. Check out e.g. this and this to start.
You would need to do the necessary action in the Leaflet popup manually, such as closing it, or displaying the submitted values. You would do this typically in the success function you provide in the jQuery ajax or post function when submitting the form.

Best Answer

Related Solutions

[GIS] How to protect the loaded json file name and location using html5 and javascript

[GIS] Submit form information from a leaflet popup to MySQL table

Related Question