Discussion :

[Ariane99i]

Bonjour,

Je précise que je suis plutôt débutante.
Dans le cadre de la création d'une carte interactive avec Leaflet, je souhaite créer des marker cluster Groups, mais la plupart des tutos ou exemples que je trouve passent par GeoJson, cependant, moi, j'ai juste mes points GPS avec description sans être passée par GeoJson, et je compte juste ajouter ce qu'il faut pour en faire des clusters car j'en ai beaucoup géographiquement proches.

J'ai ajouté la bibliothèque nécessaire, mais c'est après, dans le code, où je ne vois pas trop ce qu'il faut ajuster.

En gros ma liste de points GPS se présente comme ça :

Code :

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

1
2
3
4
5
6
var markersData : {
          "Catégorie 1": [
          {lat: xxxxx, lng: xxxxxx, name: "xxxxxxxxx", description: "xxxxxxxxxxxxxxxxxx", image: ["xxxxx"]},
          {lat: xxxxx, lng: xxxxxx, name: "xxxxxxxxx", description: "xxxxxxxxxxxxxxxxxx", image: ["xxxxx"]},
           etc
           ]

Ensuite, mon code est le suivant :

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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
// Créer des couches pour chaque catégorie de marqueurs
    var layers = {};
    for (var category in markersData) {
      layers[category] = L.layerGroup();
    }
    // Ajouter des marqueurs à partir de données pour chaque catégorie
    for (var category in markersData) {
      markersData[category].forEach(function(data) {
        var marker = L.marker([data.lat, data.lng], {icon: customIcon});
        var popupContent = `
          <div class="popup-title">${data.name}</div>
          <div class="popup-description">
            <strong>Valorisation:</strong> ${data.valorisation}<br>
            <strong>Partenaires:</strong> ${data.partenaires.join(", ")}
          </div>
          `;
        var imageHTML = data.image ? `<img class='popup-image' src='images/${data.image}' alt='Image'>` : ''; // Vérifie si une image est spécifiée dans les données
        popupContent += `<div class='popup-content'>${imageHTML}</div>`; // Ajoute le code HTML de l'image à popupContent
                marker.bindPopup(popupContent);
        layers[category].addLayer(marker); // Ajouter le marqueur à la couche correspondante
      });
    }
    // Ajouter les couches au contrôle des couches
    L.control.layers(null, layers).addTo(map);
    // Activer toutes les couches par défaut
    for (var category in layers) {
    layers[category].addTo(map);
    }
    // Mettre à jour la légende lorsque les couches sont activées/désactivées
    map.on('overlayadd overlayremove', function(eventLayer) {
      var legend = document.getElementById('legend');
      legend.innerHTML = ''; // Effacer le contenu de la légende
      for (var category in layers) {
        var layer = layers[category];
        if (map.hasLayer(layer)) {
          var item = document.createElement('div');
          item.className = 'legend-item';
          var marker = document.createElement('span');
          marker.style.backgroundColor = layer.options.color;
          item.appendChild(marker);
          item.appendChild(document.createTextNode(category));
          legend.appendChild(item);
        }
      }
    });
    // Initialiser la légende
    var legend = document.getElementById('legend');
    for (var category in layers) {
      var layer = layers[category];
      var item = document.createElement('div');
      item.className = 'legend-item';
      var marker = document.createElement('span');
      marker.style.backgroundColor = layer.options.color;
      item.appendChild(marker);
      item.appendChild(document.createTextNode(category));
      legend.appendChild(item);
    }
    // Gérer le clic sur le lien pour dérouler la pop-up
    marker.on('popupopen', function(e) {
        var popup = e.popup;
        var content = popup.getContent();
        var popupToggle = content.querySelector('.popup-toggle');
        var popupContent = content.querySelector('.popup-content');
        popupToggle.addEventListener('click', function() {
          if (popupContent.style.maxHeight === '200px') {
            popupContent.style.maxHeight = 'none';
            popupToggle.innerHTML = '-';
          } else {
            popupContent.style.maxHeight = '200px';
            popupToggle.innerHTML = '+';
          }
        });
      });

Est-ce que quelqu'un saurait comment procéder pour créer les clusters ? Que dois-je modifier/ajouter dans mon code ?

Merci !

[mathieu]

d'après ce que j'ai vu, ce n'est pas intégré à leaflet et vous devez ajouter cela :
https://github.com/Leaflet/Leaflet.markercluster

la document explique comment mettre des points pour avoir l'effet de regroupement.

[NoSmoking]

Bonjour,

@Ariane99i :

Petit rappel au passage : Les règles du club : IV-G. Remerciements

	Il est de bon ton de remercier la personne qui vous a aidé bénévolement et de lui signaler que sa réponse a bien résolu votre problème ou bien répondu à votre question.