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.

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

  • 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 Dec 29 '20 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 Dec 29 '20 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 Dec 29 '20 at 16:00
  • Thank you so much TomazicM again for your answer – Sikder Jan 1 at 2:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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