使用Leaflet.MarkerCluster.LayerSupport插件在Leaflet中显示PopUp

Question

I am using Leaflet to show the data of a GeoJson, I have added the MarkerCluster plugin, so far so good.

The next step is to group the clusters into groups, for this I am using the plugin Leaflet.MarkerCluster.LayerSupport, https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport

And that's where the problems come from, I've tried the following, it shows me the groups, and the marker on the map with markerCluster, but I don't see the information inside the popUp. The popUp is empty. Before trying to group the markers, if I have information in the popUp.

/*
****************************************
Mapa Leaflet
****************************************
*/

// Se crea el mapa
var mymap = L.map('mapid', {
  center: [40.4167,-3.70325],
  zoom:6
});

// llamada a la API de Openstreetmap
var apiOpenstrertmap = {
    url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    options: {attribution:'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}
  }

// Icono personalizado
var icon = L.divIcon({
  className: 'custom-div-icon',
  html: "<div class='marker-pin'></div><i class='material-icons'></i>",
  iconSize: [30, 42],
  iconAnchor: [15, 42]
});

var renderMap = L.tileLayer(apiOpenstrertmap.url,apiOpenstrertmap.options);
renderMap.addTo(mymap);

/*
****************************************
Añade la información al popUp personalizado
****************************************
*/
function dataPopup(feature,layer){
  var outData = [];
  if (feature.properties){
    for(key in feature.properties){
      switch (key) {
        case 'movil':
        var movil = `<p class="tagDescription"><span class="tagKey">Móvil: </span>${feature.properties[key]}</p>`;
        break;
        case 'gps':
        var gps = `<a class="urlOsm" href="${feature.properties[key]}" rel="noopener noreferrer" target="_blank">Ir</a>`
        break;
    }
  }
  // Inserta los tags en el orden deseado
  outData.push(movil, gps)
  layer.bindPopup(outData.join(''));
  }
}


/*
****************************************
Carga la información del Geojson, y define MarkerCluster
****************************************
*/
// Variables para crear los layerGroup
var mcgLayerSupportGroup = L.markerClusterGroup.layerSupport(),
    group1 = L.layerGroup(),
    group2 = L.layerGroup(),
    group3 = L.layerGroup(),
    group4 = L.layerGroup(),
    control = L.control.layers(null, null, { collapsed: false }),
    marker;
// Agraga los grupos al mapa
mcgLayerSupportGroup.addTo(mymap);

// Llamada ajax para mostrar los datos del geojson en el mapa
var myLoader = document.getElementById('myLoaderContainer');
var xhr = new XMLHttpRequest();

xhr.open('GET', '../data/map/a.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status == 200){
    var geojsonAjax = L.geoJSON(xhr.response, {
      onEachFeature:dataPopup,
      // Añade el icon personalizado
      pointToLayer: function (feature, latlng) {
        marker = L.marker(latlng, {icon:icon})
        if (feature.properties.provincia == 'a') {
          marker.addTo(group1)
        }else if(feature.properties.provincia == 'b'){
          marker.addTo(group3)
        }
        else {
          marker.addTo(group2)
        }
      }
    });

    mcgLayerSupportGroup.checkIn([group1, group2, group3]);

    control.addBaseLayer(group1, 'first quarter');
    control.addBaseLayer(group2, 'Second quarter');
    control.addBaseLayer(group3, 'Third quarter');

    control.addTo(mymap);

    group1.addTo(mymap);
    group2.addTo(mymap);
    group3.addTo(mymap);


    myLoader.style.display = "none";
  }else {
    alert("Error al cargar el mapa. Por favor inténtelo más tarde.")
    myLoader.style.display = "none";
  }


};
xhr.send();

Answer 1

Welcome to SO!

You probably just need to return your marker at the end of your pointToLayer option function.

Otherwise your dataPopup function / onEachFeature option will not have a layer to work on.