shortcode integrations

layouts/shortcodes/osm.html

@@ -0,0 +1,26 @@
+<!--
+Usage:
+  {{< osm lat="48.858844" lon="2.294351" zoom="15" height="400px" >}}
+  All parameters are optional except lat/lon.
+-->
+<div id="osm-map-{{ .Get "lat" }}-{{ .Get "lon" }}-{{ .Get "zoom" | default "15" }}" style="height:{{ .Get "height" | default "400px" }};"></div>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+<script>
+(function() {
+  var mapId = "osm-map-{{ .Get "lat" }}-{{ .Get "lon" }}-{{ .Get "zoom" | default "15" }}";
+  if (!window._osm_maps) window._osm_maps = {};
+  if (!window._osm_maps[mapId]) {
+    var map = L.map(mapId).setView(
+      [{{ .Get "lat" }}, {{ .Get "lon" }}],
+      {{ .Get "zoom" | default "15" }}
+    );
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 19,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(map);
+    L.marker([{{ .Get "lat" }}, {{ .Get "lon" }}]).addTo(map);
+    window._osm_maps[mapId] = map;
+  }
+})();
+</script>