[GIS] Leaflet Marker Cluster: refreshCluster function issue

clusteringjavascriptleafletweb-mapping

I am trying to use the markers.refreshClusters(); function to refresh the marker icons for a new styled icon I am trying to work with to highlight the selected cluster. Unfortunately, I keep getting the markers.refreshClusters is not a function error. Is there a file I am missing for the marker cluster plug-in? I tried updating to latest revision of plug-in but it seems I have the latest.

Best Answer

I just wrote the refreshClusters() method a few weeks ago. Unfortunately it did not make it yet to the distributed version on GitHub nor to the one provided by MapBox, even though the documentation already mentions it.

You can easily add it yourself by copying the code into your script. Just make sure to include it before calling the method.

Demo: http://jsfiddle.net/0ab2hm67/3/

Definitely this new method is helpful to more and more people. Please feel free to ask for a new version to include it by posting on the library issue page.

Related Solutions

[GIS] How to use Leaflet Marker Cluster on markers from Leaflet-layerJSON (Overpass API)

See example Overpass API&MarkerCluster on https://github.com/binaworks/osmtagviz or https://github.com/stork-map/stork-map.github.io (http://stork-map.github.io/#6/48.611/31.674)

[GIS] Mapbox personalized icons with cluster and filter checkbox

I recommend checking out this Mapbox.js example. It demonstrates how to use a filter UI in conjunction with Leaflet MarkerCluster. The generalized approach from the example is:

Set up variables for us to use later on in our filter function.

// Add an empty layerGroup to the map 
// (for the layers you'd like to filter interactively) 
var overlays = L.layerGroup().addTo(map);
// we create the 'layers' variable outside of the on('ready' callback
// so that it can be accessible in the showStations function.
var layers;
// Get our checkbox elements and store them in a variable
// In the Mapbox.js example, there are checkboxes with
// name="filter" inside a form element
var filters = document.getElementById('yourId').filters;

Create a featureLayer for your point data:

L.mapbox.featureLayer()
  .loadURL('/path/to/your/geojson.geojson')
  .on('ready', function(e) {
    layers = e.target;
    yourFilterFunction();
});

Create a function to filter your cluster groups. Note that Mapbox.js' setFilter() method only applies to L.mapbox.featureLayers, which means it won't work on the cluster groups we want to use.

function yourFilterFunction() {
  // first collect all of the selected filters and create an array of strings
  // like ['green', 'blue']
  var list = [];
  for (var i = 0; i < filters.length; i++) {
    if (filters[i].checked) list.push(filters[i].value);
  }
  // then remove any previously-displayed marker groups
  overlays.clearLayers();
  // create a new marker group
  var clusterGroup = new L.MarkerClusterGroup().addTo(overlays);
  // and add any markers that fit the filtered criteria to that group.
  layers.eachLayer(function(layer) {
    if (list.indexOf(layer.feature.properties.line) !== -1) {
      clusterGroup.addLayer(layer);
    }
  });
}

Best Answer

Related Solutions

[GIS] How to use Leaflet Marker Cluster on markers from Leaflet-layerJSON (Overpass API)

[GIS] Mapbox personalized icons with cluster and filter checkbox

Related Question