Translate pages

frontend/src/components/map/Map.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useEffect, useState, useMemo, memo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Map as MapGL, useControl, ScaleControl } from 'react-map-gl/maplibre';
 import { MapboxOverlay } from '@deck.gl/mapbox';
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -28,7 +29,7 @@ import { LogoIcon } from '../ui/icons/LogoIcon';
 import { CloseIcon } from '../ui/icons/CloseIcon';
 import type { FeatureFilters } from '../../types';
 import { useDeckLayers } from '../../hooks/useDeckLayers';
-import { MODE_LABELS, type TravelTimeEntry } from '../../hooks/useTravelTime';
+import { useTranslatedModes, type TravelTimeEntry } from '../../hooks/useTravelTime';
 
 interface MapProps {
   data: HexagonData[];
@@ -57,6 +58,7 @@ interface MapProps {
   bounds?: Bounds | null;
   hideLegend?: boolean;
   travelTimeEntries?: TravelTimeEntry[];
+  densityLabel?: string;
 }
 
 const EMPTY_TRAVEL_ENTRIES: TravelTimeEntry[] = [];
@@ -113,8 +115,11 @@ export default memo(function Map({
   bounds: viewportBounds,
   hideLegend = false,
   travelTimeEntries = EMPTY_TRAVEL_ENTRIES,
+  densityLabel = 'Number of properties',
 }: MapProps) {
   const containerRef = useRef<HTMLDivElement>(null);
+  const { t } = useTranslation();
+  const modes = useTranslatedModes();
   const [internalViewState, setInternalViewState] = useState<ViewState>(
     initialViewState || INITIAL_VIEW_STATE
   );
@@ -271,7 +276,7 @@ export default memo(function Map({
               (viewFeature && colorRange ? (
                 viewFeature.startsWith('tt_') ? (
                   <MapLegend
-                    featureLabel={`Travel time (${MODE_LABELS[viewFeature.split('_')[1] as keyof typeof MODE_LABELS]})`}
+                    featureLabel={t('travel.travelTime', { mode: modes.label(viewFeature.split('_')[1] as 'car' | 'bicycle' | 'walking' | 'transit') })}
                     range={colorRange}
                     showCancel={viewSource === 'eye'}
                     onCancel={onCancelPin}
@@ -299,12 +304,15 @@ export default memo(function Map({
                 ) : null
               ) : (
                 <MapLegend
-                  featureLabel="Number of properties"
+                  featureLabel={densityLabel}
                   range={
                     usePostcodeView
                       ? [postcodeCountRange.min, postcodeCountRange.max]
                       : [countRange.min, countRange.max]
                   }
+                  totalCount={
+                    usePostcodeView ? postcodeCountRange.total : countRange.total
+                  }
                   showCancel={false}
                   onCancel={onCancelPin}
                   mode="density"