Leaflet JavaScript – How to Cluster Markers Using Geojson-Dashboard in Leaflet

clusteringgeojsonleafletmarkers

I know how to use Leaflet.markercluster, but for some reason I can't use with geojson-dashboard framework template for Leaflet (http://fulcrumapp.github.io/geojson-dashboard/).

But I have a simple problem, I'd like to cluster the points but maintain all the setting, I've already tried so many options but until now I couldn't.

enter image description here

Best Answer

When Leaflet.markercluster plugin is added to framework template http://fulcrumapp.github.io/geojson-dashboard/, it doesn't work because this example uses old version of Leaflet (0.7).

If newer version (1.4.0) of Leaflet is used, original code has to be modified at two places to make it work as it is (without marker clusters):

// ESRI geocoder
// before: var searchControl = L.esri.Geocoding.Controls.geosearch({
var searchControl = L.esri.Geocoding.geosearch({
  useMapBounds: 17
}).addTo(map);

function syncTable() {
  tableFeatures = [];
  featureLayer.eachLayer(function (layer) {
    layer.feature.properties.leaflet_stamp = L.stamp(layer);
    if (map.hasLayer(featureLayer)) {
// before: if (map.getBounds().contains(layer.getBounds())) {
      if (map.getBounds().contains(layer.getLatLng())) {
        tableFeatures.push(layer.feature.properties);
      }
    }
  });
  $("#table").bootstrapTable("load", JSON.parse(JSON.stringify(tableFeatures)));
  var featureCount = $("#table").bootstrapTable("getData").length;
  if (featureCount == 1) {
    $("#feature-count").html($("#table").bootstrapTable("getData").length + " visible feature");
  } else {
    $("#feature-count").html($("#table").bootstrapTable("getData").length + " visible features");
  }
}

To add marker clusters, L.geoJson layer featureLayer is renamed to featureLayerUngrouped and used only for creating markers and adding them to newly created L.markerClusterGroup layer named featureLayer. This is the changed part of the code:

// new cluster group
var featureLayer = L.markerClusterGroup({
  maxClusterRadius: 30
});

// old renamed geoJson feature group used for loading markers
var featureLayerUngrouped = L.geoJson(null, {
  filter: function(feature, layer) {
    return feature.geometry.coordinates[0] !== 0 && feature.geometry.coordinates[1] !== 0;
  },
  pointToLayer: function (feature, latlng) {
    if (feature.properties && feature.properties["marker-color"]) {
      markerColor = feature.properties["marker-color"];
    } else {
      markerColor = "#FF0000";
    }
    var marker = L.circleMarker(latlng, {
      radius: 4,
      weight: 2,
      fillColor: markerColor,
      color: markerColor,
      opacity: 1,
      fillOpacity: 1
    });
    // marker added to cluster group
    featureLayer.addLayer(marker);
    return marker;
  },
  onEachFeature: function (feature, layer) {
    if (feature.properties) {
      layer.on({
        click: function (e) {
          identifyFeature(L.stamp(layer));
          highlightLayer.clearLayers();
          highlightLayer.addData(featureLayer.getLayer(L.stamp(layer)).toGeoJSON());
        },
        mouseover: function (e) {
          if (config.hoverProperty) {
            $(".info-control").html(feature.properties[config.hoverProperty]);
            $(".info-control").show();
          }
        },
        mouseout: function (e) {
          $(".info-control").hide();
        }
      });
    }
  }
});

// Fetch the GeoJSON file
$.getJSON(config.geojson, function (data) {
  geojson = data;
  features = $.map(geojson.features, function(feature) {
    return feature.properties;
  });
  // data loaded to geoJson feature group
  featureLayerUngrouped.addData(data);
  buildConfig();
  $("#loading-mask").hide();
});

EDIT: Function applyFilter() also has to be modified:

function applyFilter() {
  var query = "SELECT * FROM ?";
  var sql = $("#query-builder").queryBuilder("getSQL", false, false).sql;
  if (sql.length > 0) {
    query += " WHERE " + sql;
  }
  alasql(query, [geojson.features], function(features){
    featureLayer.clearLayers();
//  added
    featureLayerUngrouped.clearLayers();
//  before: featureLayer.addData(features);
    featureLayerUngrouped.addData(features);
    syncTable();
  });
}

With this cluster markers are working.

It's interesting that it doesn't work with latest version of Leaflet (1.5.1). I didn't investigate furter to find the reason.

Related Question