Ajout de fonctions pour carte interactive

Version imprimable

Bonjour !

Je souhaite rajouter des fonctions pour ma carte interactive, par exemple je veux rajouter une fonction qui lors du clic sur un marqueur permets d'afficher certains éléments voici mon code :

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
 
let xhr = new XMLHttpRequest();
 
xhr.open('GET', 'https://api.jcdecaux.com/vls/v1/stations?contract=Toulouse&apiKey=ddaf955496241ed6e6f7aa8e998b982be31b0064');
 
xhr.addEventListener('load', function() {
 
    if (xhr.status >= 200 && xhr.status < 400) {
        ma_callback(xhr.responseText);
 
    } else {
        ma_callback(xhr.status);
    }
});
 
xhr.addEventListener('error', function() {
 
    console.log("erreur de connexion");
 
});
 
xhr.send(null);
 
function ma_callback(response) {
  response = JSON.parse(response);
  response.forEach(function (info) {
    L.marker([info.position.lat, info.position.lng]).on('click', onMarkerClick).addTo(mymap).bindPopup(info.name);
  });
};
 
function onMarkerClick(e) {
        let address = document.getElementById("adresse-station");
        let bikeStands = document.getElementById("place-libre");
        let availableBikes = document.getElementById("velo-dispo");
        let statusStation = document.getElementById("etat-station");
        ma_callback (function (infos) {
            infos.forEach(function (info) {
                if ((e.latlng.lat === info.position.lat) && (e.latlng.lng === info.position.lng)) {
                    address.innerText = info.address;
                    bikeStands.innerText = info.bike_stands;
                    availableBikes.innerText = info.available_bikes;
                    statusStation.innerText = info.status
                    return;
                }
            });
        });
    }

Au vue du résultat je me suis tromper, les marqueurs apparaissent mais pas les infos, je pense que je n'arrive pas à appeler ma requête ajax afin de récupérer les informations et les affichés...

Ne serais t'il pas plus simple de mettre ma requête ajax au sein du fonction ?? (question bête peut être ) merci d'avance. J'avoue avoir pas mal de mal avec JavaScript même après plusieurs tutos et cours :calim2:

Bonjour,

Citation:

je veux rajouter une fonction qui lors du clic sur un marqueur permets d'afficher certains éléments voici mon code

c'est ce que tu fais lorsque tu écris .bindPopup( info.name), au clic sur le marqueur une info bulle apparaît avec le info.name dedans.

Donc inutile de rajouter un événement clic sur le marqueur.
Code:

