Add Leaflet marker clusterGroup without GeoJson

[AnnaDhlln]

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:

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 */
  ],
};

And then this is my code (french comments) :

// 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>Description:</strong> ${data.description}<br>
<strong>Partenaires:</strong> ${data.partenaires.join(", ")}
</div>
`;
    var imageHTML = 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 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 = "+";
    }
  });
});

Someone can help me ? What should I change/add in my code ?

Thank you !