openchargemap / ocm-app

The openchargemap.org web and mobile app
https://map.openchargemap.io
MIT License
39 stars 13 forks source link

Slow Map Perfomance #37

Open holdit opened 1 year ago

holdit commented 1 year ago

The map can get very sluggish in areas with lots of chargers (eg: central London, Paris, etc).

I experience this on my powerful desktop and on a fairly fast Android device (no idea about iPhones). I assume it's even worse for those with slower hardware.

I'm not a web developer, so I have no idea if the current implementation is the most performant, but if there's nothing left to improve, perhaps we could use "clusters" that are replaced by the chargers as we zoom in? A few sites that use maps to display data points do this and it seems to help with performance.

For example, https://portal.ubitricity.co.uk/map . They have hundreds of street light chargers, so they use these clusters:

As you zoom in, smaller clusters appear, until you can see the chargers:

On Android, I've been using EVMap ( https://github.com/ev-map/EVMap ) with OCM as data source since it's much faster than OCMs official app. This is how they do it:

And as we zoom in:

The details of how it's done (trigger points for smaller clusters and then to show the chargers, how many changers you need for clusters to be used, etc) can be tweaked as needed. And we can still pass useful information to the user by, for example, using different colors for clusters where fast chargers are available (just an example, if that's something that you want to highlight).

On top of the performance benefits, this would be useful when the 500 charger limit is reached: instead of seeing empty areas, the user would see a cluster and be aware that there's something there.

webprofusion-chrisc commented 1 year ago

Thanks, yes we currently use MapBox GL for our mapping and may move to MapLibre, the main constraint is just time and effort to look at what needs to be done. In particular any clustering needs to allow use to dynamically load the clustered layer as a subset of the overall data set based on the users viewing window/box.

The current implementation just gets the current result set and adds any additional markers not yet plotted, so it doesn't scale well when browsing busy areas. I had hoped someone would take an interest over the last 8 years since this version of the app was revamped, but nobody has :)