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

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

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager