Intégrer la réponse d'une API dans une popup

Version imprimable

Bonsoir
J'ai besoin d'intégrer le résultat d'une requête API dans une popup de marker sur une map.
En fait j'ai besoin que quand je clique sur le market d'une carte, le popup s'ouvre en affichant les résultats de l'API.

Ci-contre la request API fonction du lieu (longiture / latitude)

Code:

<a href="http://api.weatherstack.com/current?access_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&query=' . $latitude . ',' . $longitude . '" target="_blank">Météo

Ci-dessous le code popup avec la ligne d'appel API ci-dessus

Code:

var oneMarker = L.marker([' . $latitude . ', ' . $longitude . '], {icon: ' . $icon_layer['icon'] . ' } , { title: "marker_' . get_the_ID() . '" } ).bindPopup("' . $code_terrain . ' - ' . $toponyme . ' (' . $departement . ')
Code:

1 2 3 4 5 6 <a href="' . $permalink . '" target="_blank" class="voir_infos"> Voir infos ' . $type_terrain . ' Piste ' . $orientation_piste_1 . ' ' . $nature_piste_1 . ' longueur ' . $longueur_piste_1 . ' m <a href="https://www.sia.aviation-civile.gouv.fr/dvd/eAIP_02_DEC_2021/Atlas-VAC/PDF_AIPparSSection/VAC/AD/AD-2.' . $code_terrain . '.pdf" target="_blank">Carte VAC / <a href="https://basulm.ffplum.fr/PDF/' . $code_terrain . '.pdf" target="_blank">Carte FFPLUM / <a href="http://api.weatherstack.com/current?access_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&query=' . $latitude . ',' . $longitude . '" target="_blank">Météo / <a href="https://www.google.com/maps/@' . $latitude . ',' . $longitude . ',1390m/data=!3m1!1e3" target="_blank">Zoom' . $url_webcam1 . '").addTo(' . $icon_layer['layer'] . ').on("click", onClick);'
Aujourd'hui, j'appelle l'API avec un bouton dans la popup (quand je clique sur le marqueur sur la carte, j'affiche la popup et dans la popup il y a un bouton "meteo"), et le resultat en cliquant sur meteo est ci-dessous et s'affiche dans une nouvelle page... intéressant mais d'un point de vu design c'est pas terrible...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 { "request": { "type": "LatLon", "query": "Lat 49.10 and Lon 0.57", "language": "en", "unit": "m" }, "location": { "name": "Bernay-De-L'eure", "country": "France", "region": "Haute-Normandie", "lat": "49.100", "lon": "0.600", "timezone_id": "Europe/Paris", "localtime": "2021-12-19 10:29", "localtime_epoch": 1639909740, "utc_offset": "1.0" }, "current": { "observation_time": "09:29 AM", "temperature": 5, "weather_code": 143, "weather_icons": ["https://assets.weatherstack.com/images/wsymbols01_png_64/wsymbol_0006_mist.png"], "weather_descriptions": ["Mist"], "wind_speed": 13, "wind_degree": 70, "wind_dir": "ENE", "pressure": 1033, "precip": 0, "humidity": 100, "cloudcover": 100, "feelslike": 2, "uv_index": 1, "visibility": 4, "is_day": "yes" } }
Je cherche à intégrer le resultat dans la popup.
C'est à dire que lorsque je clique sur le marqueur sur la carte le resultat s'affiche dans la popup sans avoir besoin de cliquer sur un bouton dans la popup...

Merci de votre aide
Bonne soirée

20/12/2021, 11h05
mathieu

regardez la documentation, il y a des exemples de récupération des informations avec php ou jquery :
https://weatherstack.com/documentation
22/12/2021, 22h06
falcon900

Merci, j'avais bien vu les éléments.
Par contre je ne vois pas comment appeler l'API à l'ouverture de la popup...

J'ai réussi à récupérer les datas d'une autre API gratuite avec le html ci-dessous, maintenant j'ai besoin d'afficher les data de retour de l'API dans une popup.
La popup est celle affichée en cliquant sur le marker d'une carte.

Un des soucis est que les latitude et longitude à injecter dans l'API (ex: lat=48.998483&lon=2.57) dépendent des coordonnées du marker, mes variables sont ' . $latitude . ',' . $longitude . '

Quelqu'un aurait quelques conseils à me donner ;-) svp ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<html lang="en">
<html>
<head>
	<title>API METEO</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<body>
 
<h2>
        <span id='temperature'>"temperature"</span> c°
</h2>
 
<h2>
	<span id='pressure'>"pressure"</span> hpa
</h2>
 
<h2>
	<span id='visibility'>"visibility"</span> km
</h2>
 
<h2>
	<span id='windspeed'>"windspeed"</span> km/h 
</h2>
 
<h2>
	<span id='winddire'>"winddire"</span> °
</h2>
 
<h2>
	<span id='clouds'>"clouds"</span> %
</h2>
 
