Draft: maps

content/concerts/2022-helmstedt.md

@@ -7,6 +7,8 @@ address: Calvörder Str. 1A, 38350 Helmstedt
 price: Eintritt frei (Hut)
 draft: true
 image: images/bg.jpg
+lat : 52.2272555
+long : 11.0297554
 outputs:
   - html
   - calendar

layouts/concerts/single.html

@@ -32,5 +32,14 @@ <h1>{{ .Title }}</h1>
 		</ul>
 
 	  {{ partial "posts/tags.html" .}}
+
+	  {{ if not .Params.disableComments }}
+	  {{ template "_internal/disqus.html" . }}
+	  {{ end }}
+
+	  {{ if and (.Params.lat) (.Params.long) }}
+	  {{ partial "map" . }}
+	  {{ end }}
+
 	</section>
 {{ end }}

layouts/partials/map.html

@@ -0,0 +1,39 @@
+{{ $title := .Page.Title }}
+{{ $lat := .Page.Params.lat }}
+{{ $long := .Page.Params.long }}
+<link rel="stylesheet" href="/assets/css/leaflet.css" />
+<!-- TODO should use some kind of sensible css class settings -->
+<div id="map" style="width: 100%; height: 580px;">
+</div>
+<script src="/assets/js/leaflet.js"></script>
+<script src="/assets/js/leaflet-tilelayer-colorfilter.min.js"></script>
+<script>
+    // Creating map options
+    var mapOptions = {
+        center: [{{ $lat }}, {{ $long }}],
+        // Zoom level of the map, larger = closer
+        zoom: 10,
+    };
+    // Creating a map object
+    var map = new L.map("map", mapOptions);
+    // Creating a colorFilter object
+    let niceGrayscaleFilter = [
+      'grayscale:100%',
+      'sepia:15%',
+      'brightness:95%',
+    ];
+    // Creating a Layer object
+    var layer = L.tileLayer.colorFilter("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        filter: niceGrayscaleFilter,
+    });
+    // Adding layer to the map
+    layer.addTo(map);
+
+    var marker = L.marker(L.latLng({{ $lat }}, {{ $long }}), {
+        title: {{ $title }},
+    });
+    marker.addTo(map);
+    marker.bindPopup({{ $title }}).openPopup();
+</script>
+

static/admin/config.yml

@@ -60,6 +60,16 @@ collections:
         name: "image"
         widget: "image"
         required: false
+      - label: "Latitude"
+        name: "lat"
+        widget: "number"
+        value_type: "float"
+        required: false
+      - label: "Longitude"
+        name: "long"
+        widget: "number"
+        value_type: "float"
+        required: false
       - label: "Body"
         name: "body"
         widget: "markdown"