1

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...

ghybs
  • 47,565
  • 6
  • 74
  • 99
solidau
  • 4,021
  • 3
  • 24
  • 45

1 Answers1

0

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

ghybs
  • 47,565
  • 6
  • 74
  • 99
  • I ended up doing this... it was pretty lame because I actually have multiple nesting levels, not shown in the example - works great though, thanks! – solidau Feb 16 '21 at 23:41
  • 1
    Thank you for your feedback! In case there is a difficulty in referencing the map object in the callback of the event, you can also try firing a global window resize event, as described in https://stackoverflow.com/a/46713117/5108796 – ghybs Feb 17 '21 at 02:13
  • ahh, cool... another technique to add to my arsenal :) – solidau Feb 25 '21 at 18:44