diff --git a/package.json b/package.json
index 5e50482..43b90f6 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77250d3..2ceff37 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@heroicons/react':
+    specifier: ^2.1.3
+    version: 2.1.3(react@18.2.0)
   '@serwist/next':
     specifier: ^8.4.4
     version: 8.4.4(next@14.1.4)(webpack@5.91.0)
@@ -641,6 +644,14 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@heroicons/react@2.1.3(react@18.2.0):
+    resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
+    peerDependencies:
+      react: '>= 16'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@humanwhocodes/config-array@0.11.14:
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
diff --git a/src/app/[locale]/page.tsx b/src/app/[locale]/page.tsx
index 4414197..670d0d9 100644
--- a/src/app/[locale]/page.tsx
+++ b/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>
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
index 22864a5..9896c90 100644
--- a/src/components/Map.tsx
+++ b/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>
   );
 }
diff --git a/src/services/overpass.ts b/src/services/overpass.ts
index 76fffba..6e8dae6 100644
--- a/src/services/overpass.ts
+++ b/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;
+});