search

maplibre / maplibre-gl-js

MapLibre GL JS - Interactive vector tile maps in the browser
https://maplibre.org/maplibre-gl-js/docs/
Other
6.6k stars 710 forks source link

High-definition sprites significantly increase memory usage and crash on mobile devices #4153

Open lxup opened 5 months ago

lxup commented 5 months ago

Steps to Trigger Behavior

  1. Use maplibre/martin with high definition svg (for example 500x500)
  2. Add your tiles and sprites to your app with maplibre-gl-js
  3. Check result on mobile

Expected Behavior

Having high definition sprites without blur and pixelization and working on mobile and desktop.

Actual Behavior

I have been facing an issue for several weeks with Maplibre regarding the use of custom sprites. For context, I use maplibre/martin to host my sprites and tiles. However, I need high-definition sprites because this is a completely fictional map with illustrations. When the sprites are too small, they become blurry and pixelated. Increasing their resolution works on desktop, but the tab's memory usage is around 2GB, which is huge. Btw the final sprites.png is around 9kx9k definition and around 3mo.

On mobile:

How can I solve this problem? I don't understand why using larger images increases memory usage so much. What sprite size do you recommend for good quality without causing memory issues? Additionally, some sprites contain text, which complicates things further. One more detail to explain why I need high definition: the size of my symbols is proportional to the zoom level. So, when zooming in, the symbols also scale up, and vice versa (like on a paper map).

Thank you for your help.

HarelM commented 5 months ago

In theory, you can create different sprites for mobile and desktop to workaround this issue. You can alternatively use html markers to have the browser solve this memory issue. You can use the styleimagemissing to only load images that are being used, which might reduce performance a bit, but should help with memory. The sprites are used in webgl and this is probably the reason for that. Symbols should be small in general - 64-128 pixels I think. 500x500 for each symbol is very big, even for regular websites.

I think you have a lot a ways to worksround this, I don't know if this can be easily solved inside this library, but you are sure welcome to try. :-)