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

---
 src/controls/LocateControl.ts | 7 +++++++
 src/pages/Map.tsx             | 2 ++
 2 files changed, 9 insertions(+)
 create mode 100644 src/controls/LocateControl.ts

(limited to 'src')

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