Thought I would have a little play and see how Terratype is. Love all the improvements in Config compared the AngularGoogleMaps. It's a huge jump.
Have run into a small problem, in that the renderer seems to leave my maps permanently hidden. I've looked in the Terratype.Renderer.js file and seen that it's the lines 410 and 411 that are doing this.
else if (newValue == 0 && show == true) {
console.log('B ' + m.id + ': in viewport = ' + visible + ', showing = ' + show);
// Was shown, now being hidden
document.getElementById(m.div).style.display = 'none';
m.visible = false;
}
As a test I commented them out and boom, map's right there.
Not sure if I'm missing something or if it's a bug.
I'm using Terratype v1.0.6 from the Our zip file.
Umbraco is v7.5.8, and I'm using Chrome v56.0.2924.87.
I'm sorry that my code is going wrong, strangle as that code is some old code from AngularGoogleMaps and is when the map thinks its not been shown, eg when you switch tab or close an archetype, it hides itself to stop google map from doing stuff and I'm using the same code for rendering frontend as well as backend, which is why this is present in the frontend + maybe your doing something similar on the frontend.
The following code, has got a value of 0, which from the sound of it, it shouldn't
var newValue = element.parentElement.offsetTop;
If you have time is it possible to post either a snippet of html, preferably from after the browser has rendered (eg. View source). Feel free to remove anything personal/confidential, what I'm after is the structure of the DOM, from the body tag to the Terratype div, so any actual paragraph text is not required.
Like
<html>
<head>
<title>Single 1</title>
</head>
</html>
<body>
Jquery is False
<fieldset>
<legend>
Map 1
</legend>
<div id="pretend-accordion" style="display:none;">
<div style="height:1000px;background-color:antiquewhite;text-align:center;vertical-align:central;">
This is an empty div
</div>
<div class="Terratype">
<div data-markerclusterer-url="/App_Plugins/Terratype.GoogleMapsV3/images/m" data-googlemapsv3="%7b%22provider%22%3a%7b%22id%22%3a%22Terratype.GoogleMapsV3%22%2c%22version%22%3a%223%22%2c%22apiKey%22%3a%22AIzaSyDgDMNDosh0KjEaSiEickUOiTqp6vY1AMc%22%2c%22forceHttps%22%3atrue%2c%22language%22%3a%22%22%2c%22predefineStyling%22%3a%22retro%22%2c%22showRoads%22%3atrue%2c%22showLandmarks%22%3atrue%2c%22showLabels%22%3atrue%2c%22styles%22%3a%5b%7b%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23ebe3cd%22%7d%5d%7d%2c%7b%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23523735%22%7d%5d%7d%2c%7b%22elementType%22%3a%22labels.text.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23f5f1e6%22%7d%5d%7d%2c%7b%22featureType%22%3a%22administrative%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23c9b2a6%22%7d%5d%7d%2c%7b%22featureType%22%3a%22administrative.land_parcel%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23dcd2be%22%7d%5d%7d%2c%7b%22featureType%22%3a%22administrative.land_parcel%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23ae9e90%22%7d%5d%7d%2c%7b%22featureType%22%3a%22landscape.natural%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23dfd2ae%22%7d%5d%7d%2c%7b%22featureType%22%3a%22poi%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23dfd2ae%22%7d%5d%7d%2c%7b%22featureType%22%3a%22poi%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%2393817c%22%7d%5d%7d%2c%7b%22featureType%22%3a%22poi.park%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23a5b076%22%7d%5d%7d%2c%7b%22featureType%22%3a%22poi.park%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23447530%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23f5f1e6%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.arterial%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23fdfcf8%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23f8c967%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23e9bc62%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway.controlled_access%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23e98d58%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.highway.controlled_access%22%2c%22elementType%22%3a%22geometry.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23db8555%22%7d%5d%7d%2c%7b%22featureType%22%3a%22road.local%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23806b63%22%7d%5d%7d%2c%7b%22featureType%22%3a%22transit.line%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23dfd2ae%22%7d%5d%7d%2c%7b%22featureType%22%3a%22transit.line%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%238f7d77%22%7d%5d%7d%2c%7b%22featureType%22%3a%22transit.line%22%2c%22elementType%22%3a%22labels.text.stroke%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23ebe3cd%22%7d%5d%7d%2c%7b%22featureType%22%3a%22transit.station%22%2c%22elementType%22%3a%22geometry%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23dfd2ae%22%7d%5d%7d%2c%7b%22featureType%22%3a%22water%22%2c%22elementType%22%3a%22geometry.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%23b9d3c2%22%7d%5d%7d%2c%7b%22featureType%22%3a%22water%22%2c%22elementType%22%3a%22labels.text.fill%22%2c%22stylers%22%3a%5b%7b%22color%22%3a%22%2392998d%22%7d%5d%7d%5d%2c%22variety%22%3a%7b%22basic%22%3afalse%2c%22satellite%22%3afalse%2c%22terrain%22%3atrue%2c%22selector%22%3a%7b%22type%22%3a1%2c%22position%22%3a2%7d%7d%2c%22streetView%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22fullscreen%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22scale%22%3a%7b%22enable%22%3afalse%2c%22position%22%3a0%7d%2c%22zoomControl%22%3a%7b%22enable%22%3atrue%2c%22position%22%3a8%7d%2c%22search%22%3anull%7d%2c%22position%22%3a%7b%22Id%22%3a%22WGS84%22%2c%22datum%22%3a%2244.615732%2c4.336388%22%7d%2c%22icon%22%3a%7b%22id%22%3a%22greenmarker%22%2c%22url%22%3a%22https%3a%2f%2fmt.google.com%2fvt%2ficon%3fpsize%3d30%26font%3dfonts%2farialuni_t.ttf%26color%3dff304C13%26name%3dicons%2fspotlight%2fspotlight-waypoint-a.png%26ax%3d43%26ay%3d48%26text%3d%25E2%2580%25A2%22%2c%22size%22%3a%7b%22width%22%3a22%2c%22height%22%3a43%7d%2c%22anchor%22%3a%7b%22horizontal%22%3a%22center%22%2c%22vertical%22%3a%22bottom%22%7d%7d%2c%22zoom%22%3a5%2c%22lookup%22%3anull%2c%22label%22%3anull%2c%22height%22%3a0%7d" data-map-id="m65536" data-label-id="Terratype0480ce34-522a-4ed9-8718-b72e1a53e58f" data-id="Terratype.GoogleMapsV36064e7c3-72ba-4a9e-9b77-660c65e6e1e9" class="Terratype.GoogleMapsV3" style="display:none;">
<script src="/App_Plugins/Terratype.GoogleMapsV3/scripts/Terratype.Renderer.js?cache=1.0.7" defer="">
</script><script src="/App_Plugins/Terratype.GoogleMapsV3/scripts/markerclusterer.min.js?cache=1.0.7" defer="">
</script><script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=TerratypeGoogleMapsV3CallbackRender&key=AIzaSyDgDMNDosh0KjEaSiEickUOiTqp6vY1AMc" defer="">
</script><div id="Terratype.GoogleMapsV36064e7c3-72ba-4a9e-9b77-660c65e6e1e9" style="height:400px;">
</div>
</div><div style="display:none;">
<div id="Terratype0480ce34-522a-4ed9-8718-b72e1a53e58f">
<p>This is some text</p>
<p>line 2</p>
<p><strong>and some bold text</strong></p>
<p><em>and italic</em></p>
</div>
</div>
</div>
<div style="height:1000px;background-color:antiquewhite;text-align:center;vertical-align:central;">
This is an empty div
</div>
</div>
<button onclick="var a = document.getElementById('pretend-accordion');a.style.display = (a.style.display=='none') ? 'block':'none'">Show/Hide Map</button>
</fieldset>
</body>
That makes perfect sense. It did have an offset value of zero.
The position of the map was right at the top of the page. I was going for a full width map page header. I quickly added some padding to the body and added back in the commented out lines and it worked it.
I suppose this is a bit of an edge case, as I don't know how many people would intentionally be creating a map with a offsetTop of 0.
Map always set to display none
Thought I would have a little play and see how Terratype is. Love all the improvements in Config compared the AngularGoogleMaps. It's a huge jump.
Have run into a small problem, in that the renderer seems to leave my maps permanently hidden. I've looked in the Terratype.Renderer.js file and seen that it's the lines 410 and 411 that are doing this.
As a test I commented them out and boom, map's right there.
Not sure if I'm missing something or if it's a bug.
I'm using Terratype v1.0.6 from the Our zip file. Umbraco is v7.5.8, and I'm using Chrome v56.0.2924.87.
Any help would be hugely helpful.
Hi Anthony,
I'm sorry that my code is going wrong, strangle as that code is some old code from AngularGoogleMaps and is when the map thinks its not been shown, eg when you switch tab or close an archetype, it hides itself to stop google map from doing stuff and I'm using the same code for rendering frontend as well as backend, which is why this is present in the frontend + maybe your doing something similar on the frontend.
The following code, has got a value of 0, which from the sound of it, it shouldn't
If you have time is it possible to post either a snippet of html, preferably from after the browser has rendered (eg. View source). Feel free to remove anything personal/confidential, what I'm after is the structure of the DOM, from the body tag to the Terratype div, so any actual paragraph text is not required.
Like
Cheers
Jonathan
Ah!
That makes perfect sense. It did have an offset value of zero.
The position of the map was right at the top of the page. I was going for a full width map page header. I quickly added some padding to the body and added back in the commented out lines and it worked it.
I suppose this is a bit of an edge case, as I don't know how many people would intentionally be creating a map with a offsetTop of 0.
is working on a reply...