Issue: “Leaflet-map” into “Spectra Tabs Block”

  • Resolved vilarik

    (@vilarik)


    1 year, 11 months ago

    Hello,

    I’m using “Spectra – WordPress Gutenberg Blocks Plugin” and I have an issue.

    If I put the “Leaflet-map” short code in a “Spectra Tabs block” then “Leaflet-map” won’t load the map tiles (while other blocks are not a problem and I’ve tested the problem with different themes).

    Also I found that if I resize the window or scroll the page it helps and the “Leaflet map” starts loading tiles and works properly after that (until I reload a page).

    PS I understand that this may not be the wrong behavior of “Leaflet-Map” and my issue has to be addressed Spectra.

    • This topic was modified 1 year, 11 months ago by vilarik.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor hupe13

    (@hupe13)

    Leaflet Map must know where the map is and its dimensions when it loads. This does not work with tabs. But there is a block for Google Maps in Spectra. It works in tabs. Ask Spectra to provide a block for Leaflet Map. Maybe it is possible.

    Thread Starter vilarik

    (@vilarik)

    @hupe13 Thank you for the answer. I will ask Spectra to check the issue.

    I think Spectra Tabs has some type of lazy load function and “Leaflet map” is not init properly. Can you provide me some string of JS code to restart “Leaflet map” instance from my JS code?

    • This reply was modified 1 year, 11 months ago by vilarik.
    Plugin Contributor hupe13

    (@hupe13)

    It may be an approach, but not a solution. It does not work with all elements. Write as a html block in every tab:

    <script>
function tabresize() {
  setTimeout(function () {
    window.dispatchEvent(new Event('resize'));
  }, 1000);
}
thisdiv = document.querySelector(".uagb-inner-tab-x");
new ResizeObserver(tabresize).observe(thisdiv)
</script>

    For .uagb-inner-tab-x write .uagb-inner-tab-0, .uagb-inner-tab-1 etc.

    Thread Starter vilarik

    (@vilarik)

    Hi @hupe13,

    I have tested your solution. It works but the issue is resolved partly.

    I checked other plugins and found “Kadence Blocks Tabs” works correctly with “Leaflet-Map”. – FYI

    I choose to use “Cadence Blocks Tabs” approach as a more simple way to fix my issue.

    Good luck, and thank you for brilliant support

    Plugin Contributor hupe13

    (@hupe13)

    I’m glad you found a solution. There is a lot to consider with Leaflet Map and the Extensions, when, where and how what is loaded. There are different technologies and especially events. It is not trivial.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Issue: “Leaflet-map” into “Spectra Tabs Block”’ is closed to new replies.