1

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.

3

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);
  • MERCI ! i have some difficulties to understand the difference between geoJSON point and marker. – NanBlanc May 5 '17 at 13:42
  • 1
    geoJSON point is just an information. Just a data. A marker is a graphical Leaflet element displayed on a map. By default, Leaflet displays geoJSON points as standard markers on the map. the "pointToLayer" allows you to change that representation. You could, for example, represent your geoJSON points as polygons. – Julien V May 5 '17 at 15:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.