Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David Houghton 33 posts 108 karma points
    May 17, 2017 @ 12:37
    David Houghton
    0

    Tabbed maps contents are grey'd out on load, scroll away and come back... visible...

    Having a really strange issue with the terratype map, its contained within a tabbed section and not immediately visible on page load.

    When clicking the tab, the map shows, but is all greyed out, if you scroll the window away from the map and scroll back its almost like the some init function is fired and the maps contents become visible?

    Could someone please help me trace the root of this issue and help me work around it?

    Thanks in advance.

  • Jonathan Richards 288 posts 1742 karma points MVP
    May 17, 2017 @ 12:52
    Jonathan Richards
    0

    Hi David,

    Could you answer is where is this map located, is it in the backend of Umbraco (Content node or Grid control, if its a content node is it inside any complex control types like Nested Content or Archetype) or is this on a Razor template of your own creation.

    I'm guessing this is using Google Maps ? (I doesn't seem anyone ever uses Bing or Leaflet yet)

    Which browser is this, have you tried other browsers ?

    A screenshot would be lovely, but if its your own razor template I might need a snippit of code, either html or razor so I can try and replicate your situation.

    Do you have any console errors being logged in the browser ?

    Cheers

    Jonathan

  • David Houghton 33 posts 108 karma points
    May 17, 2017 @ 13:27
    David Houghton
    0

    Hi Jonathan

    the map is located on a content node for a venue, this venue node is a pickable item using a multinode tree picker and is rendered out on a razor template of my own creation.

    It is using Google maps, apologies, I should have mentioned that.

    On the template I have a tabbed section, one of those tabs is for the venue, the tabbed container contains the map but is hidden initially, when you click the tab, the map container is there... but is initially greyed out.

    Greyed out map

    However if I scroll up / down the page and take the map out of the viewport, then bring it back in it pops into view.

    Currently testing on chrome however the same displays in all browsers.

    Update: no errors are being logged into the console.

  • Jonathan Richards 288 posts 1742 karma points MVP
    May 17, 2017 @ 15:36
    Jonathan Richards
    0

    Hi,

    Google Maps out of the box has no handling for google maps being placed on tabs or collapsible elements, and I've got a bit of code being ran when you render the map to try and guess when you expose and hide google maps. This code isn't 100% fool-proof, the main reason is that there is no end of combinations of things you can do in your own html code.

    One gotcha that has caught out others is that the parent element of the map has an offset of zero

    https://github.com/Joniff/Terratype/blob/master/src/Terratype.GoogleMapsV3/App_Plugins/Terratype.GoogleMapsV3/Scripts/Terratype.GoogleMapsV3.Renderer.js#L405

    which makes the map think its currently hidden. If you add an html element above the map but inside the same container as the map, this can help.

    Ultimately, the code tries its best, but sadly it is failing; if you can place a break point on line 404 of Terratype.GoogleMapsV3.Renderer.js and see what state it thinks your tabs are, I might be able to help change this function, though I'm very wary of changing it as it is the same code that is working on the backend of Umbraco and detecting when people are hiding and showing maps via Angular - and cross fingers - is working 100%.


    If you are using only jQuery to manipulate your front end you can switch to using jQuery monitoring instead of javascript

    https://github.com/Joniff/Terratype/blob/master/src/Terratype.GoogleMapsV3/App_Plugins/Terratype.GoogleMapsV3/Scripts/Terratype.GoogleMapsV3.Renderer.js#L25

    Sadly you will have to manually edit your plugin file directly yourself, and beware this is less tested than the javascript monitoring. Though in-principle is better monitoring than my javascript code.

    TL;DR You might need to change the containing html you are placing the map on. Try adding a 1 px height div above it.

    Cheers

    Jonathan

  • Jonathan Richards 288 posts 1742 karma points MVP
    May 21, 2017 @ 16:02
    Jonathan Richards
    0

    Hi David,

    FYI: I have released a new version of Terratype 1.0.13, that hopefully attempts to solve your issue.

    Cheers

    Jonathan

Please Sign in or register to post replies

Write your reply to:

Draft