0

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

  • Can you tell a little bit more about "I can't use" and "I couldn't"? – TomazicM May 16 at 13:07
  • Table stop syncing with the table? – TomazicM May 16 at 14:07
  • the markers in the map stop syncing with table when I cluster the markers – Felipe Martenexen May 16 at 14:17
1

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.

  • Thanks a lot about your answer, the cluster markers really work now, but the filter stop working, could you give me a hand? – Felipe Martenexen May 21 at 18:39
  • Quite some time went into above solution and it solved your problem. If you show some appreciation, I might consider further investigation. – TomazicM May 21 at 20:49
  • Hi TomazicM, you help me a lot with your answer, you can't imagine, because I've already tried in so many differents ways withou sucess, but only the filter stop working. I'm new user here, I'm learning how to use this community and I'd like to how can I help you too. – Felipe Martenexen May 22 at 12:07
  • Simply uptick the answer as a sign that it was useful to you. – TomazicM May 22 at 12:13
  • Ok, you help me again, I apreciate it. – Felipe Martenexen May 22 at 12:31

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.