Leaflet : marker icons and markerCluster displaying together on the map with fetch

Question

I am using Leaflet on my project. I work with PHP / Symfony, I retrieve the data from the Controller via fetch to display the markers on the map.

All markers are displayed on the map, but when using the markerCluster, markers that have close coordinates on the map (eg: same city) do not group together in clusters. The markers farther apart from each other group well together. Have you an idea why? Thanks

I am adding screens to you so that you can better understand:)

map.js

let iconPicture = L.icon({
  iconUrl: "/assets/images/cycling.png",
  iconSize: [20, 20],
  popupAnchor: [0, -10],
});

function initMap() {
  var map = L.map("mapId").setView([48.833, 2.333], 12);

  var osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors",
    minZoom: 3,
    maxZoom: 19,
  });

  var markersGroup = L.markerClusterGroup({
    disableClusteringAtZoom: 13,
    spiderfyOnMaxZoom: false,
    removeOutsideVisibleBounds: true,
  });

  fetch("/api/map")
    .then((response) => {
      return response.json();
    })
    .then((result) => {
      result.forEach((element) => {
        var cluster = L.marker([element.latitude, element.longitude], {
          icon: iconPicture,
        })
          // Nous ajoutons la popup. A noter que son contenu peut être du HTMl
          .bindPopup(
            function (layer) {
              return (
                "<span>" +
                element.name +
                "</span>" +
                "<br>" +
                "<div class='img-hover-zoom'>" +
                "<a href=" +
                "/collection50_60/" +
                element.id +
                ">" +
                "<img class='picturePopup' src=/assets/images/uploads/" +
                element.pictureFront +
                ">" +
                "</a>" +
                "</div>" +
                "<br>" +
                element.city +
                "<br>" +
                "<a href=" +
                "/collection50_60" +
                ">" +
                element.years +
                "</a>"
              );
            },
            { className: "pop-up-leaflet", direction: "top" } //then add your options
          )
          .addTo(map);
        markersGroup.addLayer(cluster);
      });
      map.addLayer(markersGroup);
    })
    .catch(() => console.error("error"));
}
window.onload = function () {
  initMap();
};

Answer 1

That is just because you add your Markers (variable cluster ) to both the map and the MarkerClusterGroup.

Simply add them only to MCG and let the latter handle everything.

var cluster = L.marker(latLng, options)
  .bindPopup()
  //.addTo(map); <= do not add your Marker directly to the map
markersGroup.addLayer(cluster); // <= let the MCG handle everything