[GIS] Big polyline with Leaflet

javascriptleafletlinepolyline-creationvisualisation

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.

Best Answer

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/

Related Question