Remove all Markers from map

Question

I am getting data from Algolia and have a map showing the results using Leaflet when a user searches the results update, the map does too but the markers are not removed and therefore more markers are added to the page.

I assumed that markers.forEach(marker => marker.remove()); would remove my markers but that is not the case.

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    images: {

    },
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    },
    transformItems: function(items) {
      renderMap(items);
      return items.slice(0, curentResultsPerPage);
    },
  })
);

const map = L.map(
  'mapid', {
    renderer: L.canvas(),
    zoom: 18,
    keepInView: true,
    dragging: !L.Browser.mobile,
  }
).setMaxZoom(18).setMinZoom(2);

L.mapboxGL({
  attribution: '<a href="https://www.maptiler.com/license/maps/" target="_blank">© MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>',
  accessToken: 'not-needed',
  style: 'https://maps.tilehosting.com/c/acad0958-1cbc-46ac-a497-681525e8ca19/styles/streets/style.json?key=iVyYurApGpcJs6fpSZIZ',  
}).addTo(map);

let markers = [];

function renderMap(items) {

  // remove current markers
  markers.forEach(marker => marker.remove());
  // clear the markers
  markers = [];

  // create cluster group
  var clusters = L.markerClusterGroup({ 
    chunkedLoading: true,
    showCoverageOnHover: false,
  });

  // iterate through search results
  for (var i = 0; i < items.length; i++) {
    // get result
    var item = items[i];
    var geo = item._geoloc;
    // create marker
    var marker = L.marker([geo.lat, geo.lng], {icon: myIcon});

    // create marker popup
    marker.bindPopup(item.title);

    // add the marker to the markers array
    markers.push(marker);

    // add the marker to the cluster group
    clusters.addLayer(marker);
  }

  // add the cluster group to the map
  map.addLayer(clusters);

  if (markers.length) {
    map.fitBounds(L.featureGroup(markers).getBounds());
  }
}

search.start();

Answer 1

The issue is that the Leaflet Markers in your markers array are actually managed by your clusters Marker Cluster Group. The latter handles the addition and removal of your Markers on its own. Therefore clustered Markers are already removed from your map, and your marker.remove() will do nothing, or temporarily remove the Marker from the map until clusters adds it back.

If markers has the sams list of Markers as in clusters, then simply use the latter instead:

• clusters.clearLayers() to get rid of all Markers.
• clusters.getBounds() to fit your map to the extent of your Markers.