[GIS] Marker popup isn’t opening

clusteringgeojsonleafletmarkerspopup

i'm working with a hudge amount of data, that's why i decided to use clustermarker on my leaflet map :

function CickOnPoint (e) {
var pm = e.target.feature.properties.distCoupe;//recupère dist coupe depuis geojson
var ind = findPosSlideIndex(pm);
currentSlide(ind);
} 

function onEachPoint (feature,layer){
layer.on({click: CickOnPoint});
//marker pour cluster
var coordinates = feature.geometry.coordinates;
var latlng = new L.LatLng(coordinates[1], coordinates[0]);
var marker = L.marker(latlng);
marker.bindPopup("SURPRISE MOTHERFUCKER");
return marker;
}

var geo_point = L.geoJSON(point_layer_WGS84_dist, {
onEachFeature: onEachPoint
});

var clusters = new L.MarkerClusterGroup({
    chunkedLoading: true,
    disableClusteringAtZoom: 19,
    spiderfyOnMaxZoom: false
});
clusters.addLayer(geo_point);
map.addLayer(clusters);

I can't understand why no popup is showing when i click on markers, but the fonction "clickOnPoint", which control a picture viewer does work.

I'm maybe missing a comprehension point in here.

Best Answer

The marker you declare is lost because you don't use onEachFeature correctly.

You make the onEachFeature return something. It is not how it works in Leaflet. The function you set for "onEachFeature" receives the feature (geojson) and layer (leaflet object) as parameters but does not return them. You can manipulate those parameters but not replace the layer object for example.

If you want to declare the layer yourself, there is a "pointToLayer" option for GeoJson to set a function that receives the feature and the latlng for each point of the GeoJson data and RETURNS a layer.

Simple correction of your code :

var clusters = new L.MarkerClusterGroup({
    chunkedLoading: true,
    disableClusteringAtZoom: 19,
    spiderfyOnMaxZoom: false
});

function onEachPoint (feature,layer){
    layer.on({click: CickOnPoint});
    if (feature.geometry.type === 'Point'){
        layer.bindPopup("SURPRISE BROZZARELLA");
        clusters.addLayer(layer);
    }
});

var geo_point = L.geoJSON(point_layer_WGS84_dist, {
    onEachFeature: onEachPoint
});

map.addLayer(clusters);

And if you want to declare the markers yourself :

var clusters = new L.MarkerClusterGroup({
    chunkedLoading: true,
    disableClusteringAtZoom: 19,
    spiderfyOnMaxZoom: false
});

function ptl(feature, latlng) {
    // here you can customize the marker, change its icon for example
    var m = L.marker(latlng);
    m.bindPopup("SURPRISE MOZZAFUCKA");
    clusters.addLayer(m);
    return m;
}

function onEachPoint (feature,layer){
    layer.on({click: CickOnPoint});
});

var geo_point = L.geoJSON(point_layer_WGS84_dist, {
    pointToLayer: ptl,
    onEachFeature: onEachPoint
});

map.addLayer(clusters);
Related Question