mirror of
https://github.com/usememos/memos.git
synced 2025-06-05 22:09:59 +02:00
chore: fix marker icon
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
Reference in New Issue
Block a user