How to detect map container resize due to slow loading image?

Question

I am creating an app with a Leaflet map in Nuxt using Vue2Leaflet plugin.

I am having a problem though: I am using Bootstrap columns to size the map and accompanying image, but the image loads too slow (this cannot be resolved at this time), so the container is not the proper size when the map loads.

This causes the map to be half grey. I have attempted to call map.invalidateSize() in the mounted event, but even that must be happening before the image finishes loading.

I have setup a sandbox at: https://codesandbox.io/s/eager-bohr-c3453?file=/src/App.vue

In order to see the bug, you have to view the rendered app at https://c3453.csb.app/ (the internal codesandbox render does not show the problem)

I think I need some way to wait until the image has completed loading (so the BS col is the proper size), then call map.invalidateSize(), but I am not sure how...

Answer 1

You can attach an onload listener on your <img>, so that you can call (again?) your Leaflet map invalidateSize() method.