feat: add locate

package.json

@@ -12,6 +12,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "@serwist/next": "^8.4.4",
     "@serwist/precaching": "^8.4.4",
     "@serwist/sw": "^8.4.4",

src/app/[locale]/page.tsx

@@ -1,4 +1,5 @@
 import dynamic from "next/dynamic";
+import { type OverpassQueryFilter } from "overpass-ql-ts";
 
 import { getData } from "@/services/overpass";
 
@@ -7,14 +8,19 @@ const LazyMap = dynamic(() => import("@/components/Map"), {
   loading: () => <p>Loading...</p>,
 });
 
+const QUERY: OverpassQueryFilter = {
+  amenity: /(bar|restaurant|pub|cafe)/,
+  changing_table: "yes",
+};
+
 export default async function Home() {
-  const data = await getData({ amenity: "restaurant", changing_table: "yes" });
+  const data = await getData(QUERY);
   return (
     <main className="h-full">
       <LazyMap
-        spots={data.elements.map((e: any) => ({
+        spots={data.map((e: any) => ({
           position: [e.lat, e.lon],
-          content: e.tags.name,
+          content: e.tags?.name,
         }))}
       />
     </main>

src/components/Map.tsx

@@ -4,10 +4,40 @@ import "leaflet/dist/leaflet.css";
 import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
 import "leaflet-defaulticon-compatibility";
 
-import { MapContainer, TileLayer } from "react-leaflet";
+import { ViewfinderCircleIcon } from "@heroicons/react/24/solid";
+import { useEffect } from "react";
+import { MapContainer, TileLayer, useMap } from "react-leaflet";
 
 import Spot from "./Spot";
 
+const POSITION_CLASSES = {
+  bottomleft: "leaflet-bottom leaflet-left",
+  bottomright: "leaflet-bottom leaflet-right",
+  topleft: "leaflet-top leaflet-left",
+  topright: "leaflet-top leaflet-right",
+};
+
+const LocationControl = ({ position }: { position: string }) => {
+  const map = useMap();
+  const locate = () => {
+    map.locate().on("locationfound", function (e) {
+      map.flyTo(e.latlng, map.getZoom());
+    });
+  };
+
+  useEffect(locate, [map]);
+
+  const positionClass =
+    (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright;
+  return (
+    <div className={positionClass}>
+      <button onClick={locate} className="leaflet-control leaflet-bar btn">
+        <ViewfinderCircleIcon className="h-6 w-6 text-black" />
+      </button>
+    </div>
+  );
+};
+
 export default function Map({ spots }: { spots: any[] }) {
   return (
     <MapContainer
@@ -23,6 +53,7 @@ export default function Map({ spots }: { spots: any[] }) {
       {spots.map((spot) => (
         <Spot {...spot} key={spot.position.join(";")} />
       ))}
+      <LocationControl position="topright" />
     </MapContainer>
   );
 }

src/services/overpass.ts

@@ -1,9 +1,12 @@
-// @ts-expect-error
-import { DefaultOverpassApi } from "overpass-ql-ts";
+import { DefaultOverpassApi, type OverpassQueryFilter } from "overpass-ql-ts";
 import { cache } from "react";
 
 const api = DefaultOverpassApi();
 
-export const getData = cache(async (query: any) =>
-  api.execJson((s: any) => [s.node.query(query)]),
-);
+export const getData = cache(async (query: OverpassQueryFilter) => {
+  const results = await api.execJson((s) => {
+    return [s.node.query(query)];
+  });
+  console.debug(`Found ${results.elements.length} elements.`);
+  return results.elements;
+});