4

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.

4
  • 1
    Please edit your question so that your code is minimal and reproducible. Commented Dec 27, 2020 at 4:57
  • @IvanSanchez For the solution I have this is enough of code. I'm voting to reopen the question.
    – TomazicM
    Commented Dec 27, 2020 at 14:12
  • @TomazicM The question was reopened through user vote - please add your answer
    – Midavalo
    Commented Dec 27, 2020 at 17:51
  • @IvanSanchez I edited my question
    – Sikder
    Commented Dec 29, 2020 at 0:42

1 Answer 1

3

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/

4
  • Thank you TomazicM for your answer. I have to change the marker position as well as marker icon. I edited my question with a working example.
    – Sikder
    Commented Dec 29, 2020 at 0:38
  • Have a look at docs at leafletjs.com/reference-1.7.1.html#marker. You can change marker icon with the .setIcon(icon) method.
    – TomazicM
    Commented Dec 29, 2020 at 8:26
  • Answer and JSFiddle example were modified so that now marker icon is also modified withe the icon created by .vehiclePushpinOptions method of OpenStreetMapsHelper object.
    – TomazicM
    Commented Dec 29, 2020 at 16:00
  • Thank you so much TomazicM again for your answer
    – Sikder
    Commented Jan 1, 2021 at 2:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.