From 78588d0c2d8f88cdeb4625385c0d17395b7ddd64 Mon Sep 17 00:00:00 2001
From: Martin Rubli <martin@rubli.info>
Date: Mon, 16 Oct 2023 20:21:18 +0200
Subject: [PATCH] layouts: map: Allow specifying width/height in the shortcode
 tag

---
 layouts/shortcodes/leaflet-map.html | 10 ++++++++--
 static/css/hugo-mod-leaflet.css     |  2 --
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/layouts/shortcodes/leaflet-map.html b/layouts/shortcodes/leaflet-map.html
index acae842..2af1c3f 100644
--- a/layouts/shortcodes/leaflet-map.html
+++ b/layouts/shortcodes/leaflet-map.html
@@ -2,7 +2,7 @@
 
 Syntax summary:
 
-	{{< leaflet-map centerLat=FLOAT centerLon=FLOAT zoom=INT >}}
+	{{< leaflet-map centerLat=FLOAT centerLon=FLOAT zoom=INT width="STRING" height="STRING" >}}
 
 		{{< leaflet-layer id="STRING" apiKey="STRING" >}}
 
@@ -22,6 +22,12 @@ Map options:
 		Center point coordinates of the map as decimal values. Optional iif tracks or markers are given.
 	zoom:
 		Zoom level of the map. Optional iif tracks or markers are given.
+	width:
+		Width of the map, including CSS units (e.g. "50%", "300px").
+		Optional, defaults to "600px".
+	height:
+		Height of the map, including CSS units (e.g. "50%", "300px").
+		Optional, defaults to "400px".
 
 Layer options:
 
@@ -84,7 +90,7 @@ Elevation profile options:
 
 {{ $uniqueId := .Ordinal | safeJS }}
 
-<div id="map_container_{{ $uniqueId }}" class="map-container">
+<div id="map_container_{{ $uniqueId }}" class="map-container" style="width: {{ .Get "width" | default "600px" }}; height: {{ .Get "height" | default "400px" }};">
 	<div id="map_{{ $uniqueId }}" class="map"></div>
 	<div id="map_backdrop_{{ $uniqueId }}" class="map-backdrop"></div>
 	<div id="map_attribution_{{ $uniqueId }}" class="map-attribution"></div>
diff --git a/static/css/hugo-mod-leaflet.css b/static/css/hugo-mod-leaflet.css
index df48abd..9fcef81 100644
--- a/static/css/hugo-mod-leaflet.css
+++ b/static/css/hugo-mod-leaflet.css
@@ -1,6 +1,4 @@
 .map-container {
-	height: 400px;
-	width: 600px;
 	padding: 6px 6px 18px 6px;
 	background: #eee;
 	border-radius: 8px;