1

I am rendering 10,000 points with Leaflet's markercluster library.

I fetch these 10k points from our server. This takes about 700ms. It takes Leaflet about 3 seconds to cluster these points and display them on our map. How can I speed up this clustering and rendering?

Here is a minimal example of my leaflet code. We are using the vue.js framework.

createMapWithLeafletAndMapTiler() {
  // eslint-disable-next-line
  var satelliteTilesLayer = L.tileLayer(MAPTILER_SATELLITE_URL, {
    maxZoom: 18,
    minZoom: 2
  });
  // eslint-disable-next-line
  var streetTilesLayer = L.tileLayer(MAPTILER_STREETS_URL, {
    maxZoom: 18,
    minZoom: 2,
    attribution: MAPBOX_ATTRIBUTION
  });
  var baseMaps = {
    Satellite: satelliteTilesLayer,
    Streets: streetTilesLayer
  };
  // eslint-disable-next-line
  this.myMap = L.map("leafletMapId", {
    center: [-50.99404, 39.75621],
    zoom: 5,
    layers: [streetTilesLayer]
  }).setView([39.75621, -104.99404], 3);

  this.markers = L.markerClusterGroup();

  L.control.layers(baseMaps).addTo(this.myMap);

  this.getGeoJsonFromServer();
}

async getGeoJsonFromServer() {
  var timeBeforeFetch = new Date();
  var bounds = this.myMap.getBounds();
  this.swLat = bounds._southWest.lat;
  this.swLng = bounds._southWest.lng;
  this.neLat = bounds._northEast.lat;
  this.neLng = bounds._northEast.lng;
  axios
    .get("/maps/" + this.list_id, {
      params: {
        q: this.searchTerms,
        swLat: this.swLat,
        swLng: this.swLng,
        neLat: this.neLat,
        neLng: this.neLng
      },
      headers: { "Content-Encoding": "gzip" }
    })
    .then(
      response => {
        f (!response.data.exceedsLimit) {
          this.geoJsonObject = response.data.geoJson;
          this.geoJsonLayer = L.geoJson(this.geoJsonObject, {
          });
          this.markers.addLayer(this.geoJsonLayer);
          this.myMap.addLayer(this.markers);
        }
      },
      error => {
        store.setErrorMessage("Network error searching list", error);
      }
    );
}
  • I don't see where you are doing the clustering. Your code seems to be adding the entire GeoJSON with all the Individual points on the map. – Devdatta Tengshe Oct 29 at 7:31
  • Thank you, @DevdattaTengshe I had left out an important line in my example. Just edited the post. – GNG Oct 29 at 7:47
  • Are you using bounds(current extent) to limit the result ? – user4906240 Oct 29 at 8:04
  • Example from plugin for 10.000 markers work just fine: leaflet.github.io/Leaflet.markercluster/example/…. Check with profiler what's happening in your case. – TomazicM Oct 29 at 8:08
  • Try with chunkedLoading: true option for L.markerClusterGroup. – TomazicM Oct 29 at 19:20
0

You can use current map extent and limit the result from your service. and you can add a map extent change listener to bring only that data which is falling under that extent.

map.on('moveend', function(e) {
   var bounds = map.getBounds(); //use this bounds
});

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.