Work on map rides

components/OpenStreetMap.tsx

@@ -0,0 +1,78 @@
+'use client'
+
+import L from 'leaflet'
+import MarkerIcon from '../node_modules/leaflet/dist/images/marker-icon.png'
+import MarkerShadow from '../node_modules/leaflet/dist/images/marker-shadow.png'
+import 'leaflet/dist/leaflet.css'
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet'
+import { useEffect, useState } from 'react'
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button'
+import Stack from '@mui/material/Stack'
+
+function MyLocationButton({ setPosition }) {
+	const getMyLocation = () => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition((position) => {
+                setPosition([position.coords.latitude, position.coords.longitude])
+            })
+        } else {
+            console.log("Geolocation is not supported by this browser.")
+        }
+	};
+
+    return (
+		<Button variant="contained" onClick={getMyLocation}>Get My Location</Button>
+    )
+}
+
+function StartMarker({pos}) {
+	const map = useMap();
+
+	useEffect(() => {
+		map.flyTo(pos, map.getZoom());
+	}, [map, pos]);
+
+	return (<Marker icon={
+		new L.Icon({
+			iconUrl: MarkerIcon.src,
+			iconRetinaUrl: MarkerIcon.src,
+			iconSize: [25, 41],
+			iconAnchor: [12.5, 41],
+			popupAnchor: [0, -41],
+			shadowUrl: MarkerShadow.src,
+			shadowSize: [41, 41],
+		})
+	} position={pos}>
+	<Popup>
+		You are here.
+	</Popup>
+</Marker>);
+}
+
+const OpenStreetMap = () => {
+
+    const [coord, setCoord] = useState([51.505, -0.09])
+
+    return (
+        <Box>
+			<Stack spacing={2} direction="row">
+            <MyLocationButton setPosition={setCoord} />
+			<Button variant="contained">Load GPX</Button>
+			</Stack>
+            <MapContainer style={{
+                height: '70vh',
+                width: '70vw'
+            }} center={coord} zoom={13} scrollWheelZoom={false}>
+                <TileLayer
+                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                />
+
+			<StartMarker pos={coord} />
+            </MapContainer>
+        </Box>
+    )
+}
+
+export default OpenStreetMap

package.json

@@ -23,6 +23,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hooks-global-state": "2.1.0",
+    "react-leaflet": "^4.2.1",
     "sharp": "0.31.2"
   },
   "devDependencies": {

pages/ride/index.tsx

@@ -20,6 +20,9 @@ export default function Ride() {
 					<MenuCard title="Workout" href="/ride/workout">
 						Predefined workout profiles.
 					</MenuCard>
+					<MenuCard title="Map Ride" href="/ride/map">
+						Ride along a route on a map.
+					</MenuCard>
 					<MenuCard title="Virtual Ride" href="/ride/virtual">
 						Virtual ride with a recorded profile and video.
 					</MenuCard>

pages/ride/map/index.tsx

@@ -0,0 +1,26 @@
+import dynamic from 'next/dynamic';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import MyHead from '../../../components/MyHead';
+import Title from '../../../components/Title';
+
+const DynamicMap = dynamic(() => import('../../../components/OpenStreetMap'), {
+  ssr: false
+});
+
+export default function RideWorkout() {
+	return (
+		<Container maxWidth="md">
+			<MyHead title="Map Ride" />
+			<Box>
+				<Title href="/ride">Map Ride</Title>
+				<p>Plan your ride.</p>
+
+				<DynamicMap />
+
+				<Grid container direction="row" alignItems="center" spacing={2}></Grid>
+			</Box>
+		</Container>
+	);
+}