Use HomeIcon for user loc

components/map/Marker.tsx

@@ -1,28 +1,36 @@
 'use client';
 import L from 'leaflet';
 import { Marker, Popup } from 'react-leaflet';
+import { ReactNode } from 'react';
+import { renderToString } from 'react-dom/server';
 import MarkerIcon from '../../node_modules/leaflet/dist/images/marker-icon.png';
 import MarkerShadow from '../../node_modules/leaflet/dist/images/marker-shadow.png';
-import { ReactNode } from 'react';
 
-export function createMarkerIcon() {
-	return 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],
-	});
+export function createMarkerIcon(icon?: ReactNode ) {
+	if (icon) {
+		return L.divIcon({
+			html: renderToString(icon),
+			className: null,
+		});
+	} else {
+		return 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],
+		});
+	}
 }
 
-export default function MapMarker({ position, children }: { position: [number, number]; children?: ReactNode }) {
+export default function MapMarker({ icon, position, children }: { icon?: ReturnType<typeof createMarkerIcon>; position: [number, number]; children?: ReactNode; }) {
 	return (
 		<Marker
 			position={position}
 			// @ts-ignore
-			icon={createMarkerIcon()}
+			icon={createMarkerIcon(icon)}
 		>
 			<Popup>{children}</Popup>
 		</Marker>

pages/ride/map/index.tsx

@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic';
+import { useEffect, useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Grid from '@mui/material/Grid';
@@ -7,7 +8,7 @@ import Button from '@mui/material/Button';
 import Switch from '@mui/material/Switch';
 import FormGroup from '@mui/material/FormGroup';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { useEffect, useMemo, useState } from 'react';
+import IconHome from '@mui/icons-material/Home';
 import MyHead from '../../../components/MyHead';
 import Title from '../../../components/Title';
 import OpenStreetMap from '../../../components/map/OpenStreetMap';
@@ -113,7 +114,7 @@ export default function RideMap() {
 				</Stack>
 
 				<DynamicMap center={coord} setMap={setMap}>
-					<DynamicMapMarker position={coord}>You are here.</DynamicMapMarker>
+					<DynamicMapMarker icon={<IconHome/>} position={coord}>You are here.</DynamicMapMarker>
 					{editMode ? <DynamicMapEditCourse initialCourse={course} setCourse={setCourse} /> : null}
 					{course && !editMode ? <DynamicCourse course={course} /> : null}
 				</DynamicMap>