Clustering geojson file on mapbox / leaflet

1
votes

I'm trying to set up a clustered map on mapbox, like http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

Currently, my point data are being pulled from MYSQL and converted into GeoJson using GeoPHP. The map.

I would like to know if there is a way to use MarkerCluster plugin with my GeoJson file, called mysql_points_geojson.php in code below:

        // Bike Racks
    var bikeRacksIcon = L.icon({
        iconUrl: 'bicycleparking.png',
        iconSize: [24, 28],
        iconAnchor: [12, 28],
        popupAnchor: [0, -25]
    });
    bikeRacks = new L.geoJson(null, {
        pointToLayer: function (feature, latlng) {
          return L.marker(latlng, {
            icon: bikeRacksIcon,
            title: feature.properties.city
          });
        },
        onEachFeature: function (feature, layer) {
          if (feature.properties) {
            var content = '<table border="0" style="border-collapse:collapse;" cellpadding="2">' +
                '<tr>' + '<th>City</th>' + '<td>' + feature.properties.city + '</td>' + '</tr>' +
                '<tr>' + '<th>Country</th>' + '<td>' + feature.properties.country + '</td>' + '</tr>' +

                '<table>';
            layer.bindPopup(content);
          }
        }
    });
    $.getJSON("mysql_points_geojson.php", function (data) {
        bikeRacks.addData(data);
    }).complete(function () {
        map.fitBounds(bikeRacks.getBounds());
    });
2
javascriptjsonleafletmapboxgeojson

2 Answers

1
votes

Your layer bikeRacks can either be a L.MarkerClusterGroup or a L.geoJson layer. A solution could be to create your custom geojson layer that you support clustering.

I think it would be far easier to forget about L.geojson layer and parse the "mysql_points_geojson.php" data structure yourself (you can take ideas from https://github.com/Leaflet/Leaflet/blob/master/src/layer/GeoJSON.js)

Furthermore, I think it would be even easier to forget about geojson and see it the server cannot send back a simple array of points (easier to parse)

For me the code should be like that ...

var bikeRacks = new L.MarkerClusterGroup({});

$.getJSON("mysql_points_geojson.php", function (data) {
    // iterate on data to find the points
    // create a marker for each point
    bikeRacks.addLayer(marker);
}).complete(function () {
    map.fitBounds(bikeRacks.getBounds());
});
0
votes

Even if it's an old post, here is how I did it. I used clusterMarker plugin.

    var promise = $.getJSON("yourFile.json");
     /* Instanciate here your clusters */

    var clusters = L.markerClusterGroup({
        spiderfyOnMaxZoom: false, 
        showCoverageOnHover: false, 
        zoomToBoundsOnClick: true 
    });
   promise.then(function(data) {

Inside this function, through click actions or whatever, you add your markers to the clusters.

myMarker.addTo(clusters);

Andd finally, at the end you add the clusters 

clusters.addTo(map);