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!

[Hoobux]

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

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

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

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