Big polyline with Leaflet

Question

I'm using Leaflet for a project where I track the path of an entity along the map in realtime. I made a buffer with the last 1000 points but it is visible only through a big zooming cause the points are very near. So I'm thinking to develop an algorithm for building a smart path instead of keeping the last 1000 points but at the moment I'd like to know how many point can a polyline have in a normal PC. For example if I use 10K points, will the path continue to be efficient and fast? And with 100K? Is Leaflet optimized for polyline with many points?

A good solution could be to show only few points and load the path dinamycally when zooming (or maybe is it already done by Leaflet?).

I'm using Leaflet inside ReactJS.

Answer 1

If you are willing/can put your polyline in GeoJSON, you can then use Leaflet.VectorGrid plugin to display it. It can handle hundreds thousands of points without any problem.

I created simple test by creating 10 polylines with 100.000 points each with turf.js function turf.randomLineString and then displayed them as GeoJSON layer. Apart from waiting a second or two for polylines creation, it's all instantaneous.

Here is test code:

var map = L.map('map').setView([46, 14.84], 7);

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 lineStrings = turf.randomLineString(10, {bbox: [13.24, 45.5, 16.35, 46.84], num_vertices: 100000})

var vectorGrid = L.vectorGrid.slicer(lineStrings, {
  maxZoom: 18,
  rendererFactory: L.svg.tile,
  vectorTileLayerStyles: {
    sliced: function(properties, zoom) {
      return {
        stroke: true,
        color: 'red',
        weight: 2
      }
    }
  },
  interactive: false,
}).addTo(map);

Working JSFiddle is available here: https://jsfiddle.net/TomazicM/7hy3pub0/