feat: add lat/lon coordinates to map labels

src/app/[locale]/incident/summary/components/IncidentSummaryForm.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { IncidentFormFooter } from '@/app/[locale]/incident/components/IncidentFormFooter'
-import { useTranslations } from 'next-intl'
+import { useLocale, useTranslations } from 'next-intl'
 import { Divider } from '@/components/ui/Divider'
 import React, { ReactNode, useEffect, useState } from 'react'
 import { signalsClient } from '@/services/client/api-client'
@@ -19,6 +19,10 @@ import { getCurrentStep } from '@/lib/utils/stepper'
 import { getAttachments } from '@/lib/utils/attachments'
 import { useConfig } from '@/hooks/useConfig'
 import { ParagraphOrList } from '@/components/ui/ParagraphOrList'
+import {
+  coords2degreeMinuteSecondsFlat,
+  isCoordinatesTuple,
+} from '@/lib/utils/format-coordinates'
 
 const IncidentSummaryForm = () => {
   const t = useTranslations('describe_summary')
@@ -33,6 +37,7 @@ const IncidentSummaryForm = () => {
   const pathname = usePathname()
   const step = getCurrentStep(pathname)
   const { config } = useConfig()
+  const locale = useLocale()
 
   useEffect(() => {
     router.prefetch('/incident/thankyou')
@@ -117,6 +122,12 @@ const IncidentSummaryForm = () => {
     }
   }
 
+  const numberFormat = new Intl.NumberFormat(locale)
+  const unitDisplay: 'short' | 'long' = 'long'
+  const coordinates = isCoordinatesTuple(formState.coordinates)
+    ? coords2degreeMinuteSecondsFlat(formState.coordinates)
+    : null
+
   return (
     <div className="flex flex-col gap-8">
       <Paragraph appearance="lead">{t('description')}</Paragraph>
@@ -163,9 +174,62 @@ const IncidentSummaryForm = () => {
             value={formState.address?.weergave_naam}
           >
             <div
-              style={{ minHeight: 200, height: 200 }}
+              className="signalen-map-img"
               role="img"
-              aria-label=""
+              inert
+              data-lat={formState.coordinates && formState.coordinates[0]}
+              data-lon={formState.coordinates && formState.coordinates[1]}
+              aria-label={
+                coordinates
+                  ? t('map_coords', {
+                      coords: t('coords', {
+                        latitudeDegree: numberFormat.format(
+                          coordinates.latitudeDegree
+                        ),
+                        latitudeMinute: numberFormat.format(
+                          coordinates.latitudeMinute
+                        ),
+                        latitudeSecond: numberFormat.format(
+                          coordinates.latitudeSecond
+                        ),
+                        longitudeDegree: numberFormat.format(
+                          coordinates.longitudeDegree
+                        ),
+                        longitudeMinute: numberFormat.format(
+                          coordinates.longitudeMinute
+                        ),
+                        longitudeSecond: numberFormat.format(
+                          coordinates.longitudeSecond
+                        ),
+                        latitudeDescription: coordinates.north
+                          ? t('north')
+                          : coordinates.south
+                            ? t('south')
+                            : '',
+                        longitudeDescription: coordinates.east
+                          ? t('east')
+                          : coordinates.west
+                            ? t('west')
+                            : '',
+                        degreeSuffix:
+                          // @ts-ignore
+                          unitDisplay === 'short'
+                            ? t('degree_short')
+                            : t('degree_long'),
+                        minuteSuffix:
+                          // @ts-ignore
+                          unitDisplay === 'short'
+                            ? t('minute_short')
+                            : t('minute_long'),
+                        secondSuffix:
+                          // @ts-ignore
+                          unitDisplay === 'short'
+                            ? t('second_short')
+                            : t('second_long'),
+                      }),
+                    })
+                  : undefined
+              }
             >
               <LocationMap />
             </div>

src/lib/utils/format-coordinates.ts

@@ -0,0 +1,89 @@
+type CoordinatesTuple = [number, number]
+
+export interface DegreeMinuteSecond {
+  degree: number
+  minute: number
+  second: number
+}
+
+export interface DegreeMinuteSecondCoordinates {
+  latitude: DegreeMinuteSecond & {
+    north: boolean
+    south: boolean
+  }
+  longitude: DegreeMinuteSecond & {
+    east: boolean
+    west: boolean
+  }
+}
+
+/**
+ * From: https://stackoverflow.com/posts/5786281
+ */
+export const degreeMinuteSecond = (d: number): DegreeMinuteSecond => {
+  let degree = Math.abs(Math.floor(d)),
+    minute = Math.abs(Math.floor(((d + 1e-9) % 1) * 60)),
+    second = Math.abs(Math.floor(((((d + 1e-9) * 60) % 1) * 6000) / 100))
+
+  return {
+    degree,
+    minute,
+    second,
+  }
+}
+
+export const coords2degreeMinuteSeconds = ([latitude, longitude]: [
+  number,
+  number,
+]) => {
+  return {
+    latitude: {
+      ...degreeMinuteSecond(latitude),
+      north: latitude >= 0,
+      south: latitude < 0,
+    },
+    longitude: {
+      ...degreeMinuteSecond(longitude),
+      east: longitude >= 0,
+      west: longitude < 0,
+    },
+  }
+}
+
+export const coords2degreeMinuteSecondsFlat = (coords: [number, number]) => {
+  const {
+    latitude: {
+      degree: latitudeDegree,
+      minute: latitudeMinute,
+      second: latitudeSecond,
+      south,
+      north,
+    },
+    longitude: {
+      degree: longitudeDegree,
+      minute: longitudeMinute,
+      second: longitudeSecond,
+      east,
+      west,
+    },
+  } = coords2degreeMinuteSeconds(coords)
+
+  return {
+    latitudeDegree,
+    latitudeMinute,
+    latitudeSecond,
+    longitudeDegree,
+    longitudeMinute,
+    longitudeSecond,
+    north,
+    south,
+    east,
+    west,
+  }
+}
+
+export const isCoordinatesTuple = (arg: any): arg is CoordinatesTuple =>
+  Array.isArray(arg) &&
+  arg.length === 2 &&
+  typeof arg[0] === 'number' &&
+  typeof arg[1] === 'number'

translations/en.json

@@ -128,7 +128,19 @@
         "heading": "Processing",
         "description": "Your report is being processed. You will automatically go to the next page once the report is received.\n\nPlease wait a moment...."
       }
-    }
+    },
+    "map_coords": "map zoomed into {coords}",
+    "coords": "{latitudeDegrees} {latitudeMinutes} {latitudeDescription}, {longitudeDegrees} {longitudeMinutes} {longitudeDescription}",
+    "north": "North",
+    "south": "South",
+    "east": "East",
+    "west": "West",
+    "degree_long": " degrees",
+    "minute_long": " minutes",
+    "second_long": " seconds",
+    "degree_short": "°",
+    "minute_short": "′",
+    "second_short": "″"
   },
   "describe_thankyou": {
     "heading": "Report submitted",

translations/nl.json

@@ -128,7 +128,19 @@
         "heading": "Bezig met afhandelen",
         "description": "Uw melding wordt afgehandeld. U gaat automatisch naar de volgende pagina zodra de melding is ontvangen.\n\nEen ogenblik geduld alstublieft..."
       }
-    }
+    },
+    "coords": "{latitudeDegree}{degreeSuffix} {latitudeMinute}{minuteSuffix} {latitudeDescription}, {longitudeDegree}{degreeSuffix} {longitudeMinute}{minuteSuffix} {longitudeDescription}",
+    "map_coords": "kaart ingezoomd op {coords}",
+    "north": "noorderbreedte",
+    "south": "zuiderbreedte",
+    "east": "oosterlengte",
+    "west": "westerlengte",
+    "degree_long": " graden",
+    "minute_long": " minuten",
+    "second_long": " seconden",
+    "degree_short": "°",
+    "minute_short": "′",
+    "second_short": "″"
   },
   "describe_thankyou": {
     "heading": "Melding verzonden",