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.