From 05665b545bff5ebbc80121c807989528e81fd191 Mon Sep 17 00:00:00 2001
From: Dana Lambert <danalambert@catalyst.net.nz>
Date: Mon, 18 Oct 2021 17:19:45 +1300
Subject: [PATCH] Add marker to map on click with coordinate tooltip

---
 frontend/src/components/steps/location/Map.js | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js
index e38ce6f..9de4b32 100644
--- a/frontend/src/components/steps/location/Map.js
+++ b/frontend/src/components/steps/location/Map.js
@@ -1,10 +1,30 @@
-import { MapContainer, TileLayer, useMap } from 'react-leaflet'
+import { useState } from "react"
+
+import { MapContainer, TileLayer, Marker, Popup, useMapEvents, useMap } from 'react-leaflet'
 
 const NZ_BOUNDS = [
   [-47.204642, 165.344238],
   [-34.307144, 179.824219]
 ]
 
+function LocationMarker() {
+  const [position, setPosition] = useState(null)
+  useMapEvents({
+    click(e) {
+      setPosition(e.latlng)
+    },
+  })
+
+  return position === null ? null : (
+    <Marker position={position}>
+      <Popup>
+        <strong>Latitude:</strong> {position.lat} <br/>
+        <strong>Longitude:</strong> {position.lng}
+        </Popup>
+    </Marker>
+  )
+}
+
 function FitNewZealandBounds() {
   const map = useMap()
   map.fitBounds(NZ_BOUNDS)
@@ -19,6 +39,7 @@ export default function Map() {
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
+        <LocationMarker />
         <FitNewZealandBounds />
       </MapContainer>
     </div>