1

I'm using Leaflet.markercluster plugin and JavasScript to develop a map where i want to generate clusters according to the screen bounds. I have a service that returns me a list of points depending on screen bounds, with lat and lng properties.

Declaration of variables map and cluster.

/* Single marker cluster layer to hold all clusters */

var markers = L.markerClusterGroup({
  spiderLegPolylineOptions: {weight: 0},
  clockHelpingCircleOptions: {weight: .7, opacity: 1, color: 'black', fillOpacity: 0, dashArray: '10 5'},

  elementsPlacementStrategy: 'spiral',
  helpingCircles: true,

  spiderfyDistanceSurplus: 25,
  spiderfyDistanceMultiplier: 1,

  elementsMultiplier: 1.4,
  firstCircleElements: 8

});

for (var i = 0; i < 10000; i++) {
  var circle = L.circleMarker([Math.random() * 30, Math.random() * 30], {fillOpacity: 0.7, radius: 8, fillColor: 'red',
  color: 'black'});
  markers.addLayer(circle);
}





var sudOest = L.latLng(41.512742, 2.410589);
var nordEst = L.latLng(41.590395, 2.489678);

//la sortida del mapa depen de la capa topònims i concretament d'aixo:      map.fitBounds(toponims);
map = L.map("map", {
    zoom: 14,
    crs: crs25831,
    layers: [baseLayers[Object.keys(baseLayers)[0]]],
    zoomControl: false,
    minZoom: 0,
    maxZoom: 6,
    maxBounds: L.latLngBounds(sudOest, nordEst)
}).setView([40.705008, -73.995581],6);


map.addLayer(markers);

Function called on move where load all coordinates points according to the bounding box

function cargarMegaCapes(zoomActual){
    for (var prop in capesDinamiques) {  
      if(map.getZoom()>3){  
        if(capesDinamiques[prop][0]){

        removeAreaLayer(prop); //clean the other markercluster

        baseLayers[prop] =afegirCapaServeiWeb(capesDinamiques[prop][1]
        +zoomActual._southWest.lng+'&x2='
        +zoomActual._northEast.lng+'&y1='
        +zoomActual._southWest.lat+'&y2='
        +zoomActual._northEast.lat+''); //service that return a list of points

        addAreaLayer(prop);//crating the new marker clusters according to the bounding box

            }   
        }
    }
}

    map.on('moveend', function() {
        var zoomActual = map.getBounds();
        cargarMegaCapes(zoomActual);

    });

Services example (JSON):

e {_layers: {…}, _initHooksCalled: true}
_layers:
10054: e
options: {icon: e, title: "", alt: "", clickable: true, draggable: false, …}
_latlng: o.LatLng {lat: 41.5437192894942, lng: 2.44910020452627}
_initHooksCalled: true
properties: undefined
feature: {properties: {…}}
_leaflet_id: 10054
_leaflet_events: {click_idx: {…}, click_idx_len: 1, dblclick_idx: {…}, dblclick_idx_len: 1, mouseover_idx: {…}, …}
__proto__: o.Class
10056: e
options: {icon: e, title: "", alt: "", clickable: true, draggable: false, …}
_latlng: o.LatLng {lat: 41.541313548773, lng: 2.44995964811972}
_initHooksCalled: true
properties: undefined
feature: {properties: {…}}
_leaflet_id: 10056
_leaflet_events: {click_idx: {…}, click_idx_len: 1, dblclick_idx: {…}, dblclick_idx_len: 1, mouseover_idx: {…}, …}
__proto__: o.Class`

Methods I use to add and remove layers and clusters:

function addAreaLayer(prop) {
        console.log("AFEGINT CLUSTERS "+ prop);

        active_area_list[prop]=baseLayers[prop];
        markers.addLayer(baseLayers[prop]);

        map.addLayer(markers);
        refreshActive();

};

function removeAreaLayer(prop) {
    if(map.hasLayer(baseLayers[prop])||active_area_list.hasOwnProperty(prop)){
        console.log("ELIMINANT CLUSTERS");

        delete active_area_list[prop];
        markers.removeLayer(baseLayers[prop]);

        map.removeLayer(markers);
        refreshActive();
    }
};

The markers doesn't show on the map, but if I activate the layer on map, the loaded clusters shows on map, but not dynamically by changing the bounds. Can you provide an example or explain what may be the solution?

Website where I'm working as an example of the problem:
https://serveisweb.mataro.cat/visorSIG/images/RecursosVisor/SSIT/minisite/leaflet/MARC/visor/?perfil=patrimoni_arquitectonic

  • From the code you included in your question it's absolutely impossible to guess what's happening in your app. You are also talking about marker clusters, but there is no such code present in your question. – TomazicM Jan 30 at 17:22
  • Sorry for the hassle, I added code declaring the marker clusters and map. I think it's all the code needed, I'll add as much code as possible if you still can't figure it out. You can visit the app (webPage ) and have a look on the code. Thank you very much!! – Marc Ribas González Feb 3 at 9:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.