fix map sometimes not loading with smoothstate

1 files changed, 14 insertions, 10 deletions

diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
index 8041d43..833e084 100644
--- a/layouts/shortcodes/map.html
+++ b/layouts/shortcodes/map.html
@@ -1,31 +1,35 @@
 <div class="section">
-    <div id="map" style="width: 100%; height: 40em;"></div>
+    <div id="mapview" style="width: 100%; height: 40em;"></div>
     <script type="text/javascript">
         /* smoothstate-loaded pages do not trigger the DOM ready event */
-        if(typeof $ !== 'undefined' && typeof mapboxgl !== 'undefined') {
+        if (typeof mapboxgl !== 'undefined') {
             showMap();
         } else {
             document.addEventListener("DOMContentLoaded", loadMapbox);
         }
+
         function loadMapbox() {
             $('<link>').appendTo('head')
               .attr({type: 'text/css', rel: 'stylesheet'})
               .attr('href', 'https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css');
             $.getScript('https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js', showMap);
-        };
+        }
         function showMap() {
             mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
             var lon = parseFloat({{ .Get "lon" }}),
-                lat = parseFloat({{ .Get "lat" }});
-            var map = new mapboxgl.Map({
+                lat = parseFloat({{ .Get "lat" }}),
+                zoom =parseFloat({{ .Get "zoom" }});
+
+            window.map = new mapboxgl.Map({
                 pitch: 60,
                 bearing: 45,
-                container: 'map',
+                container: 'mapview',
                 style: 'mapbox://styles/mapbox/basic-v9',
-                zoom: {{ .Get "zoom" }},
+                zoom: zoom,
                 center: [lon, lat]
             });
-            map.on('load', function() {
+
+            window.map.on('load', function() {
                 var markers = {
                     "type": "FeatureCollection",
                     "features": [{
@@ -39,11 +43,11 @@
                         }
                     }]
                 };
-                map.addSource("markers", {
+                window.map.addSource("markers", {
                     "type": "geojson",
                     "data": markers
                 });
-                map.addLayer({
+                window.map.addLayer({
                     "id": "markers",
                     "type": "symbol",
                     "source": "markers",