From 3db31cd9f1838fa0593c1a32f27e37e546630872 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Mon, 6 Jan 2025 17:07:11 +0100
Subject: [PATCH 1/7] Add current location button

---
 .../locatie/kies/_components/BaseLayer.tsx    | 25 ++++++++++++++++---
 .../CurrentLocationButton.tsx                 | 23 +++++++++++++++++
 .../Notification/Notification.module.css      |  3 +++
 .../_components/Notification/Notification.tsx |  6 +++++
 .../locatie/kies/_components/map.module.css   | 15 +++++++++++
 5 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx
 create mode 100644 apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.module.css
 create mode 100644 apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.tsx

diff --git a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
index 36ae1413..497f0d05 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
+++ b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
@@ -1,11 +1,16 @@
+import { Paragraph } from '@amsterdam/design-system-react'
 import L from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
 
 import 'leaflet/dist/leaflet.css'
+import { CurrentLocationButton } from './CurrentLocationButton/CurrentLocationButton'
 import styles from './map.module.css'
+import { Notification } from './Notification/Notification'
 
 export const BaseLayer = () => {
-  const containerRef = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<HTMLDivElement>(null)
+
+  const [notification, setNotification] = useState<{ heading: string; description: string } | null>(null)
 
   // Use state instead of a ref for storing the Leaflet map object otherwise you may run into DOM issues when React StrictMode is enabled
   const [mapInstance, setMapInstance] = useState<L.Map | null>(null)
@@ -15,11 +20,11 @@ export const BaseLayer = () => {
 
   useEffect(() => {
     // Ensure that the target DOM element exists and that the map doesn't already exist (to prevent duplicate renders in StrictMode)
-    if (containerRef.current === null || createdMapInstance.current !== false) {
+    if (mapRef.current === null || createdMapInstance.current !== false) {
       return undefined
     }
 
-    const map = new L.Map(containerRef.current, {
+    const map = new L.Map(mapRef.current, {
       center: L.latLng([52.370216, 4.895168]),
       zoom: 14,
       layers: [
@@ -57,5 +62,17 @@ export const BaseLayer = () => {
     }
   }, [mapInstance])
 
-  return <div className={styles.container} ref={containerRef} />
+  return (
+    <div className={styles.container}>
+      <div className={styles.map} ref={mapRef} />
+      <div className={styles.overlay}>
+        <CurrentLocationButton setNotification={setNotification}>Mijn locatie</CurrentLocationButton>
+        {notification && (
+          <Notification heading={notification.heading} closeable onClose={() => setNotification(null)}>
+            <Paragraph>{notification.description}</Paragraph>
+          </Notification>
+        )}
+      </div>
+    </div>
+  )
 }
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx b/apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx
new file mode 100644
index 00000000..cca076e6
--- /dev/null
+++ b/apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx
@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@amsterdam/design-system-react'
+import { Button } from '@amsterdam/design-system-react'
+
+type Props = {
+  setNotification: (notification: { heading: string; description: string } | null) => void
+} & ButtonProps
+
+export const CurrentLocationButton = ({ setNotification, ...restProps }: Props) => {
+  const onSuccess = () => console.log('success')
+
+  const onError = () => {
+    setNotification({
+      heading: 'meldingen.amsterdam.nl heeft geen toestemming om uw locatie te gebruiken.',
+      description: 'Dit kunt u wijzigen in de voorkeuren of instellingen van uw browser of systeem.',
+    })
+  }
+
+  const handleClick = () => {
+    navigator.geolocation.getCurrentPosition(onSuccess, onError)
+  }
+
+  return <Button {...restProps} variant="secondary" onClick={handleClick} />
+}
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.module.css b/apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.module.css
new file mode 100644
index 00000000..bf564727
--- /dev/null
+++ b/apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.module.css
@@ -0,0 +1,3 @@
+.notification {
+  background-color: white;
+}
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.tsx b/apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.tsx
new file mode 100644
index 00000000..adc2e15c
--- /dev/null
+++ b/apps/public/src/app/(map)/locatie/kies/_components/Notification/Notification.tsx
@@ -0,0 +1,6 @@
+import type { AlertProps } from '@amsterdam/design-system-react'
+import { Alert } from '@amsterdam/design-system-react'
+
+import styles from './Notification.module.css'
+
+export const Notification = (props: AlertProps) => <Alert {...props} className={styles.notification} severity="error" />
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/map.module.css b/apps/public/src/app/(map)/locatie/kies/_components/map.module.css
index 6479673b..eb352d68 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/map.module.css
+++ b/apps/public/src/app/(map)/locatie/kies/_components/map.module.css
@@ -1,3 +1,18 @@
 .container {
+  position: relative;
+}
+
+.map {
   height: 100vh;
 }
+
+.overlay {
+  position: absolute;
+  top: 0;
+
+  /*
+    Leaflet uses z-indexes to stack layers. The highest Leaflet z-index is 700.
+    https://leafletjs.com/reference.html#map-pane
+  */
+  z-index: 701;
+}

From 8c48a8a788fce308da10b70b4ed87c132e7927c0 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 7 Jan 2025 09:42:20 +0100
Subject: [PATCH 2/7] Add marker on current location button click

---
 .../locatie/kies/_components/BaseLayer.tsx    | 39 ++++++++++++++++---
 .../CurrentLocationButton.tsx                 | 23 -----------
 2 files changed, 34 insertions(+), 28 deletions(-)
 delete mode 100644 apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx

diff --git a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
index 497f0d05..5faa8330 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
+++ b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
@@ -1,20 +1,21 @@
-import { Paragraph } from '@amsterdam/design-system-react'
+import { Button, Paragraph } from '@amsterdam/design-system-react'
 import L from 'leaflet'
 import { useEffect, useRef, useState } from 'react'
 
 import 'leaflet/dist/leaflet.css'
-import { CurrentLocationButton } from './CurrentLocationButton/CurrentLocationButton'
 import styles from './map.module.css'
 import { Notification } from './Notification/Notification'
 
 export const BaseLayer = () => {
   const mapRef = useRef<HTMLDivElement>(null)
 
-  const [notification, setNotification] = useState<{ heading: string; description: string } | null>(null)
-
   // Use state instead of a ref for storing the Leaflet map object otherwise you may run into DOM issues when React StrictMode is enabled
   const [mapInstance, setMapInstance] = useState<L.Map | null>(null)
 
+  const [markerLayer, setMarkerLayer] = useState<L.Marker | null>(null)
+
+  const [notification, setNotification] = useState<{ heading: string; description: string } | null>(null)
+
   // This could be a useState but as we don't expect this to fire more than once, use ref as it is mutable and won't trigger any further re-render
   const createdMapInstance = useRef(false)
 
@@ -62,11 +63,39 @@ export const BaseLayer = () => {
     }
   }, [mapInstance])
 
+  const onSuccess: PositionCallback = ({ coords }) => {
+    // TODO: is this correct? What should happen when you click the button without a map instance?
+    if (!mapInstance) return
+
+    const { latitude, longitude } = coords
+
+    // Remove existing marker layer
+    markerLayer?.remove()
+
+    // Create marker layer and add to map
+    const marker = L.marker(L.latLng([latitude, longitude])).addTo(mapInstance)
+
+    // Store marker layer in state
+    setMarkerLayer(marker)
+  }
+
+  const onError = () => {
+    // TODO: these texts should come from the BE, or a config / env vars
+    setNotification({
+      heading: 'meldingen.amsterdam.nl heeft geen toestemming om uw locatie te gebruiken.',
+      description: 'Dit kunt u wijzigen in de voorkeuren of instellingen van uw browser of systeem.',
+    })
+  }
+
+  const handleCurrentLocationButtonClick = () => navigator.geolocation.getCurrentPosition(onSuccess, onError)
+
   return (
     <div className={styles.container}>
       <div className={styles.map} ref={mapRef} />
       <div className={styles.overlay}>
-        <CurrentLocationButton setNotification={setNotification}>Mijn locatie</CurrentLocationButton>
+        <Button variant="secondary" onClick={handleCurrentLocationButtonClick}>
+          Mijn locatie
+        </Button>
         {notification && (
           <Notification heading={notification.heading} closeable onClose={() => setNotification(null)}>
             <Paragraph>{notification.description}</Paragraph>
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx b/apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx
deleted file mode 100644
index cca076e6..00000000
--- a/apps/public/src/app/(map)/locatie/kies/_components/CurrentLocationButton/CurrentLocationButton.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import type { ButtonProps } from '@amsterdam/design-system-react'
-import { Button } from '@amsterdam/design-system-react'
-
-type Props = {
-  setNotification: (notification: { heading: string; description: string } | null) => void
-} & ButtonProps
-
-export const CurrentLocationButton = ({ setNotification, ...restProps }: Props) => {
-  const onSuccess = () => console.log('success')
-
-  const onError = () => {
-    setNotification({
-      heading: 'meldingen.amsterdam.nl heeft geen toestemming om uw locatie te gebruiken.',
-      description: 'Dit kunt u wijzigen in de voorkeuren of instellingen van uw browser of systeem.',
-    })
-  }
-
-  const handleClick = () => {
-    navigator.geolocation.getCurrentPosition(onSuccess, onError)
-  }
-
-  return <Button {...restProps} variant="secondary" onClick={handleClick} />
-}

From 8285d81916dc1d0228f9622c262bc97dd3d34312 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 7 Jan 2025 11:34:13 +0100
Subject: [PATCH 3/7] Add marker svg

---
 apps/public/public/icon-select-marker.svg                 | 8 ++++++++
 .../src/app/(map)/locatie/kies/_components/BaseLayer.tsx  | 5 +++--
 .../app/(map)/locatie/kies/_components/Marker/Marker.tsx  | 7 +++++++
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 apps/public/public/icon-select-marker.svg
 create mode 100644 apps/public/src/app/(map)/locatie/kies/_components/Marker/Marker.tsx

diff --git a/apps/public/public/icon-select-marker.svg b/apps/public/public/icon-select-marker.svg
new file mode 100644
index 00000000..10829410
--- /dev/null
+++ b/apps/public/public/icon-select-marker.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#666" d="M20.27 1C13.374 1 8 6.27 8 12.946 8 19.927 20.27 38.69 20.27 38.69s12.267-18.897 12.267-25.744C32.537 6.28 27.264 1 20.27 1m0 3.382c5.014 0 8.794 3.682 8.794 8.564 0 .803-.41 4.173-5.703 13.81a172.15 172.15 0 0 1-3.1 5.394 166.914 166.914 0 0 1-3.086-5.35c-5.147-9.34-5.702-12.8-5.702-13.854 0-2.33.9-4.493 2.533-6.087 1.637-1.597 3.862-2.477 6.264-2.477"/>
+        <path fill="#FFF" d="M19.265 35.392C15.373 28.977 8.736 17.045 8.736 12.263c0-5.903 4.627-10.527 10.534-10.527 6.004 0 10.53 4.526 10.53 10.527 0 4.69-6.643 16.678-10.535 23.13"/>
+        <path fill="#EC0000" d="M19.27 0C12.374 0 7 5.41 7 12.264c0 7.167 12.27 26.43 12.27 26.43s12.267-19.4 12.267-26.43C31.537 5.422 26.264 0 19.27 0m0 3.473c5.014 0 8.794 3.779 8.794 8.79 0 .825-.41 4.285-5.703 14.178a177.988 177.988 0 0 1-3.1 5.538 172.554 172.554 0 0 1-3.086-5.491c-5.147-9.59-5.702-13.142-5.702-14.224 0-2.393.9-4.612 2.533-6.249 1.637-1.64 3.862-2.542 6.264-2.542"/>
+        <path fill="#F00" d="M22.462 11.948a3.266 3.266 0 1 1-6.533 0 3.266 3.266 0 0 1 6.533 0"/>
+    </g>
+</svg>
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
index 5faa8330..5c36baea 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
+++ b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.tsx
@@ -4,6 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 
 import 'leaflet/dist/leaflet.css'
 import styles from './map.module.css'
+import { marker } from './Marker/Marker'
 import { Notification } from './Notification/Notification'
 
 export const BaseLayer = () => {
@@ -73,10 +74,10 @@ export const BaseLayer = () => {
     markerLayer?.remove()
 
     // Create marker layer and add to map
-    const marker = L.marker(L.latLng([latitude, longitude])).addTo(mapInstance)
+    const newMarker = L.marker(L.latLng([latitude, longitude]), { icon: marker }).addTo(mapInstance)
 
     // Store marker layer in state
-    setMarkerLayer(marker)
+    setMarkerLayer(newMarker)
   }
 
   const onError = () => {
diff --git a/apps/public/src/app/(map)/locatie/kies/_components/Marker/Marker.tsx b/apps/public/src/app/(map)/locatie/kies/_components/Marker/Marker.tsx
new file mode 100644
index 00000000..1c07d72e
--- /dev/null
+++ b/apps/public/src/app/(map)/locatie/kies/_components/Marker/Marker.tsx
@@ -0,0 +1,7 @@
+import L from 'leaflet'
+
+export const marker = L.icon({
+  iconUrl: '/icon-select-marker.svg',
+  iconSize: [40, 40],
+  iconAnchor: [20, 39],
+})

From 97a2409ea52a00d35f8ba1c0d5a042c7b021c296 Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 7 Jan 2025 13:42:35 +0100
Subject: [PATCH 4/7] Fix styling

---
 .../src/app/(map)/locatie/kies/_components/map.module.css   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/apps/public/src/app/(map)/locatie/kies/_components/map.module.css b/apps/public/src/app/(map)/locatie/kies/_components/map.module.css
index eb352d68..5fbbdf70 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/map.module.css
+++ b/apps/public/src/app/(map)/locatie/kies/_components/map.module.css
@@ -7,6 +7,12 @@
 }
 
 .overlay {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-space-sm);
+  padding-block: var(--ams-space-sm);
+  padding-inline: var(--ams-space-sm);
   position: absolute;
   top: 0;
 

From 148a6af855b3e249aea0741e7fb7c326cbaa3f6b Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Tue, 7 Jan 2025 14:08:22 +0100
Subject: [PATCH 5/7] Add tests

---
 .../kies/_components/BaseLayer.test.tsx       | 66 ++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx
index 38461333..f2e40219 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx
+++ b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx
@@ -1,4 +1,6 @@
-import { render } from '@testing-library/react'
+import { screen, render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi } from 'vitest'
 
 import { BaseLayer } from './BaseLayer'
 
@@ -7,6 +9,68 @@ describe('BaseLayer', () => {
     const { container } = render(<BaseLayer />)
     expect(container.firstChild).toBeInTheDocument()
   })
+
+  it('renders the current location button', () => {
+    render(<BaseLayer />)
+
+    const button = screen.getByRole('button', { name: 'Mijn locatie' })
+
+    expect(button).toBeInTheDocument()
+  })
+
+  it('displays a notification on geolocation error', async () => {
+    const mockGeolocation = {
+      getCurrentPosition: vi.fn().mockImplementationOnce((_, error) =>
+        error({
+          code: 1,
+          message: 'User denied Geolocation',
+        }),
+      ),
+    }
+
+    // @ts-expect-error: This isn't a problem in tests
+    global.navigator.geolocation = mockGeolocation
+
+    const user = userEvent.setup()
+
+    render(<BaseLayer />)
+
+    const button = screen.getByRole('button', { name: 'Mijn locatie' })
+
+    await user.click(button)
+
+    const notification = screen.getByRole('heading', {
+      name: 'meldingen.amsterdam.nl heeft geen toestemming om uw locatie te gebruiken.',
+    })
+
+    expect(notification).toBeInTheDocument()
+  })
+
+  it('calls onSuccess on geolocation success', async () => {
+    const mockGeolocation = {
+      getCurrentPosition: vi.fn().mockImplementationOnce((success) =>
+        success({
+          coords: {
+            latitude: 52.370216,
+            longitude: 4.895168,
+          },
+        }),
+      ),
+    }
+
+    // @ts-expect-error: This isn't a problem in tests
+    global.navigator.geolocation = mockGeolocation
+
+    const user = userEvent.setup()
+
+    render(<BaseLayer />)
+
+    const button = screen.getByRole('button', { name: 'Mijn locatie' })
+
+    await user.click(button)
+
+    expect(mockGeolocation.getCurrentPosition).toHaveBeenCalled()
+  })
 })
 
 // TODO: add tests

From 2f15da33be16502ed0277d0e7a06a3a54f4d56ee Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Mon, 13 Jan 2025 10:57:21 +0100
Subject: [PATCH 6/7] Update next-env

---
 apps/public/next-env.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/public/next-env.d.ts b/apps/public/next-env.d.ts
index 40c3d680..1b3be084 100644
--- a/apps/public/next-env.d.ts
+++ b/apps/public/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

From 60e69f2c5ba11eb86e19ce6ea7b9b90a604b1ffd Mon Sep 17 00:00:00 2001
From: alimpens <a.limpens@amsterdam.nl>
Date: Mon, 13 Jan 2025 11:50:55 +0100
Subject: [PATCH 7/7] Add test for adding marker

---
 .../kies/_components/BaseLayer.test.tsx       | 35 ++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx
index f2e40219..51b0b1cb 100644
--- a/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx
+++ b/apps/public/src/app/(map)/locatie/kies/_components/BaseLayer.test.tsx
@@ -1,8 +1,25 @@
-import { screen, render } from '@testing-library/react'
+import { screen, render, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import leaflet from 'leaflet'
 import { vi } from 'vitest'
 
 import { BaseLayer } from './BaseLayer'
+import { marker } from './Marker/Marker'
+
+vi.mock('leaflet', async (importOriginal) => {
+  const actual = await importOriginal()
+
+  const markerMock = {
+    addTo: vi.fn(),
+  }
+
+  return {
+    default: {
+      ...(typeof actual === 'object' ? actual : {}),
+      marker: vi.fn(() => markerMock),
+    },
+  }
+})
 
 describe('BaseLayer', () => {
   it('renders the component', () => {
@@ -46,7 +63,7 @@ describe('BaseLayer', () => {
     expect(notification).toBeInTheDocument()
   })
 
-  it('calls onSuccess on geolocation success', async () => {
+  it('adds a marker on geolocation success', async () => {
     const mockGeolocation = {
       getCurrentPosition: vi.fn().mockImplementationOnce((success) =>
         success({
@@ -70,7 +87,17 @@ describe('BaseLayer', () => {
     await user.click(button)
 
     expect(mockGeolocation.getCurrentPosition).toHaveBeenCalled()
+
+    await waitFor(() => {
+      expect(leaflet.marker).toHaveBeenCalledWith(
+        {
+          lat: 52.370216,
+          lng: 4.895168,
+        },
+        {
+          icon: marker,
+        },
+      )
+    })
   })
 })
-
-// TODO: add tests