search

protomaps / protomaps-leaflet

Lightweight vector map rendering + labeling and symbology for Leaflet
https://protomaps.com/docs/frontends/leaflet
BSD 3-Clause "New" or "Revised" License
763 stars 43 forks source link

Super high memory usage when using protomaps-leaflet? #169

Closed grant-beske closed 2 months ago

grant-beske commented 3 months ago

Hi, I am working on a project that involves mapping some data using Leaflet. I recently switched over to protomaps from some other raster tile map providers that were too expensive, and I'm really loving it so far. But there seems to be an issue that might force me to use some other tile provider, which is that the memory usage coming from protomaps-leaflet is extremely high.

When I first load the page / at the default zoom level everything is fine in terms of memory usage. But once I start zooming the map, memory usage spikes drastically. It seems to vary between browsers and OSs. My tab will generally go from ~80MB RAM usage on page load to ~300MB after a bunch of panning and zooming, and in the worst case on Win10 Chrome I've seen it go as high as ~500MB.

Using memory profiler and debugging tools I am able to see that most of the memory comes from certain constructors in protomaps-leaflet. Lots of massive arrays and objects are being created on zoom events (and pan events to a lesser extent). The heap size drastically increases on these events and pushes the page up to super high RAM usage.

This issue is actually reproducible even on the demo pages linked in this repo's readme.md. If you open up the "Simple Leaflet Demo" link and spend a minute scrolling and zooming around NYC, and check the chrome tab RAM usage a few minutes later (it takes a little while to update), RAM usage spikes by hundreds of megabytes.

Is this behavior expected? How might this be mitigated? I am not observing the issue with MapLibre GL JS - based mapping programs, so I'm considering switching mapping libraries, but this will require some pretty major reworkings of my codebase.

My apologies if this is not the correct place to post this. Thanks so much!

grant-beske commented 2 months ago

Still not sure on whether there is some inefficiency here, but I switched my project to use maplibre GL and now things are a lot better in terms of memory usage and performance.

bdon commented 2 months ago

This is expected because all the drawing in this library uses CPU techniques with the Canvas2D API. a WebGL library like MapLibre is going to be much more efficient; this library is mostly for applications that already use Leaflet.