Map does not center and not zoom to content when first hidden

  • Resolved microteq

    (@microteq)


    1 year, 4 months ago

    Hi

    I use the Weecommerce tab component with four tabs. Behind the third tab there is a Waymark map, which is hidden at the beginning, because not being the first tab.

    When I open the third tab (containing the map), on mobile phones, the map is not centered and not zoomed to the content of the map, but always set to its default value (min. zoom, position 0/0). If I scroll the map out of the screen and then scroll it again into the view area, it immediately begins to render correctly.

    If I set the map behind the first tab, which is immediately displayed when the page is loaded, it works, too.

    Does anyone have an idea how to solve this?

    Many thanks.

    Daniel.

    • This topic was modified 1 year, 4 months ago by microteq.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Joe

    (@morehawes)

    1 year, 3 months ago

    Hi @microteq,

    Could you provide a link to the page in question?

    Cheers,

    Joe

    Thread Starter microteq

    (@microteq)

    1 year, 3 months ago

    Hi Joe

    The link to reproduce is: https://www.hikingticino.com/produkt/monte-caslano.

    You can reproduce by using your mobile phone (I use an Android one), scrolling down to the tab component and selecting the tab ‘Karte’ (map).

    Many thanks and best rergards.

    Daniel.

    Plugin Author Joe

    (@morehawes)

    1 year, 3 months ago

    Hi Daniel,

    Try adding the following JavaScript to your site, which should reset the Map view every time your “Karte” link is clicked:

    <script>
jQuery('#tab-title-map_tab').on('click', function() {
  let Waymark = jQuery('#tab-map_tab .waymark-map').data('Waymark');

  if(typeof Waymark === 'object') {
    var bounds = Waymark.map_data.getBounds();
    if(bounds.isValid()) {
      Waymark.map.fitBounds(bounds);
    }
  }
});
</script>

    I hope this helps.

    Cheers,

    Joe

    Thread Starter microteq

    (@microteq)

    1 year, 3 months ago

    Ho Joe

    Many thanks for this script!

    Unfortunately, it does not change anything. The fitBounds function is executed correctly, when hitting the ‘Map’ tab, but the behaviour is the same. Just for testing, I have also tried using a delay of 1 sec (because the fitBounds function is called, before the map tab is displayed), but is does not help, too.

    Is there eventually another option?

    Many thanks and best regards.

    Daniel.

    Plugin Author Joe

    (@morehawes)

    1 year, 3 months ago

    Hi Daniel,

    I have released version 0.9.28.2 which I believe will resolve this issue. Please let me know if this is not the case.

    Cheers,

    Joe

    Thread Starter microteq

    (@microteq)

    1 year, 3 months ago

    Hi Joe

    With your new Update, this works perfectly, even without the scriptlet.

    I cannot repeat enough, how I appreciate the great job you do!

    Many thanks and best regards.

    Daniel.

    Plugin Author Joe

    (@morehawes)

    1 year, 3 months ago

    I’m glad that did the trick 🙂

    Joe

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Map does not center and not zoom to content when first hidden’ is closed to new replies.