Skip to main content
Geographic Information Systems

Return to Answer

Additional code.
Source Link
TomazicM
TomazicM
  • 27.3k
  • 25
  • 33
  • 43

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.

With this cluster markers are working.

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.

Changed diction.
Source Link
TomazicM
TomazicM
  • 27.3k
  • 25
  • 33
  • 43

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

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

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

With this cluster markers workedare working.

What isIt's interesting is that when I tried to use theit doesn't work with latest version of Leaflet (1.5.1), it didn't work. I didn't investigate furter to find the reason.

When I tried to add Leaflet.markercluster plugin to http://fulcrumapp.github.io/geojson-dashboard/ it didn't work because this example uses old version of Leaflet (0.7).

When I used newer version (1.4.0) of Leaflet, I had to modify original code at two places to make it work as it is (without marker clusters):

Then I renamed previous L.geoJson layer featureLayer to featureLayerUngrouped and used it only for creating markers and adding them to newly created L.markerClusterGroup layer named featureLayer. This is the changed part of the code:

With this cluster markers worked.

What is interesting is that when I tried to use the latest version of Leaflet (1.5.1), it didn't work. I didn't investigate furter to find the reason.

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):

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:

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.

Source Link
TomazicM
TomazicM
  • 27.3k
  • 25
  • 33
  • 43

When I tried to add Leaflet.markercluster plugin to http://fulcrumapp.github.io/geojson-dashboard/ it didn't work because this example uses old version of Leaflet (0.7).

When I used newer version (1.4.0) of Leaflet, I had to modify original code 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"); } }

Then I renamed previous L.geoJson layer featureLayer to featureLayerUngrouped and used it 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(); });

With this cluster markers worked.

What is interesting is that when I tried to use the latest version of Leaflet (1.5.1), it didn't work. I didn't investigate furter to find the reason.