Estoy utilizando Leaflet para mostrar los datos de un GeoJson, he agregado el plugin MarkerCluster, hasta aquí todo bien, parte del código es el siguiente
// 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) {
return L.marker(latlng, {icon: icon });
}
});
// Añade markerCluster.
markers.addLayer(geojsonAjax);
mymap.addLayer(markers);
};
xhr.send();
El siguiente paso es agrupar los cluster en grupos, para ello estoy utilizando el plugin Leaflet.MarkerCluster.LayerSupport, https://github.com/ghybs/Leaflet.MarkerCluster.LayerSupport
Y es donde viene los problemas, he intentado lo siguiente, me muestra los grupos, y los marker en el mapa con markerCluster, pero no visualizo la información dentro del popUp. El popUp esta vacio. Antes de intentar agrupar los marker, si tengo información en el popUp.
/*
****************************************
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(),
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);
Falta información Antonio según veo, te falta inclusive la instrucción layer.bindPopup(popupContent); – Albert Hidalgo hace 2 horas
Añado más información del código
/*
****************************************
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:'© <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();
layer.bindPopup(popupContent);