From 1d13524bf623469daeb5c4f26bbb8269213ad710 Mon Sep 17 00:00:00 2001
From: schneefux <schneefux+commit@schneefux.xyz>
Date: Sun, 21 Aug 2016 18:47:04 +0200
Subject: add shortcodes: map, rating

---
 layouts/shortcodes/map.html | 50 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 layouts/shortcodes/map.html

(limited to 'layouts/shortcodes/map.html')

diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
new file mode 100644
index 0000000..0ee7d3c
--- /dev/null
+++ b/layouts/shortcodes/map.html
@@ -0,0 +1,50 @@
+<div class="section">
+    <div id="map" style="width: 100%; height: 40em;"></div>
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            $('<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"
+                        }
+                    });
+                });
+            });
+        });
+    </script>
+    </div>
-- 
cgit v1.3.1