diff options
| author | schneefux <schneefux+commit@schneefux.xyz> | 2016-08-21 18:47:04 +0200 |
|---|---|---|
| committer | schneefux <schneefux+commit@schneefux.xyz> | 2016-08-21 18:47:04 +0200 |
| commit | 1d13524bf623469daeb5c4f26bbb8269213ad710 (patch) | |
| tree | 963495fd9e023d68a91cfed2ff7170fb0b52fca0 /layouts/shortcodes/map.html | |
| parent | 1f824e6ae5ac39d0cefe0244ea9223c1783494f3 (diff) | |
| download | pragblog-1d13524bf623469daeb5c4f26bbb8269213ad710.tar.gz pragblog-1d13524bf623469daeb5c4f26bbb8269213ad710.zip | |
add shortcodes: map, rating
Diffstat (limited to 'layouts/shortcodes/map.html')
| -rw-r--r-- | layouts/shortcodes/map.html | 50 |
1 files changed, 50 insertions, 0 deletions
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> |