From 19b2b00750ddb942a76cf4165b207ab55b0390a7 Mon Sep 17 00:00:00 2001
From: Dana Lambert <danalambert@catalyst.net.nz>
Date: Mon, 18 Oct 2021 17:09:56 +1300
Subject: [PATCH] Fit map to NZ bounds on load

---
 frontend/src/components/steps/location/Map.js | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/location/Map.js
index fb9e85f..e38ce6f 100644
--- a/frontend/src/components/steps/location/Map.js
+++ b/frontend/src/components/steps/location/Map.js
@@ -1,18 +1,25 @@
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
+import { MapContainer, TileLayer, useMap } from 'react-leaflet'
+
+const NZ_BOUNDS = [
+  [-47.204642, 165.344238],
+  [-34.307144, 179.824219]
+]
+
+function FitNewZealandBounds() {
+  const map = useMap()
+  map.fitBounds(NZ_BOUNDS)
+  return null
+}
 
 export default function Map() {
   return (
     <div className="map-container">
-      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
+      <MapContainer scrollWheelZoom={true}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
-        <Marker position={[51.505, -0.09]}>
-          <Popup>
-            A pretty CSS3 popup. <br /> Easily customizable.
-          </Popup>
-        </Marker>
+        <FitNewZealandBounds />
       </MapContainer>
     </div>
   )