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 && ( -
+
)}
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'), },