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?
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 ?
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.
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
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
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.
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.
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
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.
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
Hi David,
FYI: I have released a new version of Terratype 1.0.13, that hopefully attempts to solve your issue.
Cheers
Jonathan
is working on a reply...