Fit map to NZ bounds on load

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>
   )