Leaflet markers aggregating when dezooming the map

user_16791836 0
Viewed 118

I am new to Leaflet and I am trying to show a map with markers.

The problem I have is that the markers disappear when I zoom out, and are replaced with a number: my map with markers not showing as i want

I used CircleMarkers to be able to set the color of each marker, and so that the markers keep their size no matter the zoom level. I add the markers using markercluster because I want to be able to delete them all easily.

<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>


function addMarkers(data){


// setup a marker group
markerList = L.markerClusterGroup();



for (var i = 0; i < data.length; i++){
    var circleColor = getcolor(data[i].roundScore);
    var circle = L.circleMarker([data[i].solutionLat, data[i].solutionLng], {
    color: circleColor,
    fillColor: circleColor,
    fillOpacity: 0.5,
    radius: 5
    });

    circle.bindPopup("Score : " + data[i].roundScore + "\n Address :" + data[i].address);
    markerList.addLayer(circle);

}
window.mapMark.addLayer(markerList);

}

function deleteMarkers(){
if(markerList) {
    markerList.clearLayers();
}

}

I have no idea how to change this behavior, and whether it is linked to the markers themselves or to the tile I use, which is openstreetmap:

const attribution =
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

  const tileUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
  const tiles = L.tileLayer(tileUrl, { attribution });
  tiles.addTo(mapMark);

}

Any help or hint would be greatly appreciated. Thank you very much :)

leaflet.markercluster leaflet openstreetmap javascript
1 Answers

The disappearance of your Circle Markers and replacement by numbers is the expected effect of Leaflet.markercluster. should you have included the plugin CSS files as well, these numbers would appear in green/yellow/orange bubbles.

To avoid this clustering, but still be able to remove all your Markers at once, simply use a basic Layer Group instead of a MarkerClusterGroup:

https://leafletjs.com/reference-1.7.1.html#layergroup

Used to group several layers and handle them as one.

markerList = L.layerGroup();

// you can also clear layers of a basic Layer Group
markerList.clearLayers();
user_51087960
Related