chore: fix marker icon

web/src/components/LeafletMap.tsx

@@ -1,7 +1,14 @@
-import { LatLng } from "leaflet";
+import { DivIcon, LatLng } from "leaflet";
+import { MapPinIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import ReactDOMServer from "react-dom/server";
 import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
 
+const markerIcon = new DivIcon({
+  className: "border-none",
+  html: ReactDOMServer.renderToString(<MapPinIcon size={24} />),
+});
+
 interface MarkerProps {
   position: LatLng | undefined;
   onChange: (position: LatLng) => void;
@@ -26,7 +33,7 @@ const LocationMarker = (props: MarkerProps) => {
     map.locate();
   }, []);
 
-  return position === undefined ? null : <Marker position={position}></Marker>;
+  return position === undefined ? null : <Marker position={position} icon={markerIcon}></Marker>;
 };
 
 interface MapProps {
@@ -37,7 +44,7 @@ interface MapProps {
 const LeafletMap = (props: MapProps) => {
   return (
     <MapContainer className="w-full h-72" center={props.latlng} zoom={13} scrollWheelZoom={false}>
-      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution="" />
+      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
       <LocationMarker position={props.latlng} onChange={props.onChange ? props.onChange : () => {}} />
     </MapContainer>
   );