Loading a map on an inactive tab

General
1

Hi, l’m loving the potential of Epic Maps so far and the integration with Finsweet.

I currently am testing an implementation using Webflow tabs where the default tab is full page listings and the second tab is the Map view.

This worked with Jetboost but when integrating with Epic Maps the doesn’t load full size and instead with a fixed width of 400px by 300px.

Any ideas of how I could trigger Mapbox to resize when switching to this tab?

Thanks

2

Hey @TDaley! Yes, I’m currently working on a native solution for Webflow’s tabs. The problem lies in the fact that the content within the tabs isn’t rendered until that tab is opened but the map’s size is determined by it’s container, which at that point hasn’t loaded, so it sets it to it’s fallback size.

In the meantime, before the native solution is ready, you can add this additional script to your page/site’s custom code and add the attribute ‘epic-map-resize’ (doesn’t need a value) to the tab link for the tab that contains the map. If you continue to have issues, just let me know!

<script>
    /* epicmaps resize on click */
    var epic = typeof(epic) !== 'object' ? {} : epic;
    epic.map = !epic.hasOwnProperty('map') ? {} : epic.map;
    epic.map.resize = () => {
        document.querySelectorAll('[epic-map-resize]').forEach((element) => {
            element.addEventListener('click', () => {
                for(let i = 0; i < 10; i++) {
                    setTimeout(() => {
                        for(instance in epic.map.instances) {
                            epic.map.instances[instance].map.forEach((mapData) => {
                                mapData.map.resize()
                            })
                        }
                    }, (i * 100))
                }
            })
        })
    }
    document.addEventListener('DOMContentLoaded', epic.map.resize)
</script>
1 Like