From ab84420cd49e291a09f1e6eb8f81b1da534c2424 Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Wed, 18 Dec 2024 17:09:07 +0100
Subject: [PATCH 1/5] feat: adds Map Toolbar to the gis-client

---
 src/App.tsx                          |   2 +
 src/components/MapToolbar/index.less |  21 ++++++
 src/components/MapToolbar/index.tsx  | 105 +++++++++++++++++++++++++++
 3 files changed, 128 insertions(+)
 create mode 100644 src/components/MapToolbar/index.less
 create mode 100644 src/components/MapToolbar/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1b5f65d89..84688b3e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -9,6 +9,7 @@ import EditFeatureDrawer from './components/EditFeatureDrawer';
 import Footer from './components/Footer';
 import Header from './components/Header';
 import LayerDetailsModal from './components/LayerDetailsModal';
+import MapToolbar from './components/MapToolbar';
 import StylingDrawer from './components/StylingDrawer';
 import ToolMenu from './components/ToolMenu';
 import UploadDataModal from './components/UploadDataModal';
@@ -41,6 +42,7 @@ export const App: React.FC<AppProps> = ({
       <Header />
       <BasicMapComponent />
       <ToolMenu />
+      <MapToolbar />
       <Footer />
       <CookieBanner />
       <AddLayerModal />
diff --git a/src/components/MapToolbar/index.less b/src/components/MapToolbar/index.less
new file mode 100644
index 000000000..652b96da4
--- /dev/null
+++ b/src/components/MapToolbar/index.less
@@ -0,0 +1,21 @@
+.map-toolbar {
+  position: absolute;
+  top: calc(var(--headerHeight) + 1em);
+  right: 10px;
+  transition: 0.3s;
+  flex-direction: column;
+  z-index: 1;
+
+  button {
+    margin: 5px;
+    display: block;
+    color: var(--complementaryColor);
+    background: var(--primaryColor);
+    border-color: var(--primaryColor);
+
+    &:hover {
+      background: var(--secondaryColor);
+      border-color: var(--secondaryColor);
+    }
+  }
+}
diff --git a/src/components/MapToolbar/index.tsx b/src/components/MapToolbar/index.tsx
new file mode 100644
index 000000000..51a924c02
--- /dev/null
+++ b/src/components/MapToolbar/index.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from 'react';
+
+import {
+  faPlus,
+  faMinus,
+  faLocation,
+  faLocationPin
+} from '@fortawesome/free-solid-svg-icons';
+
+import {
+  FontAwesomeIcon
+} from '@fortawesome/react-fontawesome';
+import {
+  TooltipPlacement
+} from 'antd/es/tooltip';
+
+import {
+  useTranslation
+} from 'react-i18next';
+
+import {
+  GeoLocationButton
+} from '@terrestris/react-geo/dist/Button/GeoLocationButton/GeoLocationButton';
+import ZoomButton from '@terrestris/react-geo/dist/Button/ZoomButton/ZoomButton';
+
+import {
+  useMap
+} from '@terrestris/react-util/dist/Hooks/useMap/useMap';
+
+import Toolbar, { ToolbarProps } from '../Toolbar';
+
+import './index.less';
+
+export type MapToolbarProps = React.HTMLAttributes<HTMLDivElement> & ToolbarProps & {};
+
+export const MapToolbar: React.FC = (): JSX.Element => {
+  const {
+    t
+  } = useTranslation();
+  const map = useMap();
+
+  const [pressed, setPressed] = useState(false);
+
+  const btnTooltipProps = {
+    tooltipPlacement: 'left' as TooltipPlacement,
+    tooltipProps: {
+      mouseEnterDelay: 0.5
+    }
+  };
+
+  return (
+    <Toolbar
+      className='map-toolbar'
+      alignment="vertical"
+      role="toolbar"
+    >
+
+      {map &&
+        <ZoomButton
+          aria-label='zoom-in'
+          tooltip={t('MapToolbar.zoomInTooltip')}
+          icon={
+            <FontAwesomeIcon
+              icon={faPlus}
+            />
+          }
+          {...btnTooltipProps}
+        />}
+      {map &&
+        <ZoomButton
+          aria-label='zoom-out'
+          tooltip={t('MapToolbar.zoomOutTooltip')}
+          delta={-1}
+          icon={
+            <FontAwesomeIcon
+              icon={faMinus}
+            />
+          }
+          {...btnTooltipProps}
+        />}
+      {map &&
+        <GeoLocationButton
+          aria-label='geolocation'
+          showMarker={true}
+          follow={true}
+          pressed={pressed}
+          onChange={() => setPressed(!pressed)}
+          tooltip={t('MapToolbar.geoLocation')}
+          icon={
+            <FontAwesomeIcon
+              icon={faLocation}
+            />
+          }
+          pressedIcon={
+            <FontAwesomeIcon
+              icon={faLocationPin}
+            />
+          }
+          {...btnTooltipProps}
+        />}
+    </Toolbar>
+  );
+};
+
+export default MapToolbar;

From 5b633f0965bced5c6087c6a4141b978094846a30 Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Fri, 20 Dec 2024 11:57:43 +0100
Subject: [PATCH 2/5] feat: configuration of mapToolbar per app

---
 src/bootstrap.tsx                        |  6 ++++++
 src/i18n/translations.ts                 | 10 ++++++++++
 src/store/mapToolbarVisibility/index.tsx | 22 ++++++++++++++++++++++
 src/store/store.ts                       |  2 ++
 4 files changed, 40 insertions(+)
 create mode 100644 src/store/mapToolbarVisibility/index.tsx

diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
index 54fc096db..96c4b3806 100644
--- a/src/bootstrap.tsx
+++ b/src/bootstrap.tsx
@@ -108,6 +108,9 @@ import {
 import {
   setLogoPath
 } from './store/logoPath';
+import {
+  setMapToolbarVisible
+} from './store/mapToolbarVisibility';
 import { setPrintApp } from './store/print';
 import {
   setSearchEngines
@@ -290,6 +293,9 @@ const setApplicationToStore = async (application?: Application) => {
         if (tool.name === 'tree' && typeof tool.config.layerIconsVisible !== 'undefined') {
           store.dispatch(setLayerIconsVisible(tool.config.layerIconsVisible));
         }
+        if (tool.name === 'map_toolbar') {
+          store.dispatch(setMapToolbarVisible(tool.config.visible));
+        }
       });
     store.dispatch(setAvailableTools(availableTools));
   }
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 469af9f22..5e4d207f1 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -126,6 +126,11 @@ export default {
         layertree: 'Karten',
         languageSelect: 'Sprachauswahl'
       },
+      MapToolbar: {
+        zoomInTooltip: 'Reinzoomen',
+        zoomOutTooltip: 'Rauszoomen',
+        geoLocation: 'Geolokalisierung'
+      },
       PrintForm: {
         title: 'Kartentitel',
         initialTitle: 'Druckausgabe',
@@ -422,6 +427,11 @@ export default {
         layertree: 'Maps',
         languageSelect: 'Language selector'
       },
+      MapToolbar: {
+        zoomInTooltip: 'Zoom in',
+        zoomOutTooltip: 'Zoom out',
+        geoLocation: 'Geolocation'
+      },
       PrintForm: {
         title: 'Title',
         initialTitle: 'Title',
diff --git a/src/store/mapToolbarVisibility/index.tsx b/src/store/mapToolbarVisibility/index.tsx
new file mode 100644
index 000000000..e5fb3c9d2
--- /dev/null
+++ b/src/store/mapToolbarVisibility/index.tsx
@@ -0,0 +1,22 @@
+import {
+  createSlice,
+  PayloadAction
+} from '@reduxjs/toolkit';
+
+const initialState = false;
+
+export const slice = createSlice({
+  name: 'mapToolbar',
+  initialState,
+  reducers: {
+    setMapToolbarVisible: (state, action: PayloadAction<boolean>) => {
+      return action.payload;
+    }
+  }
+});
+
+export const {
+  setMapToolbarVisible
+} = slice.actions;
+
+export default slice.reducer;
diff --git a/src/store/store.ts b/src/store/store.ts
index c5bf1b7c5..2ee548bfc 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -17,6 +17,7 @@ import layerDetailsModal from './layerDetailsModal';
 import layerTree from './layerTree';
 import legal from './legal';
 import logoPath from './logoPath';
+import mapToolBarVisibility from './mapToolbarVisibility';
 import print from './print';
 import searchEngines from './searchEngines';
 import selectedFeatures from './selectedFeatures';
@@ -50,6 +51,7 @@ export const createReducer = (asyncReducers?: AsyncReducer) => {
     searchEngines,
     user,
     stylingDrawerVisibility,
+    mapToolBarVisibility,
     ...asyncReducers
   });
 };

From d2cbbef5140ffd99c99b7a9b42bd1f99d4375353 Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Tue, 14 Jan 2025 13:34:08 +0100
Subject: [PATCH 3/5] feat: make visibilty of MapToolbar configurable

---
 src/bootstrap.tsx                             |   2 +-
 src/components/MapToolbar/index.less          |   4 +-
 src/components/MapToolbar/index.tsx           | 105 ++++++++++--------
 src/i18n/translations.ts                      |   4 +-
 .../index.tsx                                 |  10 +-
 src/store/store.ts                            |   4 +-
 6 files changed, 69 insertions(+), 60 deletions(-)
 rename src/store/{mapToolbarVisibility => mapToolbarVisible}/index.tsx (58%)

diff --git a/src/bootstrap.tsx b/src/bootstrap.tsx
index 96c4b3806..8c751e634 100644
--- a/src/bootstrap.tsx
+++ b/src/bootstrap.tsx
@@ -110,7 +110,7 @@ import {
 } from './store/logoPath';
 import {
   setMapToolbarVisible
-} from './store/mapToolbarVisibility';
+} from './store/mapToolbarVisible';
 import { setPrintApp } from './store/print';
 import {
   setSearchEngines
diff --git a/src/components/MapToolbar/index.less b/src/components/MapToolbar/index.less
index 652b96da4..d3e85003d 100644
--- a/src/components/MapToolbar/index.less
+++ b/src/components/MapToolbar/index.less
@@ -6,7 +6,7 @@
   flex-direction: column;
   z-index: 1;
 
-  button {
+  .ant-btn {
     margin: 5px;
     display: block;
     color: var(--complementaryColor);
@@ -14,7 +14,7 @@
     border-color: var(--primaryColor);
 
     &:hover {
-      background: var(--secondaryColor);
+      background: var(--secondaryColor) !important;
       border-color: var(--secondaryColor);
     }
   }
diff --git a/src/components/MapToolbar/index.tsx b/src/components/MapToolbar/index.tsx
index 51a924c02..eb8de9b77 100644
--- a/src/components/MapToolbar/index.tsx
+++ b/src/components/MapToolbar/index.tsx
@@ -27,6 +27,7 @@ import {
   useMap
 } from '@terrestris/react-util/dist/Hooks/useMap/useMap';
 
+import { store } from '../../store/store';
 import Toolbar, { ToolbarProps } from '../Toolbar';
 
 import './index.less';
@@ -41,6 +42,8 @@ export const MapToolbar: React.FC = (): JSX.Element => {
 
   const [pressed, setPressed] = useState(false);
 
+  const [visible, setVisible] = useState(store.getState().toolMenu.availableTools.find((toolName) => toolName === 'map_toolbar'));
+
   const btnTooltipProps = {
     tooltipPlacement: 'left' as TooltipPlacement,
     tooltipProps: {
@@ -49,56 +52,60 @@ export const MapToolbar: React.FC = (): JSX.Element => {
   };
 
   return (
-    <Toolbar
-      className='map-toolbar'
-      alignment="vertical"
-      role="toolbar"
-    >
+    <>
+      { visible &&
+        <Toolbar
+          className='map-toolbar'
+          alignment="vertical"
+          role="toolbar"
+        >
 
-      {map &&
-        <ZoomButton
-          aria-label='zoom-in'
-          tooltip={t('MapToolbar.zoomInTooltip')}
-          icon={
-            <FontAwesomeIcon
-              icon={faPlus}
-            />
-          }
-          {...btnTooltipProps}
-        />}
-      {map &&
-        <ZoomButton
-          aria-label='zoom-out'
-          tooltip={t('MapToolbar.zoomOutTooltip')}
-          delta={-1}
-          icon={
-            <FontAwesomeIcon
-              icon={faMinus}
-            />
-          }
-          {...btnTooltipProps}
-        />}
-      {map &&
-        <GeoLocationButton
-          aria-label='geolocation'
-          showMarker={true}
-          follow={true}
-          pressed={pressed}
-          onChange={() => setPressed(!pressed)}
-          tooltip={t('MapToolbar.geoLocation')}
-          icon={
-            <FontAwesomeIcon
-              icon={faLocation}
-            />
-          }
-          pressedIcon={
-            <FontAwesomeIcon
-              icon={faLocationPin}
-            />
-          }
-          {...btnTooltipProps}
-        />}
-    </Toolbar>
+          {map &&
+            <ZoomButton
+              aria-label='zoom-in'
+              tooltip={t('MapToolbar.zoomInTooltip')}
+              icon={
+                <FontAwesomeIcon
+                  icon={faPlus}
+                />
+              }
+              {...btnTooltipProps}
+            />}
+          {map &&
+            <ZoomButton
+              aria-label='zoom-out'
+              tooltip={t('MapToolbar.zoomOutTooltip')}
+              delta={-1}
+              icon={
+                <FontAwesomeIcon
+                  icon={faMinus}
+                />
+              }
+              {...btnTooltipProps}
+            />}
+          {map &&
+            <GeoLocationButton
+              aria-label='geolocation'
+              showMarker={true}
+              follow={true}
+              pressed={pressed}
+              onChange={() => setPressed(!pressed)}
+              tooltip={t('MapToolbar.geoLocation')}
+              icon={
+                <FontAwesomeIcon
+                  icon={faLocation}
+                />
+              }
+              pressedIcon={
+                <FontAwesomeIcon
+                  icon={faLocationPin}
+                />
+              }
+              {...btnTooltipProps}
+            />}
+        </Toolbar>
+      }
+    </>
   );
 };
 
diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 5e4d207f1..5b464c8c6 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -428,8 +428,8 @@ export default {
         languageSelect: 'Language selector'
       },
       MapToolbar: {
-        zoomInTooltip: 'Zoom in',
-        zoomOutTooltip: 'Zoom out',
+        zoomInTooltip: 'Zoom-in',
+        zoomOutTooltip: 'Zoom-out',
         geoLocation: 'Geolocation'
       },
       PrintForm: {
diff --git a/src/store/mapToolbarVisibility/index.tsx b/src/store/mapToolbarVisible/index.tsx
similarity index 58%
rename from src/store/mapToolbarVisibility/index.tsx
rename to src/store/mapToolbarVisible/index.tsx
index e5fb3c9d2..c1e39b527 100644
--- a/src/store/mapToolbarVisibility/index.tsx
+++ b/src/store/mapToolbarVisible/index.tsx
@@ -3,14 +3,16 @@ import {
   PayloadAction
 } from '@reduxjs/toolkit';
 
-const initialState = false;
+const initialState = {
+  visible: false
+};
 
 export const slice = createSlice({
-  name: 'mapToolbar',
+  name: 'map_toolbar',
   initialState,
   reducers: {
-    setMapToolbarVisible: (state, action: PayloadAction<boolean>) => {
-      return action.payload;
+    setMapToolbarVisible(state, action: PayloadAction<boolean>) {
+      state.visible = action.payload;
     }
   }
 });
diff --git a/src/store/store.ts b/src/store/store.ts
index 2ee548bfc..60af10ac6 100644
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -17,7 +17,7 @@ import layerDetailsModal from './layerDetailsModal';
 import layerTree from './layerTree';
 import legal from './legal';
 import logoPath from './logoPath';
-import mapToolBarVisibility from './mapToolbarVisibility';
+import mapToolbarVisible from './mapToolbarVisible';
 import print from './print';
 import searchEngines from './searchEngines';
 import selectedFeatures from './selectedFeatures';
@@ -51,7 +51,7 @@ export const createReducer = (asyncReducers?: AsyncReducer) => {
     searchEngines,
     user,
     stylingDrawerVisibility,
-    mapToolBarVisibility,
+    mapToolbarVisible,
     ...asyncReducers
   });
 };

From a779c5a75c98540e761ddf2b481837a32abdd131 Mon Sep 17 00:00:00 2001
From: asefubeierl <asefubeierl@terrestris.de>
Date: Tue, 14 Jan 2025 14:22:12 +0100
Subject: [PATCH 4/5] fix: remove unused variable

---
 src/components/MapToolbar/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/MapToolbar/index.tsx b/src/components/MapToolbar/index.tsx
index eb8de9b77..bd0ca239f 100644
--- a/src/components/MapToolbar/index.tsx
+++ b/src/components/MapToolbar/index.tsx
@@ -42,7 +42,7 @@ export const MapToolbar: React.FC = (): JSX.Element => {
 
   const [pressed, setPressed] = useState(false);
 
-  const [visible, setVisible] = useState(store.getState().toolMenu.availableTools.find((toolName) => toolName === 'map_toolbar'));
+  const [visible] = useState(store.getState().toolMenu.availableTools.find((toolName) => toolName === 'map_toolbar'));
 
   const btnTooltipProps = {
     tooltipPlacement: 'left' as TooltipPlacement,

From 103a56f9735ac02bc6042260b236e55f3fd5ab2b Mon Sep 17 00:00:00 2001
From: Amanda Sefu-Beierl <130636985+AmandaTamanda@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:27:33 +0100
Subject: [PATCH 5/5] fix: update translations

Co-authored-by: Lukas Lohoff <lohoff@terrestris.de>
---
 src/i18n/translations.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/translations.ts b/src/i18n/translations.ts
index 5b464c8c6..ada69fcf0 100644
--- a/src/i18n/translations.ts
+++ b/src/i18n/translations.ts
@@ -127,8 +127,8 @@ export default {
         languageSelect: 'Sprachauswahl'
       },
       MapToolbar: {
-        zoomInTooltip: 'Reinzoomen',
-        zoomOutTooltip: 'Rauszoomen',
+        zoomInTooltip: 'Hereinzoomen',
+        zoomOutTooltip: 'Herauszoomen',
         geoLocation: 'Geolokalisierung'
       },
       PrintForm: {