IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

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


Sujet :

Bibliothèques & Frameworks

  1. #1
    Candidat au Club
    Homme Profil pro
    Chef de projet MOA
    Inscrit en
    février 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet MOA
    Secteur : Transports

    Informations forums :
    Inscription : février 2019
    Messages : 7
    Points : 3
    Points
    3
    Par défaut Intégrer la réponse d'une API dans une popup
    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

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    regardez la documentation, il y a des exemples de récupération des informations avec php ou jquery :
    https://weatherstack.com/documentation

  3. #3
    Candidat au Club
    Homme Profil pro
    Chef de projet MOA
    Inscrit en
    février 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet MOA
    Secteur : Transports

    Informations forums :
    Inscription : février 2019
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Merci, j'avais bien vu les éléments.
    Par contre je ne vois pas comment appeler l'API à l'ouverture de la popup...

  4. #4
    Candidat au Club
    Homme Profil pro
    Chef de projet MOA
    Inscrit en
    février 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet MOA
    Secteur : Transports

    Informations forums :
    Inscription : février 2019
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    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></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>

  5. #5
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 644
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 644
    Points : 14 672
    Points
    14 672
    Par défaut
    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.

  6. #6
    Candidat au Club
    Homme Profil pro
    Chef de projet MOA
    Inscrit en
    février 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet MOA
    Secteur : Transports

    Informations forums :
    Inscription : février 2019
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Citation Envoyé par mathieu Voir le message
    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....

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 340
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 340
    Points : 41 987
    Points
    41 987
    Par défaut
    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

  8. #8
    Candidat au Club
    Homme Profil pro
    Chef de projet MOA
    Inscrit en
    février 2019
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Chef de projet MOA
    Secteur : Transports

    Informations forums :
    Inscription : février 2019
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    certes mais combien de point sont lus à chaque appel ?
    Il y a un point lu par appel

    Citation Envoyé par NoSmoking Voir le message
    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("<b>' . $code_terrain . '</b><b> - </b><b>' . $toponyme . '</b><b> (</b><b>' . $departement . '</b><b>)</b><b> - </b><b>' . $altitude . '</b><br><a href=\"' . $permalink . '\" target=\"_blank\" class=\"voir_infos\"> Voir infos</a><br>").addTo(' . $icon_layer['layer'] . ').on("click", onClick);

  9. #9
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    16 340
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 16 340
    Points : 41 987
    Points
    41 987
    Par défaut
    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);
    }
    Là tu fais ce que tu veux pourvu que tu obtiennes le résultat que tu souhaites

    Pour voir l'ensemble en action :

    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.

Discussions similaires

  1. Récupérer la réponse d'une popup
    Par Eddoul dans le forum Langage
    Réponses: 2
    Dernier message: 06/04/2017, 00h01
  2. Réponses: 0
    Dernier message: 25/05/2011, 17h53
  3. Réponses: 12
    Dernier message: 02/12/2010, 10h22
  4. Problème avec l'ajout d'une API dans Eclipse
    Par patachnouk dans le forum Eclipse
    Réponses: 6
    Dernier message: 18/08/2006, 17h49
  5. [eclipse][API] dans quel répertire installer une API ?
    Par Penelope333 dans le forum Eclipse Java
    Réponses: 1
    Dernier message: 26/01/2006, 18h09

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo