diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/controls/LocateControl.ts | 7 | ||||
| -rw-r--r-- | src/pages/Map.tsx | 2 |
2 files changed, 9 insertions, 0 deletions
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}> |