Removing and adding markers every 5 seconds freeze the browser after a several minutes

Question

I am creating around 300 markers on Leaflet map and every 5 seconds I am getting new data from the server and I'm removing markers from the map and adding markers with new data. But the problem is that browser freezes after several minutes (around 20 or 30 minutes).

Here is my code for adding markers on the map

var map = L.map('map').setView([48.48106, -123.3921], 13);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution:
    '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
var mapHelper = new OpenStreetMapsHelper(map);

function showMarkers() {
  mapHelper.removeEntities('Vehicles:0', true);
  for (let i = 0; i < vehicleData.length; i++) {
    let bearing = Math.floor(Math.random() * 360 + 1);
    let dataItem = vehicleData[i];
    let vehicleBubble = mapHelper.createPushpin(
      [dataItem.lat, dataItem.lng],
      mapHelper.vehiclePushpinOptions(bearing, 1),
      {
        mouseover: function (e) {
          console.log('mouse over');
        },
        mouseout: function (e) {
          console.log('mouse out');
        },
      }
    );
    mapHelper.addEntity(vehicleBubble, 'Vehicles:0', 9999);
  }
  setTimeout(showMarkers, 5000);
}

showMarkers();

The whole code is bit longer so I am adding all my code here as I have to keep code minimal. Please see working example here https://embed.plnkr.co/plunk/tZOC6bTmUfLvvNJi

I took little help from @TomazicM to generate marker positions.

I have to change marker position as well as marker icon because marker icon changes depending on vehicle bearing.

Answer 1

As @IvanSanchez commented, it's not enough code to reproduce the behavior, but it's enough of code to give an alternative approach.

Since current approach obviously drains browser resources because of adding huge amount of markers, alternative approach would be to initially create all the needed markers and later just modify their properties and add/remove them to the map as required.

Below is simple example of initially creating 350 markers and then dynamically creating 300 to 350 random positions every two seconds and modifying markers accordingly. Marker icon is modified with icon created by .vehiclePushpinOptions method of OpenStreetMapsHelper object.

var map = L.map('map');

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var markers = [];
for (var i = 0; i < 350; i++) {
  markers.push(L.marker([0, 0]));
}

var geojson = L.geoJson(null, {
}).addTo(map);

var points;
var mapHelper = new OpenStreetMapsHelper(map);

function updatePoints() {
  var nPoints = 300 + Math.floor((Math.random() * 50) + 1)
  points = turf.randomPoint(nPoints, {bbox: [13.24, 45.5, 16.35, 46.84]});
  turf.featureEach(points, function (currentFeature, featureIndex) {
    var coord = turf.getCoord(currentFeature);
    markers[featureIndex].setLatLng([coord[1], coord[0]]);
    var bearing = Math.floor(Math.random() * 360 + 1);
    var markerOptions = mapHelper.vehiclePushpinOptions(bearing, 1);
    markers[featureIndex].setIcon(markerOptions.icon);
    if (!geojson.hasLayer(markers[featureIndex])) {
      geojson.addLayer(markers[featureIndex]);
    }   
  });
  for (var i = nPoints; i < 350; i++) {
    if (!geojson.hasLayer(markers[i])) break;
    geojson.removeLayer(markers[i]);
  }
  setTimeout(updatePoints, 2000);
}

updatePoints();
map.setView(geojson.getBounds().getCenter(), 8);

Here is working JSFiddle: https://jsfiddle.net/TomazicM/wq1obrmh/