usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-12-09 13:46:24 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: fix marker icon

Browse source
This commit is contained in:
Steven 2024-09-26 09:20:33 +08:00
parent 2837816ff7
commit 9c41c8d5c9
1 changed files with 10 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/components/LeafletMap.tsx
View file

@ -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>
);