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

**falcon900** · 19/12/2021, 19h22

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**mathieu** · 20/12/2021, 10h05

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

**falcon900** · 22/12/2021, 21h06

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

**falcon900** · 02/01/2022, 15h09

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mathieu** · 02/01/2022, 16h16

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.

**falcon900** · 02/01/2022, 17h09

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....

**NoSmoking** · 03/01/2022, 17h52

Bonjour,

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

certes mais combien de point sont lus à chaque appel ?

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

**falcon900** · 03/01/2022, 21h16

Envoyé par NoSmoking

certes mais combien de point sont lus à chaque appel ?

Il y a un point lu par appel

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);

**NoSmoking** · 04/01/2022, 16h53

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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><p>Surface : {surface} m\u00B2<br>Population : {population}<hr>Département : {codeDepartement}", infos);
}