map shortcode -> theme

1 files changed, 155 insertions, 0 deletions

diff --git a/themes/flog/layouts/_default/single.html b/themes/flog/layouts/_default/single.html
index b9165d7..13b62d5 100644
--- a/themes/flog/layouts/_default/single.html
+++ b/themes/flog/layouts/_default/single.html
@@ -27,6 +27,161 @@
                 <section itemprop="articleBody" class="flow-text">
                     {{ .Content }}
                 </section>
+                {{ if .Params.mapzoom }}
+                <div class="section">
+                    <div id="loadingmap" class="preloader-wrapper small active" style="left: 45%;">
+                        <div class="spinner-layer spinner-blue-only">
+                            <div class="circle-clipper left">
+                                <div class="circle"></div>
+                            </div><div class="gap-patch">
+                                <div class="circle"></div>
+                            </div><div class="circle-clipper right">
+                                <div class="circle"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="mapview" style="width: 100%; height: 40em;"></div>
+                    <script type="text/javascript">
+                        var map,
+                            mapboxReadyAttached;
+
+                        if (typeof $ === 'undefined') {
+                            document.addEventListener('DOMContentLoaded', loadMapbox);
+                        }
+                        if (typeof mapboxReadyAttached === 'undefined') {
+                            mapboxReadyAttached = true;
+                            document.addEventListener('pageReady', loadMapbox);
+                        }
+
+                        function loadMapbox() {
+                            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 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({{ .Params.longitude }}),
+                                lat = parseFloat({{ .Params.latitude }}),
+                                zoom= parseFloat({{ .Params.mapzoom }});
+
+                            if (typeof map !== 'undefined') {
+                                console.log('killed old map');
+                                map.remove();
+                            }
+
+                            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+                            map = new mapboxgl.Map({
+                                pitch: 60,
+                                bearing: 45,
+                                container: 'mapview',
+                                style: 'mapbox://styles/mapbox/basic-v9',
+                                center: [lon, lat],
+                                zoom: zoom
+                            });
+                            map.on('load', showMapbox);
+                        }
+
+                        function initFallback() {
+                            console.log('creating new map fallback instance');
+                            var lon = parseFloat({{ .Params.longitude }}),
+                                lat = parseFloat({{ .Params.latitude }}),
+                                zoom= parseFloat({{ .Params.mapzoom }});
+                            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({{ .Params.longitude }}),
+                                lat = parseFloat({{ .Params.latitude }}),
+                                zoom= parseFloat({{ .Params.mapzoom }});
+
+                            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
+                                });
+                                map.addLayer({
+                                    "id": "markers",
+                                    "type": "symbol",
+                                    "source": "markers",
+                                    "layout": {
+                                        "icon-image": "{icon}-15"
+                                    }
+                                });
+                            }
+                            $('#loadingmap').hide();
+                            $('#mapview').show();
+                        }
+
+                        function showFallback() {
+                            var lon = parseFloat({{ .Params.longitude }}),
+                                lat = parseFloat({{ .Params.latitude }}),
+                                zoom= parseFloat({{ .Params.mapzoom }});
+
+                            console.log('updating fallback map data', [lon, lat, zoom]);
+                            map.setView([lat, lon], zoom);
+                            L.marker([lat, lon]).addTo(map);
+                            $('#loadingmap').hide();
+                            $('#mapview').show();
+                        }
+                    </script>
+                </div> <!-- /map section -->
+                {{ end }}
             </article>
         </main>
     </div>