1 files changed, 66 insertions, 34 deletions

diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
index 833e084..17eab91 100644
--- a/layouts/shortcodes/map.html
+++ b/layouts/shortcodes/map.html
@@ -1,53 +1,85 @@
 <div class="section">
     <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 mapboxgl !== 'undefined') {
-            showMap();
-        } else {
-            document.addEventListener("DOMContentLoaded", loadMapbox);
+        var map,
+            mapboxReadyAttached;
+
+        if (typeof $ === 'undefined') {
+            document.addEventListener('DOMContentLoaded', loadMapbox);
+        }
+        if (typeof mapboxReadyAttached === 'undefined') {
+            mapboxReadyAttached = true;
+            document.addEventListener('pageReady', 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);
+            if ($('#mapview').length == 0) return; // map is inactive
+
+            if (typeof mapboxgl === 'undefined') {
+                console.log('loading mapbox files');
+                $('<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.23.0/mapbox-gl.js', initMapbox);
+            } else {
+                console.log('mapbox files already present');
+                initMapbox();
+            }
         }
-        function showMap() {
-            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+
+        function initMapbox() {
+            console.log('creating new map instance');
             var lon = parseFloat({{ .Get "lon" }}),
                 lat = parseFloat({{ .Get "lat" }}),
-                zoom =parseFloat({{ .Get "zoom" }});
+                zoom= parseFloat({{ .Get "zoom" }});
+
+            if (typeof map !== 'undefined') {
+                console.log('killed old map');
+                map.remove();
+            }
 
-            window.map = new mapboxgl.Map({
+            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+            map = new mapboxgl.Map({
                 pitch: 60,
                 bearing: 45,
                 container: 'mapview',
                 style: 'mapbox://styles/mapbox/basic-v9',
-                zoom: zoom,
-                center: [lon, lat]
+                center: [lon, lat],
+                zoom: zoom
             });
+            map.on('load', showMapbox);
+        }
 
-            window.map.on('load', function() {
-                var markers = {
-                    "type": "FeatureCollection",
-                    "features": [{
-                        "type": "Feature",
-                        "properties": {
-                            "icon": "fast-food"
-                        },
-                        "geometry": {
-                            "type": "Point",
-                            "coordinates": [lon, lat]
-                        }
-                    }]
-                };
-                window.map.addSource("markers", {
-                    "type": "geojson",
-                    "data": markers
+        function showMapbox() {
+            var lon = parseFloat({{ .Get "lon" }}),
+                lat = parseFloat({{ .Get "lat" }}),
+                zoom= parseFloat({{ .Get "zoom" }});
+
+            console.log('updating map data', [lon, lat, zoom]);
+
+            map.setCenter([lon, lat]);
+            map.setZoom(zoom);
+
+            var markers = {
+                "type": "FeatureCollection",
+                "features": [{
+                    "type": "Feature",
+                    "properties": {
+                        "icon": "fast-food"
+                    },
+                    "geometry": {
+                        "type": "Point",
+                        "coordinates": [lon, lat]
+                    }
+                }]
+            };
+
+            if (!map.getSource('markers')) {
+                map.addSource('markers', {
+                    'type': 'geojson',
+                    'data': markers
                 });
-                window.map.addLayer({
+                map.addLayer({
                     "id": "markers",
                     "type": "symbol",
                     "source": "markers",
@@ -55,7 +87,7 @@
                         "icon-image": "{icon}-15"
                     }
                 });
-            });
+            }
         }
     </script>
     </div>