feat: adds Map Toolbar to the gis-client

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 />

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));
   }

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);
+    }
+  }
+}

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;

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',

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;

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
   });
 };