Inner map tile is not set up correctly in full-width mode

[liqueurdetoile]

Hi,

Thanks for this great plugin.

On a currently in-dev site (using Hestia theme), I'm willing to load a full-width map on a page by using the dedicated option from block toolbar.

On frontend, the container is well updated to expand to full-width through negative left/right margins but the inner map tile is stuck to initial width and there's a grayed empty area.

If I force a new rendering, by resizing window for instance, map tile expands correctly to fill all container.

Is it fixable ?

Thanks !

[goiblas]

Can you write the url of the site where it happens or it is locally?

Maybe the theme uses javascript for full-width, I'll try to install it

[liqueurdetoile]

Thx for replying and merry Xmas !

Site is not online yet. I've checked on Hestia theme and full-width is achieved programmatically : See https://github.com/Codeinwp/hestia/blob/10493f97b2128cc99a546a3dee8a0ba0d5a7bf2d/assets/js/src/scripts.js#L625

First resizing is handled on $(document).ready. I'm not very accustomed to Leaflet initial rendering but I saw this thread on SO. Maybe a hint ?

[goiblas]

You are right, we need to wait for javascript. I've had a similar problem in other themes, and that's why the plugin observes the loading class of the body, try adding the following code.

add_filter( 'body_class', function( $classes ) {
    $classes[] = 'loading';

    return $classes;
} );

add_action( 'wp_print_footer_scripts', function () { 
    ?>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            setTimeout(function(){
                document.body.classList.remove("loading");
            });
        });
    </script>
<?php 
} );

You can add it in the function.php of a child theme or using a plugin like code Snippets

[liqueurdetoile]

Okay. I see the trick though it's quite hacky 😄. Thanks a lot.

Eventually, what about implementing resize observer on container ? It's widely supported now.

In a more minimalist way, a check on alignfull class on container to trigger a timed out invalidateSize on map can surely be more straightforward.

I'm also thinking of exposing initialized maps in a global var like described in this SO thread for weird and unpredictable purposes. Not sure if it's a good idea as it can be a security threat (I'm not used to leaflet internals). It's also bringing more pollution to global namespace which is not a great idea most of the time.

I may help with a PR on some parts if u think it's worthy.

[goiblas]

Good idea to use resize observer, feel free to make a pull request