add mapboxjs fallback

1 files changed, 45 insertions, 0 deletions

diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
index 17eab91..60c42a5 100644
--- a/layouts/shortcodes/map.html
+++ b/layouts/shortcodes/map.html
@@ -27,7 +27,25 @@
             }
         }
 
+        function loadFallback() {
+            if (typeof L === 'undefined') {
+                console.log('loading mapbox fallback files');
+                $('<link>').appendTo('head')
+                    .attr({type: 'text/css', rel: 'stylesheet'})
+                    .attr('href', 'https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.css');
+                $.getScript('https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js', initFallback);
+            } else {
+                console.log('mapbox fallback files already present');
+                initFallback();
+            }
+        }
+
         function initMapbox() {
+            if (mapboxgl.supported() === false) {
+                console.log('MapboxGL unsupported, loading fallback');
+                loadFallback();
+                return;
+            }
             console.log('creating new map instance');
             var lon = parseFloat({{ .Get "lon" }}),
                 lat = parseFloat({{ .Get "lat" }}),
@@ -50,6 +68,23 @@
             map.on('load', showMapbox);
         }
 
+        function initFallback() {
+            console.log('creating new map fallback instance');
+            var lon = parseFloat({{ .Get "lon" }}),
+                lat = parseFloat({{ .Get "lat" }}),
+                zoom= parseFloat({{ .Get "zoom" }});
+            if (typeof map !== 'undefined') {
+                console.log('killed old map for fallback');
+                map.remove();
+            }
+            L.mapbox.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+            map = L.mapbox.map('mapview')
+                .setView([lat, lon], zoom);
+            var layer = L.mapbox.tileLayer('mapbox.streets').addTo(map);
+            layer.on('ready', showFallback);
+        }
+
+        /* ! mapboxgl: [lon, lat] - mapboxjs: [lat, lon]… */
         function showMapbox() {
             var lon = parseFloat({{ .Get "lon" }}),
                 lat = parseFloat({{ .Get "lat" }}),
@@ -89,5 +124,15 @@
                 });
             }
         }
+
+        function showFallback() {
+            var lon = parseFloat({{ .Get "lon" }}),
+                lat = parseFloat({{ .Get "lat" }}),
+                zoom= parseFloat({{ .Get "zoom" }});
+
+            console.log('updating fallback map data', [lon, lat, zoom]);
+            map.setView([lat, lon], zoom);
+            L.marker([lat, lon]).addTo(map);
+        }
     </script>
     </div>