Leaflet clearLayers is freezing browser - leaflet

Question

I have a function that adds many circle markers to a layerGroup
const renderCatalogQuery = (catalog, catalogLayer) => {
catalogLayer.clearLayers();
catalogLayerControl.removeLayer(catalogLayer);
catalogLayerControl.addOverlay(catalogLayer, catalog.name);
for (let [name,lon,lat] of catalog.currentQuery) {
let coordinates = L.latLng(lat,lon)
let myMarker = L.circle(coordinates, {
radius: catalog.markerSize,
color: catalog.markerColor,
weight: 1})
myMarker.bindTooltip(`${name} (${catalog.name})`)
myMarker.on('click', () => displayObjectInformation(catalog, name));
myMarker.addTo(catalogLayer);
}
}
catalogLayerControl is a control.layers , and catalogLayer is a layerGroup. The first time this run it's no problem. It will populate the layerGroup with circle markers and add the layer group to the layer control. The issue I am having is if the number of circle markers is quite large, the browser freezes up due to the clearLayers() method. It works fine for smaller markers. I can't figure out why adding the markers happens no problem, but removing them doesn't work. Is there a better approach I can take here?

Answer 1

I am guessing clear layers is not the culprit, but adding circles one by one while the Layer Group is still on map is more likely to give performance issue.
Try removing the Layer Group from the map before your loop, then add it back once you are done, so that the heavy computation happens only once.
const renderCatalogQuery = (catalog, catalogLayer) => {
catalogLayer.remove(); // First remove the Layer Group from map
catalogLayer.clearLayers();
for (let [name,lon,lat] of catalog.currentQuery) {
// ...
myMarker.addTo(catalogLayer);
}
catalogLayer.addTo(map); // Finally re-add to map
}