Create GPS URL query

components/map-url-params.js

@@ -0,0 +1,30 @@
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useMap, useMapEvent } from "react-leaflet";
+
+export default function MapURLParams() {
+  // const route = useRouter();
+  // // console.log(route);
+
+  // const [location, setLocation] = useState(() => {
+  //   const { lng, lat, zoom } = route.query;
+  //   return { lng: lng, lat: lat, zoom: zoom };
+  // });
+  // // zoomend
+  // const map = useMapEvent("dragend zoomend", (e) => {
+  //   const z = e.target.getZoom();
+  //   const c = e.target.getCenter();
+  //   console.log("onMoveEnd", z, c);
+    // setLocation({
+    //   lng: c.lng,
+    //   lat: c.lat,
+    //   zoom: z,
+    // });
+    // route.push(`?lat=${c.lat}&lng=${c.lng}&zoom=${z}`, undefined, {
+    //   shallow: true,
+    // });
+    // map.setView([c.lat, c.lng], z);
+  // });
+
+  return null;
+}

components/map.js

@@ -5,6 +5,7 @@ import "leaflet/dist/leaflet.css";
 import SracLocation from "../components/map-srac-location";
 import MapToilets from "../components/map-toilets";
 import MapPicker from "./map-picker";
+import MapURLParams from "./map-url-params";
 
 export default function Map() {
   return (
@@ -21,6 +22,7 @@ export default function Map() {
       <SracLocation />
       <MapToilets />
       <MapPicker />
+      <MapURLParams />
       <link
         rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.css"

lib/utils.js

@@ -0,0 +1,6 @@
+export function parseParamsFloat(input) {
+  return parseFloat(input);
+}
+export function parseParamsInt(input) {
+  return parseInt(input);
+}