From 06252fb0b54937a3b312bd8cc8eda03ff3d1a0cd Mon Sep 17 00:00:00 2001
From: Anton Tranelis <31516529+antontranelis@users.noreply.github.com>
Date: Thu, 22 May 2025 12:06:30 +0200
Subject: [PATCH] refactor(source): zoom control (#221)

* 3.0.82

* version number

* 3.0.84

* 3.0.85

* 3.0.86

* optional zoom control
---
 src/Components/Map/UtopiaMap.tsx |  5 +++-
 src/assets/css/leaflet.css       | 43 ++++++++++++++++++++++++++++++--
 src/types/UtopiaMapProps.d.ts    |  1 +
 3 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index d6832cff..19f81152 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -51,6 +51,7 @@ function UtopiaMap({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
+  showZoomControl = false,
   showThemeControl = false,
   defaultTheme,
   donationWidget,
@@ -73,6 +74,8 @@ function UtopiaMap({
   showLayerControl?: boolean
   /** show the layer control widget (default true) */
   showGratitudeControl?: boolean
+  /** show zoom control widget (default false) */
+  showZoomControl?: boolean
   /** show a widget to switch the theme */
   showThemeControl?: boolean
   /** the defaut theme */
@@ -86,7 +89,7 @@ function UtopiaMap({
         style={{ height, width }}
         center={new LatLng(center[0], center[1])}
         zoom={zoom}
-        zoomControl={false}
+        zoomControl={showZoomControl}
         maxZoom={19}
       >
         <UtopiaMapInner
diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
index 5451da91..ede0d425 100644
--- a/src/assets/css/leaflet.css
+++ b/src/assets/css/leaflet.css
@@ -1,4 +1,4 @@
-.leaflet-control-attribution {
+ .leaflet-control-attribution {
     display: none;
 }
 
@@ -56,4 +56,43 @@
 .leaflet-popup-close-button span {
     color: var(--color-base-content);
     opacity: 50%;
-}
\ No newline at end of file
+}
+
+.leaflet-top {
+    top: 6em
+}
+
+.leaflet-left {
+    left: 0.5em
+}
+
+.leaflet-control-zoom {
+    border-radius: var(--radius-box);
+    color: var(--color-base-content);
+    background-color: var(--color-base-100);
+    width: calc(var(--tw-spacing) * 10);
+    border: 2px solid var(--color-base-300) !important;
+    box-shadow: 0 20px 25px -5px  rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) !important;
+}
+
+.leaflet-control-zoom-in {
+    border-top-left-radius: var(--radius-box) !important;
+    border-top-right-radius: var(--radius-box) !important;
+    color: var(--color-base-content) !important;
+    background-color: var(--color-base-100) !important;
+    width: calc(var(--tw-spacing) * 9) !important;
+    border-bottom: 1px solid var(--color-base-300) !important;
+    height: calc(var(--tw-spacing) * 9) !important;
+    line-height: 40px !important;
+}
+
+.leaflet-control-zoom-out {
+    border-bottom-left-radius: var(--radius-box) !important;
+    border-bottom-right-radius: var(--radius-box) !important;
+    color: var(--color-base-content) !important;
+    background-color: var(--color-base-100) !important;
+    width: calc(var(--tw-spacing) * 9) !important;
+    height: calc(var(--tw-spacing) * 9) !important;
+    line-height: 40px !important;
+}
+
diff --git a/src/types/UtopiaMapProps.d.ts b/src/types/UtopiaMapProps.d.ts
index eaa455a2..664bdac6 100644
--- a/src/types/UtopiaMapProps.d.ts
+++ b/src/types/UtopiaMapProps.d.ts
@@ -13,6 +13,7 @@ export interface UtopiaMapProps {
   showLayerControl?: boolean
   showGratitudeControl?: boolean
   showThemeControl?: boolean
+  showZoomControl?: boolean
   infoText?: string
   donationWidget?: boolean
   defaultTheme?: string