You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
As part of the creation of an interactive map with Leaflet, I want to create marker cluster Groups, but most of the tutorials or examples I find go through GeoJson, however, I just have my GPS points with description without having gone through GeoJson, and I just intend to add what's needed to make them clusters because I have many GPS points geographically close.
I've added the necessary library, but it's afterwards, in the code, where I don't really see what needs adjusting.
// Créer des couches pour chaque catégorie de marqueursvarlayers={};for(varcategoryinmarkersData){layers[category]=L.layerGroup();}// Ajouter des marqueurs à partir de données pour chaque catégoriefor(varcategoryinmarkersData){markersData[category].forEach(function(data){varmarker=L.marker([data.lat,data.lng],{icon: customIcon});varpopupContent=`<div class="popup-title">${data.name}</div><div class="popup-description"><strong>Description:</strong> ${data.description}<br><strong>Partenaires:</strong> ${data.partenaires.join(", ")}</div>`;varimageHTML=data.image
? `<img class='popup-image' src='images/${data.image}' alt='Image'>`
: "";popupContent+=`<div class='popup-content'>${imageHTML}</div>`;marker.bindPopup(popupContent);layers[category].addLayer(marker);});}// Ajouter les couches au contrôle des couchesL.control.layers(null,layers).addTo(map);// Activer toutes les couches par défautfor(varcategoryinlayers){layers[category].addTo(map);}// Mettre à jour la légende lorsque les couches sont activées/désactivéesmap.on("overlayadd overlayremove",function(eventLayer){varlegend=document.getElementById("legend");legend.innerHTML="";// Effacer le contenu de la légendefor(varcategoryinlayers){varlayer=layers[category];if(map.hasLayer(layer)){varitem=document.createElement("div");item.className="legend-item";varmarker=document.createElement("span");marker.style.backgroundColor=layer.options.color;item.appendChild(marker);item.appendChild(document.createTextNode(category));legend.appendChild(item);}}});// Initialiser la légendevarlegend=document.getElementById("legend");for(varcategoryinlayers){varlayer=layers[category];varitem=document.createElement("div");item.className="legend-item";varmarker=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-upmarker.on("popupopen",function(e){varpopup=e.popup;varcontent=popup.getContent();varpopupToggle=content.querySelector(".popup-toggle");varpopupContent=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="+";}});});
Someone can help me ? What should I change/add in my code ?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hello,
As part of the creation of an interactive map with Leaflet, I want to create marker cluster Groups, but most of the tutorials or examples I find go through GeoJson, however, I just have my GPS points with description without having gone through GeoJson, and I just intend to add what's needed to make them clusters because I have many GPS points geographically close.
I've added the necessary library, but it's afterwards, in the code, where I don't really see what needs adjusting.
Basically, my list of GPS points looks like this:
And then this is my code (french comments) :
Someone can help me ? What should I change/add in my code ?
Thank you !
Beta Was this translation helpful? Give feedback.
All reactions