Add OSM map on the Visit Us page

assets/js/site.js

@@ -2,9 +2,13 @@ function titleCase(word) {
     return word.charAt(0).toUpperCase() + word.substr(1).toLowerCase();
 }
 
+// SpaceAPI related calls and data
 $(document).ready(function () {
-    if ($('span#hackspace-status').length) {
-        $.getJSON("https://api.leighhack.org/space.json", function (data) {
+
+    $.getJSON("https://api.leighhack.org/space.json", function (data) {
+
+        // Hackspace status
+        if ($('span#hackspace-status').length) {
             if (data.state.open) {
                 message = '<b>Open<b>'
                 if ('message' in data.state) {
@@ -15,13 +19,11 @@ $(document).ready(function () {
             } else {
                 $('span#hackspace-status').html('<b>Closed</b>');
             }
-        });
-        console.log(atob('aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1IcDdBSVh5UkpwdyAtIERhYm8uLi4u'));
-    }
+            console.log(atob('aHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1IcDdBSVh5UkpwdyAtIERhYm8uLi4u'));
+        }
 
-    // 'printers' shortcode
-    if ($('div#printer-status').length) {
-        $.getJSON("https://api.leighhack.org/space.json", function (data) {
+        // 'printers' shortcode
+        if ($('div#printer-status').length) {
             if (data.sensors.ext_3d_printers.length) {
 
                 // sort the printers
@@ -34,6 +36,42 @@ $(document).ready(function () {
                     $('div#printer-status').append(obj);
                 });
             }
-        });
-    }
+        }
+
+        // 'map' shortcode
+        if ($('div#map').length) {
+            center = ol.proj.fromLonLat([data.location.lon, data.location.lat])
+
+            // Create map
+            const map = new ol.Map({
+                target: document.getElementById('map'),
+                layers: [
+                    new ol.layer.Tile({
+                        source: new ol.source.OSM(),
+                    }),
+                    new ol.layer.Vector({
+                        source: new ol.source.Vector({
+                            features: [new ol.Feature({
+                                geometry: new ol.geom.Point(center),
+                                name: "Leigh Hackspace",
+                            })]
+                        }),
+                        style: new ol.style.Style({
+                            image: new ol.style.Icon({
+                              scale: .06,
+                              anchorXUnits: 'fraction',
+                              anchorYUnits: 'pixels',
+                              src: '../images/rose_logo.svg',
+                            }),
+                          }),
+                    })
+                ],
+                view: new ol.View({
+                    center: center,
+                    maxZoom: 18,
+                    zoom: 13,
+                }),
+            });
+        }
+    });
 });

content/visit.md

@@ -18,6 +18,8 @@ Leigh
 WN7 2LB
 ```
 
+{{< map >}}
+
 What3Words: [//escape.shot.cleansed](https://what3words.com/escape.shots.cleansed) - This is for the main entrance of Mill 2.
 
 The hackspace is located on the **third floor** of Mill 2. Once you reach the third floor, go through the double doors to your right then through the next set of double doors then follow the corridor to your left until you see the signage for the hackspace.

layouts/shortcodes/map.html

@@ -0,0 +1,2 @@
+<div id="map" class="map"></div>
+{{ .Page.Store.Set "hasMap" true }}

themes/lhs/assets/sass/leighhack.scss

@@ -338,3 +338,10 @@ footer {
     }
 }
 
+// -------------------------------------------------------
+// Map layout
+// -------------------------------------------------------
+
+.map {
+	height: 500px;
+}

themes/lhs/layouts/partials/foot.html

@@ -8,6 +8,11 @@
   </script>
 {{ end }}
 
+{{ if .Page.Store.Get "hasMap" }}
+<script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
+{{ end }}
+
 {{ $theme := resources.Get "js/theme.js" }}
 {{ $site := resources.Get "js/site.js" }}
 {{ $js := slice $site $theme | resources.Concat "js/bundle.js" | resources.Minify }}

themes/lhs/layouts/partials/head.html

@@ -20,7 +20,10 @@
 <link rel="alternate" type="text/calendar" href="https://api.leighhack.org/events.ics" title="{{ .Site.Title }} Events">
 <link rel="canonical" href="{{ .Permalink }}">
 
+{{ if .Page.Store.Get "hasMap" }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
+{{ end }}
 {{ $opts := dict "transpiler" "libsass" "targetPath" "css/leighhack.css" }}
 {{ with resources.Get "sass/leighhack.scss" | toCSS $opts | minify | fingerprint }}
 <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
-{{ end }}
+{{ end }}