Improve performance when viewing points

[tobiasschuerg]

No surprise, performance decreases drastically the more points are loaded.

I also noticed that the browser also makes a big difference. For me Vivaldi and Edge are very laggy, while Firefox handles the same amout of points quite well - but this is probably more in the scope of leafletjs.

Nevertheless, maybe there are some ways to improve this in general, even when viewing a full month or more.

Ideas I can think of:

• [ ] only load the points, which are close to the actual area which is viewed
• [ ] only show points if below a certain zoom level
• [ ] provide a way to also specify a sampling so that not every point is loaded but only every second one or alternatively a value in meter

[finloop]

I personally run quite a big instance with lots of GPX files imported and I'm hitting performance issues. I ran a profiler to check what actually takes the most time:

Whole request takes about 16 seconds to load, and these two functions take around 79% of that time combined:

• ~9500 ms - createMarkersArray https://github.com/Freika/dawarich/blob/master/app/javascript/maps/markers.js#L3
• ~1000 ms - createPolylinesLayer https://github.com/Freika/dawarich/blob/master/app/javascript/maps/polylines.js#L344

Removing some points would probably be the fastest way to squeeze more performance, I can check whether doing some filtering on server side or in JS is worth it and actually improves performance.

Long term - doing that on server side (maybe as a job), would be better, but I don't want to do that since that could result in data and/or accuracy loss.

Note: These results are prop better on some newer hardware, but I'm using quite an old :Intel i5-4200H (4) @ 3.400GHz

[kymograph]

This should not delete any data points from the database. Just for viewing them on the map it should not always load all points