<script>
        async function main(){
    const meteo = await fetch('https://api.openweathermap.org/data/2.5/weather?lat=48.998483&lon=2.57&units=metric&lang=fr&appid=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX')
    .then(response => response.json())
    .then(json => json)
    
        console.log(meteo);
 
        displayWeatherInfos(meteo)
}
 
        function displayWeatherInfos(data){
        const name = data.name;
        const temperature = data.main.temp;
        const pressure = data.main.pressure;
        const visibility = data.visibility;
        const windspeed = data.wind.speed;
        const winddire = data.wind.deg;
        const windgust = data.wind.gust;
        const clouds = data.clouds.all;
        
        document.querySelector('#temperature').textContent = Math.round(temperature);
        document.querySelector('#pressure').textContent = pressure;
        document.querySelector('#visibility').textContent = (visibility/1000);
        document.querySelector('#windspeed').textContent = Math.round(windspeed*3.6);
        document.querySelector('#winddire').textContent = winddire;
        document.querySelector('#clouds').textContent = clouds;
}
 
main();
 
</script>
 
</body>
</html>

02/01/2022, 17h16
mathieu

est ce que vous avez beaucoup de points sur votre carte ?
suivant la quantité, il peut être intéressant de récupérer les données de openweathermap.org en php pour les mettre en cache et ainsi les afficher plus rapidement.
02/01/2022, 18h09
falcon900

Citation:

Envoyé par mathieu

est ce que vous avez beaucoup de points sur votre carte ?
suivant la quantité, il peut être intéressant de récupérer les données de openweathermap.org en php pour les mettre en cache et ainsi les afficher plus rapidement.

J'ai une carte avec 1200 points pour le moment.
Je ne vois pas comment lancer le script à l'ouverture de la popup....
03/01/2022, 18h52
NoSmoking

Bonjour,

Citation:

J'ai une carte avec 1200 points pour le moment.

certes mais combien de point sont lus à chaque appel ?

Citation:

Je ne vois pas comment lancer le script à l'ouverture de la popup....

ben justement au lancement de l'ouverture !
Comment lances-tu cette ouverture ?

Remarque :
lorsque l'on utilise jQuery on n'utilise pas document.querySelector('...') ou inversement ;)
03/01/2022, 22h16
falcon900

Citation:

Envoyé par NoSmoking

certes mais combien de point sont lus à chaque appel ?

Il y a un point lu par appel

Citation:

Envoyé par NoSmoking

ben justement au lancement de l'ouverture !
Comment lances-tu cette ouverture ?

var oneMarker = L.marker([' . $latitude . ', ' . $longitude . '], {icon: ' . $icon_layer['icon'] . ' } , { title: "marker_' . get_the_ID() . '" } ).bindPopup("' . $code_terrain . ' - ' . $toponyme . ' (' . $departement . ') - ' . $altitude . ' <a href=\"' . $permalink . '\" target=\"_blank\" class=\"voir_infos\"> Voir infos</a> ").addTo(' . $icon_layer['layer'] . ').on("click", onClick);

:oops: je n'avais pas prêté attention à ton code d'appel !

Lors de la création de tes maqueurs il te faut associer une popup avec bindPopup comme tu l'as fait.
Il faut de plus associer une fonction sur l'événement au click, cela pourrait donner :
Code:

1 2 3 4 5 // création marker L.marker([data.lat, data.lng]) .addTo(oMap) .bindPopup("Chargement en cours...") .on("click", getInfos);
Le texte mis dans la popup est un texte d'attente, il sera modifier par la suite.

C'est dans la fonction getInfos qu'il te faut faire l'appel à ton API, elle pourrait ressembler à ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 /** * function asynchrone de récupération des données * @param {object} event - contient les données du marker cliqué */ function getInfos(event) { const marker = event.target; const pos = event.latlng; const URL = "https://geo.api.gouv.fr/communes?lat=" + pos.lat + "&lon=" + pos.lng + "&fields=codeDepartement,nom,surface,population,centre"; fetch(URL) .then(response => response.json()) .then(datas => { // récup. la popup et modifie le contenu marker .getPopup() .setContent(getTemplate(datas[0])) }); }
L'URL est à remplacer par celle de ton API bien sûr, mais le principe reste le même.

Au retour de la requête on récupère la popup associée au marqueur, méthode getPopup(), et on lui affecte le HTML qui va bien, méthode setContent.

Dans l'exemple que j'ai mis le contenu HTML est formaté, via la fonction getTemplate, avec les données qui vont bien.

Exemple de fonction de formatage :
Code:

1 2 3 4 5 6 7 8 /** * function de mise forme réponse suivant template défini * @param {object} infos - les infos à afficher * @return {String} HTML formaté suivant le template */ function getTemplate(infos) { return L.Util.template("<h1>{nom}</h1>Surface : {surface} m\u00B2 Population : {population}<hr>Département : {codeDepartement}", infos); }
Là tu fais ce que tu veux pourvu que tu obtiennes le résultat que tu souhaites ;)

• Pour voir l'ensemble en action :

↪ Affichage infos dans popup

Remarque :

La cerise sur le gâteau serait de mettre en cache les résultats déjà requêtés avec par exemple session/localStorage.