diff --git a/components/map-url-params.js b/components/map-url-params.js new file mode 100644 index 00000000..8fde72c6 --- /dev/null +++ b/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; +} diff --git a/components/map.js b/components/map.js index 9634c886..6331175e 100644 --- a/components/map.js +++ b/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() { +