1 2 3 4 5 6 7 8 9 function ma_callback(response) { response = JSON.parse(response); response.forEach(function(info) { L.marker([info.position.lat, info.position.lng]) // .on('click', onMarkerClick) /* inutile */ .addTo(mymap) .bindPopup(info.name); }); };
Ce que tu peux faire c'est « étoffer » le contenu de l'info bulle
Code:

1 2 3 4 5 6 7 8 9 function ma_callback(response) { response = JSON.parse(response); response.forEach(function(info) { L.marker([info.position.lat, info.position.lng]) // .on('click', onMarkerClick) /* inutile */ .addTo(mymap) .bindPopup( "" +info.name +" " + info.address +" " +info.available_bikes +" vélos disponinbles"); }); };
Ressources :

Leaflet API reference
UI Layers Popup

26/02/2019, 19h22
Hoobux

Citation:

Envoyé par NoSmoking

Ce que tu peux faire c'est « étoffer » le contenu de l'info bulle

En effet très bonne idée, elle mais passer par la tête.

Cependant, je souhaite vraiment que les informations que je souhaite récupérés tel que l'adresse, le nombres de vélos etc apparaissent à un certains endroit de mon fichier HTML lors du clic sur un marqueur d'ou le

Code:

.on('click', onMarkerClick)

.

J'aimerais également réorganiser la gestion de ma carte en objet, mais je ne sais pas si cela est possible avec Leaflet.

Citation:

je souhaite vraiment que les informations que je souhaite récupérés (...) apparaissent à un certains endroit de mon fichier HTML

dans ce cas effectivement il te faut utiliser l'événement onclick.
Il existe plusieurs solutions pour faire cela en voici une, à la création du marqueur tu places les informations recueillies dans les options de celui ci, ce qui te permet de les avoirs à disposition lors du déclenchement du clic.
Cela se traduit par :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function fctCallback(response) { response = JSON.parse(response); response.forEach(function(info) { L.marker( [info.position.lat, info.position.lng], { "title": info.name, // pas obligatoire "jcdecauxInfo": info} // on stocke ici toutes les infos ) .on('click', onMarkerClick) // fonction d'appel sur click .addTo(oMap); }); };
Dans la fonction onMarkerClick il suffit de réupérer le marqueur déclencheur pour avoir à disposition les informations, le reste est de la mise en forme
Code:

1 2 3 4 5 6 7 8 9 10 function onMarkerClick(arg) { // récup. du marker concerné var marker = arg.target; // récup. des infos var info = marker.options.jcdecauxInfo; // formatage de la sortie, exemple var html = "" + info.name + " " + info.address + " " + info.available_bikes + " vélos disponibles"; // affichage de la sortie document.getElementById("info").innerHTML = html; }
il te faut bien sur un élément défini avec id="info" dans ton code HTML.

Tu me sauve NoSmoking merci beaucoup. :D

Voici mon code après ton passage :

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
 
function callback(response) {
  response = JSON.parse(response);
  response.forEach(function (info) {
    L.marker(
        [info.position.lat, info.position.lng],
        {            
          "jcdecauxInfo": info}           // on stocke ici toutes les infos
      )
      .on('click', onMarkerClick)         // fonction d'appel sur click
      .addTo(mymap)
      .bindPopup(info.name);
  });
};
 
 
function onMarkerClick(arg) {
  // Récupération du marker concerné
    let marker = arg.target;
  // Récupération des infos
    let info = marker.options.jcdecauxInfo;
    let address = info.address;
    let bikeStands = info.bike_stands;
    let availableBikes = info.available_bikes;
    let statusStation = info.status;
  // Affichage du rendu
  document.getElementById("info-station").style.display = "block";// Apparition du bloc contenant les infos de la station sélectionnée
  document.getElementById("adresse-station").innerText = address;
  document.getElementById("place-libre").innerHTML = bikeStands;
  document.getElementById("velo-dispo").innerHTML = availableBikes;
  document.getElementById("etat-station").innerHTML = statusStation;
}

En revanche pourrez tu m'expliquer ce que sont :

Code:

"jcdecauxInfo": info}

Code:

let info = marker.options.jcdecauxInfo;

Car j'ai un peu de mal à me les expliqués. Et enfin, est il possible de réorganiser la gestion de ma carte en objet ? Je ne sais pas si cela est possible avec Leaflet.

Citation:

En revanche pourrez tu m'expliquer ce que sont :

lorsque tu crées un marker via un L.marker(<LatLng> latlng, <Marker options> options?), celui-ci hérite d'options par défaut définis dans la bibliothèque Leaflet

Une fois crée par défaut les options du marker ressemblent à
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 marker.options = { "icon": { "options": { "className": "", "iconSize": [ 25, 41 ], "iconAnchor": [ 12, 41 ], "popupAnchor": [ 1, -34 ], "shadowSize": [ 41, 41 ] }, "_initHooksCalled": true }, "title": "", "alt": "", "clickable": true, "draggable": false, "keyboard": true, "zIndexOffset": 0, "opacity": 1, "riseOnHover": false, "riseOffset": 250 }
en écrivant
Code:

1 2 3 4 5 L.marker( [info.position.lat, info.position.lng], { "jcdecauxInfo": info} // on stocke ici toutes les infos );
on ajoute simplement une option au marker qui a pour propriété jcdecauxInfo et comme valeur info.

Par la suite, pour récupérer les infos il suffit de pointer sur marker.options.jcdecauxInfo.

Citation:

Et enfin, est il possible de réorganiser la gestion de ma carte en objet ? Je ne sais pas si cela est possible avec Leaflet.

J'ai du mal à comprendre ce que tu souhaites faire attendu que ta carte est déjà un objet Leaflet!

Citation:

Envoyé par NoSmoking

lorsque tu crées un marker via un L.marker(<LatLng> latlng, <Marker options> options?), celui-ci hérite d'options par défaut définis dans la bibliothèque Leaflet

on ajoute simplement une option au marker qui a pour propriété jcdecauxInfo et comme valeur info.

Par la suite, pour récupérer les infos il suffit de pointer sur marker.options.jcdecauxInfo.

Merci pour les explications ;)

Enfaîte je doit m’entraîner à coder en faisant en sorte que le code JavaScript est développé orienté objet.

Par exemple pour ce code j'ai créer un objet "carte" qui reprend tout ce qui est lié à ma carte. Mais cela ne fonctionne pas j'ai du rater une étape, me tromper dans quelque chose :calim2:

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
 
let carte = {
    lat: 43.6044,
    lng: 1.4442,
    zoom: 13,
    mapContainer: 'mapid',
    mymap: '',
    displayMap: '',
    addTo: '',
    idMap: 'mapbox.streets',
    accessToken: 'pk.eyJ1IjoidGhyb3VkIiwiYSIxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    layer: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',
 
    init() {
      this.mymap = L.map(this.mapContainer, {center: [this.lat, this.lng], zoom: this.zoom});
    },
 
    display() {
      this.displayMap = L.tileLayer(this.layer, {id: this.idMap, accessToken: this.accessToken})
    },
 
    ajout() {
      this.addTo = addTo(this.mymap)
    },
 
    callback : function(response) {
      response = JSON.parse(response);
      response.forEach(function (info) {
      L.marker(
          [info.position.lat, info.position.lng],
          {            
            "jcdecauxInfo": info}// On ajoute une option au marker qui a pour propriété jcdecauxInfo et comme valeur info
        )
        .on('click', onMarkerClick)// Fonction d'appel lors du click
        .addTo(mymap)
        .bindPopup(info.name);
      });
    },
 
    onMarkerClick : function(arg) {
  // Récupération du marker concerné
      let marker = arg.target;
  // Récupération des infos
      let info = marker.options.jcdecauxInfo;
      let address = info.address;
      let bikeStands = info.bike_stands;
      let availableBikes = info.available_bikes;
      let statusStation = info.status;
  // Affichage du rendu avec la méthode "document.getElementById" qui permet le renvoi d'un élément
      document.getElementById("info-station").style.display = "block";// Apparition du bloc contenant les infos de la station sélectionnée
      document.getElementById("adresse-station").innerText = address;
      document.getElementById("place-libre").innerText = bikeStands;
      document.getElementById("velo-dispo").innerText = availableBikes;
      document.getElementById("etat-station").innerText = statusStation;
    } 
};

28/02/2019, 15h42
NoSmoking

Je te répond même si il eut mieux valu ouvrir une autre discussion concernant la transformation du code en objet !

Quand on défini des méthodes il faut les utiliser.
A quel moment appelles tu carte.init().
Tu n'enchaines pas les actions donc il ne se passera rien.

Perso dans le cas présent je ne vois pas trop l'intérêt d'une telle écriture, à la limite la création d'un « namespace ».
• Voir : Espaces de noms (ou namespace) en JavaScript.
28/02/2019, 16h30
Hoobux

Dans ce cas je vais ouvrir une nouvelle discussion, car le problème est que je ne comprends pas comment appeler une méthode, je crois que je confond un peu tout avec les méthodes et fonctions.

Merci à toi.