From 1a0db21ec328bb3be2fd27136d3ce0e274492ae0 Mon Sep 17 00:00:00 2001
From: Andrew Williams <andy@tensixtyone.com>
Date: Wed, 7 Feb 2024 15:00:00 +0000
Subject: [PATCH] Add OSM map on the Visit Us page

---
 assets/js/site.js                     | 58 ++++++++++++++++++++++-----
 content/visit.md                      |  2 +
 layouts/shortcodes/map.html           |  2 +
 themes/lhs/assets/sass/leighhack.scss |  7 ++++
 themes/lhs/layouts/partials/foot.html |  5 +++
 themes/lhs/layouts/partials/head.html |  5 ++-
 6 files changed, 68 insertions(+), 11 deletions(-)
 create mode 100644 layouts/shortcodes/map.html

diff --git a/assets/js/site.js b/assets/js/site.js
index 37b246d..753dcbe 100644
--- a/assets/js/site.js
+++ b/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,
+                }),
+            });
+        }
+    });
 });
diff --git a/content/visit.md b/content/visit.md
index 7e078c6..24c0428 100644
--- a/content/visit.md
+++ b/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.
diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
new file mode 100644
index 0000000..571cc7e
--- /dev/null
+++ b/layouts/shortcodes/map.html
@@ -0,0 +1,2 @@
+<div id="map" class="map"></div>
+{{ .Page.Store.Set "hasMap" true }}
diff --git a/themes/lhs/assets/sass/leighhack.scss b/themes/lhs/assets/sass/leighhack.scss
index a2007aa..02febd7 100644
--- a/themes/lhs/assets/sass/leighhack.scss
+++ b/themes/lhs/assets/sass/leighhack.scss
@@ -338,3 +338,10 @@ footer {
     }
 }
 
+// -------------------------------------------------------
+// Map layout
+// -------------------------------------------------------
+
+.map {
+	height: 500px;
+}
diff --git a/themes/lhs/layouts/partials/foot.html b/themes/lhs/layouts/partials/foot.html
index 5188ae2..0466f1f 100644
--- a/themes/lhs/layouts/partials/foot.html
+++ b/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 }}
diff --git a/themes/lhs/layouts/partials/head.html b/themes/lhs/layouts/partials/head.html
index 9ca281f..e569886 100644
--- a/themes/lhs/layouts/partials/head.html
+++ b/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 }}
\ No newline at end of file
+{{ end }}