Merge pull request #14 from kombimedia/map

Map reset button
initbiz · Feb 13, 2024 · 3cea4a9 · 3cea4a9
2 parents 538b50d + 6fdf552
commit 3cea4a9
Showing 1 changed file with 26 additions and 2 deletions.
diff --git a/components/partials/map.htm b/components/partials/map.htm
@@ -1,4 +1,14 @@
-<div id="{{ __SELF__ ~ '-container' }}" class="leaflet-map"></div>
+<div id="{{ __SELF__ ~ '-container' }}" class="leaflet-map">
+
+    <button onclick="{{ mapVar }}.setView(new L.LatLng({{ __SELF__.centerLatLon }}), {{ __SELF__.initialZoom }});"
+            href="javascript:void(0)"
+            class="leaflet-map-reset">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+        </svg>
+    </button>
+
+</div>
 
 {% partial __SELF__ ~ '::map-script' %}
 
@@ -7,5 +17,19 @@
     .leaflet-map {
         min-height: 800px;
     }
+    .leaflet-map-reset {
+        position: absolute;
+        bottom: 1.25rem;
+        z-index: 99999;
+        margin-left: .5rem;
+        padding: .25rem;
+        background-color: #ffffff;
+        border: 2px solid #cccccc;
+        border-radius: .375rem;
+        color: #000000;
+    }
+    .leaflet-map-reset:hover {
+        background-color: #f4f4f4;
+    }
 </style>
-{% endput %}
+{% endput %}