diff options
| -rw-r--r-- | package-lock.json | 7 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/controls/LocateControl.ts | 7 | ||||
| -rw-r--r-- | src/pages/Map.tsx | 2 |
4 files changed, 17 insertions, 0 deletions
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='© <a href="http://osm.org/copyright">OpenStreetMap</a>, © <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}> |