<MglImage> and Dynamic Image Loading

[julienmey21]

Hello everyone,

I am building a social map.
I've successfully displayed users' thumbnails on the map using MglImage, MglGeoJsonSource, and MglSymbolLayer. I have working clustering logic, thumbnails, and so on — everything is functioning well.

However, I’ve run into a scalability issue: MglImage loads all thumbnails at once when the map loads, which isn’t feasible with thousands of users.

To work around this, I tried implementing bounds-based filtering and lazy loading of thumbnails. This mostly works, but I run into this error:

chunk-MHYDEVXG.js?v=ebac5411:274 Image "374" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
Map.vue:397 

I’ve tried to use MglImage dynamically, but without success. Has anyone implemented lazy image loading for images?
I'd appreciate any guidance or examples.
Thank you very much 🙏

[francois2metz]

Hi,

I believe your use case is not possible right now. To load image dynamically, you should listen to the styleimagemissing event and load the image in the callback. See https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/#styleimagemissing.

[julienmey21]

Thank you @francois2metz , I managed to add a default avatar (using the first letter of the username) when a user's thumbnail is missing, following this example:
https://maplibre.org/maplibre-gl-js/docs/examples/add-image-missing-generated/

However, for thumbnails from external URLs hosted on my CDN, I still see the warning in the browser. That said, everything works well and runs smoothly, so I think I’ll just leave it as is.

[francois2metz]

This is because you have to load image synchronously, which is not possible for remote images.
You may prepare a sprite of remote images or something similar.