From f94bb4470652d819df0821daf9446189e0790eb2 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <94913521+arielcostas@users.noreply.github.com>
Date: Tue, 4 Mar 2025 00:17:11 +0100
Subject: Add location button to map

---
 package-lock.json             | 7 +++++++
 package.json                  | 1 +
 src/controls/LocateControl.ts | 7 +++++++
 src/pages/Map.tsx             | 2 ++
 4 files changed, 17 insertions(+)
 create mode 100644 src/controls/LocateControl.ts

diff --git a/package-lock.json b/package-lock.json
index 5830dbc..f2da70b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@fontsource-variable/outfit": "^5.2.5",
         "fuse.js": "^7.1.0",
         "leaflet": "^1.9.4",
+        "leaflet.locatecontrol": "^0.83.1",
         "leaflet.markercluster": "^1.5.3",
         "lucide-react": "^0.477.0",
         "react": "^19.0.0",
@@ -2261,6 +2262,12 @@
       "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
       "license": "BSD-2-Clause"
     },
+    "node_modules/leaflet.locatecontrol": {
+      "version": "0.83.1",
+      "resolved": "https://registry.npmjs.org/leaflet.locatecontrol/-/leaflet.locatecontrol-0.83.1.tgz",
+      "integrity": "sha512-oF5uey4GOpnw/ly379fV8JQJuUQes9eECaWo8voTIWLQERYPCudOgfUzFggUbq+kpCMNz7BxP/MsLbyf77QorA==",
+      "license": "MIT"
+    },
     "node_modules/leaflet.markercluster": {
       "version": "1.5.3",
       "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
diff --git a/package.json b/package.json
index ef63828..535183a 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@fontsource-variable/outfit": "^5.2.5",
     "fuse.js": "^7.1.0",
     "leaflet": "^1.9.4",
+    "leaflet.locatecontrol": "^0.83.1",
     "leaflet.markercluster": "^1.5.3",
     "lucide-react": "^0.477.0",
     "react": "^19.0.0",
diff --git a/src/controls/LocateControl.ts b/src/controls/LocateControl.ts
new file mode 100644
index 0000000..4ef8243
--- /dev/null
+++ b/src/controls/LocateControl.ts
@@ -0,0 +1,7 @@
+import {createControlComponent} from '@react-leaflet/core';
+import {LocateControl as LeafletLocateControl} from 'leaflet.locatecontrol';
+import "leaflet.locatecontrol/dist/L.Control.Locate.min.css";
+
+export const LocateControl = createControlComponent(
+    (props) => new LeafletLocateControl(props)
+);
\ No newline at end of file
diff --git a/src/pages/Map.tsx b/src/pages/Map.tsx
index 3368e09..e7a7b2f 100644
--- a/src/pages/Map.tsx
+++ b/src/pages/Map.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router';
 import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
 import MarkerClusterGroup from "react-leaflet-markercluster";
 import { Icon, LatLngTuple } from "leaflet";
+import { LocateControl } from "../controls/LocateControl";
 
 const icon = new Icon({
 	iconUrl: '/map-pin-icon.png',
@@ -34,6 +35,7 @@ export function StopMap() {
 				attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>'
 				url="https://d.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png"
 			/>
+			<LocateControl />
 			<MarkerClusterGroup>
 				{stops.map((stop) => (
 					<Marker key={stop.stopId} position={[stop.latitude, stop.longitude] as LatLngTuple} icon={icon}>
-- 
cgit v1.3