diff --git a/src/components/map/map.module.css b/src/components/map/map.module.css
index 1285d69d..8fcc4394 100644
--- a/src/components/map/map.module.css
+++ b/src/components/map/map.module.css
@@ -77,9 +77,27 @@
.buttonsContainer {
position: absolute;
- right: token('spacing.xLarge');
+ right: token('spacing.large');
bottom: 3rem;
z-index: 250;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: token('spacing.small');
+}
+
+.zoomControl {
+ display: flex;
+ flex-direction: column;
+}
+
+.zoomControl__button {
+ justify-content: center;
+}
+
+.zoomControl__button__divider {
+ box-shadow: inset 0 token('border.width.slim') 0
+ token('color.border.primary.background');
}
.pinSvg__fill {
diff --git a/src/components/map/map.tsx b/src/components/map/map.tsx
index 30bd82ab..e0ac8c89 100644
--- a/src/components/map/map.tsx
+++ b/src/components/map/map.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useCallback } from 'react';
+import React, { useRef, useEffect, useCallback, useMemo } from 'react';
import mapboxgl, { type StyleSpecification } from 'mapbox-gl';
import style from './map.module.css';
import 'mapbox-gl/dist/mapbox-gl.css';
@@ -58,10 +58,13 @@ export default function Map(props: MapProps) {
// mapRef.current undefined and never re-run.
const mapboxJsonStyle = useMapboxJsonStyle();
const [isDarkMode] = useDarkMode();
+ const { language } = useTranslation();
if (!mapboxJsonStyle) return ;
return (
@@ -98,6 +101,8 @@ function MapWithStyle({
zoom: initialZoom,
bounds,
interactive,
+ // Let the scroll wheel scroll the page instead of zooming the map.
+ cooperativeGestures: interactive,
});
}, [position, initialZoom, bounds, mapboxJsonStyle, interactive]);
@@ -113,7 +118,10 @@ function MapWithStyle({
return () => resizeObserver.disconnect();
}, []);
- const { centerMap } = useMapInteractions(map, onSelectStopPlace);
+ const { centerMap, zoomIn, zoomOut } = useMapInteractions(
+ map,
+ onSelectStopPlace,
+ );
useMapPin(map, position, layer);
useMapLegs(map, mapLegs);
useMapFareZones(map);
@@ -133,15 +141,44 @@ function MapWithStyle({
{interactive && (
-
}}
- onClick={() => centerMap(position)}
- buttonProps={{
- 'aria-label': t(ComponentText.Map.map.centerMapButton),
- }}
- />
+
+
}}
+ onClick={() => centerMap(position)}
+ buttonProps={{
+ 'aria-label': t(ComponentText.Map.map.centerMapButton),
+ }}
+ />
+
+ }}
+ onClick={zoomIn}
+ buttonProps={{
+ 'aria-label': t(ComponentText.Map.map.zoomInButton),
+ }}
+ />
+ }}
+ onClick={zoomOut}
+ buttonProps={{
+ 'aria-label': t(ComponentText.Map.map.zoomOutButton),
+ }}
+ />
+
+
)}
mapRef.current?.zoomIn();
+ const zoomOut = () => mapRef.current?.zoomOut();
+
+ return { centerMap, zoomIn, zoomOut };
}
diff --git a/src/translations/components/map.ts b/src/translations/components/map.ts
index d17cc266..49df0cca 100644
--- a/src/translations/components/map.ts
+++ b/src/translations/components/map.ts
@@ -16,6 +16,8 @@ export const Map = {
'Reset map view',
'Tilbakestill kartvisning',
),
+ zoomInButton: _('Zoom inn', 'Zoom in', 'Zoom inn'),
+ zoomOutButton: _('Zoom ut', 'Zoom out', 'Zoom ut'),
startPoint: _('Start', 'Start', 'Start'),
endPoint: _('Slutt', 'End', 'Slutt'),
},