1 files changed, 47 insertions, 40 deletions
diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
index 0ee7d3c..8041d43 100644
--- a/layouts/shortcodes/map.html
+++ b/layouts/shortcodes/map.html
@@ -1,50 +1,57 @@
 <div class="section">
     <div id="map" style="width: 100%; height: 40em;"></div>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
+    <script type="text/javascript">
+        /* smoothstate-loaded pages do not trigger the DOM ready event */
+        if(typeof $ !== 'undefined' && 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', function() {
-                mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
-                var lon = parseFloat({{ .Get "lon" }}),
-                    lat = parseFloat({{ .Get "lat" }});
-                var map = new mapboxgl.Map({
-                    pitch: 60,
-                    bearing: 45,
-                    container: 'map',
-                    style: 'mapbox://styles/mapbox/basic-v9',
-                    zoom: {{ .Get "zoom" }},
-                    center: [lon, lat]
-                });
-                map.on('load', function() {
-                    var markers = {
-                        "type": "FeatureCollection",
-                        "features": [{
-                            "type": "Feature",
-                            "properties": {
-                                "icon": "fast-food"
-                            },
-                            "geometry": {
-                                "type": "Point",
-                                "coordinates": [lon, lat]
-                            }
-                        }]
-                    };
-                    map.addSource("markers", {
-                        "type": "geojson",
-                        "data": markers
-                    });
-                    map.addLayer({
-                        "id": "markers",
-                        "type": "symbol",
-                        "source": "markers",
-                        "layout": {
-                            "icon-image": "{icon}-15"
+            $.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({
+                pitch: 60,
+                bearing: 45,
+                container: 'map',
+                style: 'mapbox://styles/mapbox/basic-v9',
+                zoom: {{ .Get "zoom" }},
+                center: [lon, lat]
+            });
+            map.on('load', function() {
+                var markers = {
+                    "type": "FeatureCollection",
+                    "features": [{
+                        "type": "Feature",
+                        "properties": {
+                            "icon": "fast-food"
+                        },
+                        "geometry": {
+                            "type": "Point",
+                            "coordinates": [lon, lat]
                         }
-                    });
+                    }]
+                };
+                map.addSource("markers", {
+                    "type": "geojson",
+                    "data": markers
+                });
+                map.addLayer({
+                    "id": "markers",
+                    "type": "symbol",
+                    "source": "markers",
+                    "layout": {
+                        "icon-image": "{icon}-15"
+                    }
                 });
             });
-        });
+        }
     </script>
     </div>