1

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.

  • How are you storing and reading the data? Is it a GeoJSON or are you reading it from a map server like GeoServer? If you could use a spatial database as your backend you get some more options for dynamically clipping, loading and optimising the geometry. – hexamon Nov 13 at 9:12
  • I have a simple array where elements contain lat e lon. When a new point is received, the marker is positioned in that point and also the point is appended to the array so the path can be drawn. I have all data on the client at the moment, but if it should reach 100K, I'll make lazyloaded. My question is how to manage it with leaflet and how many points it can handle. – TheDeveloper Nov 13 at 14:25
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/

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.