Discussion :

[Hoobux]

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 :

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

[NoSmoking]

Bonjour,

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 :

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

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 :

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

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( "<b>" +info.name +"</b><br>" + info.address +"<br>" +info.available_bikes +" vélos disponinbles");
  });
};

Ressources :

• Leaflet API reference
• UI Layers Popup

[Hoobux]

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 :

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

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

[NoSmoking]

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 :

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

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 :

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

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 = "<b>" + info.name + "</b><br>" + info.address + "<br>" + 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.

[Hoobux]

Tu me sauve NoSmoking merci beaucoup.

Voici mon code après ton passage :

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

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

"jcdecauxInfo": info}

et

Code :

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

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.

[NoSmoking]

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 :

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

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

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.

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!