How to optimize leaflet path?

Question

I have a path that has over 13,000 lat/lon points. Testing locally it works fine, but once on a device it's SUPER taxing and laggy. The path is so dense because the path has been snapped to roads.

What can I do in order to optimize things so my app runs more smoothly? Define the path densities based on zoom level?? How can I do this?

Many GIS databases have functions for polygon simplification. What is your primary data source? — Paulo Scardine, Oct 22 '15 at 18:04
I'm just using google maps to layout the path. Are there some tools you could recommend that might help? — Justin Young, Oct 22 '15 at 18:08

score 2 · Answer 1 · answered Oct 22 '15 at 18:12

Leaflet has a smoothFactor option for L.Polyline vectors:

How much to simplify the polyline on each zoom level. More means better performance and smoother look, and less means more accurate representation.

http://leafletjs.com/reference.html#polyline-smoothfactor

score 1 · Answer 2 · answered Oct 27 '15 at 13:03

You can simplify your path as a GeoJSON file, for example using the online tool mapshaper. The website is pretty straight-forward to use.

Simplifying from the source also saves downloading time, rather than fetching the entire 13k points and simplifying in the client with Leaflet.

score 0 · Answer 3 · answered Jan 15 '16 at 17:31

If you are looking for a javascript solution geojson-mend. Ex usuage:

var geomend = require("geojson-mend");
var isMended = geomend.nReduce(<GEOJSON OBJECT>, <TOLERANCE>);
console.log(isMended);

Replace <GEOJSON OBJECT> with your GeoJSON object and the <TOLERANCE> with the resolution you want. 0.0001 is roughly equal to 11.1m.

In your scenario, you could use a variation of this plugin to get and save different levels of details on zoom level change?

How to optimize leaflet path?

3 Answers3