Hey team,

I am trying to display the map in a modal but am having an issue with the map displaying incorrectly. If I resize the screen the map adjusts and displays as expected. I have seen in forums this is a common issue with a fix being to call map.invalidateSize().

To execute this I am listening for the click event of the modal opening button and calling the invalidateSize() function with a setTimeout().

x-on:click.window='setTimeout(function(){map.invalidateSize()}, 20);'

I am using AlpineJS to create the modal component.

This doesn't do the trick and I am receiving this js error - Uncaught ReferenceError: map is not defined at eval.

Looks like I'm not getting the Leaflet map instance, any ideas on how I can get this working?

Cheers.

Cy

Hi Cy,

Depending on what component you are using, you have to use a different object.

By default, this should work:

List markers

x-on:click.window='setTimeout(function(){listMarkersMapMap.invalidateSize()}, 20);'

Map with single marker

x-on:click.window='setTimeout(function(){singleMarkerMapMap.invalidateSize()}, 20);'

Leaflet map

x-on:click.window='setTimeout(function(){leafletmapMap.invalidateSize()}, 20);'

With alias

If you give other aliases to components then you should use them to do this function.

x-on:click.window='setTimeout(function(){aliasNameMap.invalidateSize()}, 20);'

Cheers,

inIT

Hey team,

That makes sense - worked perfectly!

Thank you so much.

Cheers,

Cy