feat: Add zoom buttons to map

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 {

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 <MapLoading />;
   return (
     <MapWithStyle
-      key={isDarkMode ? 'dark' : 'light'} // For remounting on theme toggle
+      // Remount on theme toggle and language change, so the map re-initializes
+      // with the correct style and localized cooperative-gesture text.
+      key={`${isDarkMode ? 'dark' : 'light'}-${language}`}
       mapboxJsonStyle={mapboxJsonStyle}
       {...props}
     />
@@ -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({
     <div className={style.map}>
       <div className={style.mapWrapper}>
         {interactive && (
-          <Button
-            className={style.buttonsContainer}
-            size="small"
-            icon={{ left: <MonoIcon icon="places/Location" /> }}
-            onClick={() => centerMap(position)}
-            buttonProps={{
-              'aria-label': t(ComponentText.Map.map.centerMapButton),
-            }}
-          />
+          <div className={style.buttonsContainer}>
+            <Button
+              size="small"
+              radiusSize="circular"
+              icon={{ left: <MonoIcon icon="places/Location" /> }}
+              onClick={() => centerMap(position)}
+              buttonProps={{
+                'aria-label': t(ComponentText.Map.map.centerMapButton),
+              }}
+            />
+            <div className={style.zoomControl}>
+              <Button
+                className={style.zoomControl__button}
+                size="small"
+                radius="top"
+                radiusSize="circular"
+                icon={{ left: <MonoIcon icon="actions/Add" /> }}
+                onClick={zoomIn}
+                buttonProps={{
+                  'aria-label': t(ComponentText.Map.map.zoomInButton),
+                }}
+              />
+              <Button
+                className={and(
+                  style.zoomControl__button,
+                  style.zoomControl__button__divider,
+                )}
+                size="small"
+                radius="bottom"
+                radiusSize="circular"
+                icon={{ left: <MonoIcon icon="actions/Subtract" /> }}
+                onClick={zoomOut}
+                buttonProps={{
+                  'aria-label': t(ComponentText.Map.map.zoomOutButton),
+                }}
+              />
+            </div>
+          </div>
         )}
         <div
           ref={mapContainer}

src/components/map/use-map-interactions.ts

@@ -50,5 +50,8 @@ export function useMapInteractions(
     mapRef.current.flyTo({ center: position, zoom: ZOOM_LEVEL, speed: 2 });
   };
 
-  return { centerMap };
+  const zoomIn = () => mapRef.current?.zoomIn();
+  const zoomOut = () => mapRef.current?.zoomOut();
+
+  return { centerMap, zoomIn, zoomOut };
 }

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