diff options
Diffstat (limited to 'layouts/shortcodes/map.html')
| -rw-r--r-- | layouts/shortcodes/map.html | 45 |
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> |