YourSelfHosted/memos
1
0
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-06-05 22:09:59 +02:00
Code Issues Packages Projects Releases 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
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 { useEffect, useState } from "react";
import ReactDOMServer from "react-dom/server";
import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet"; import { MapContainer, Marker, TileLayer, useMapEvents } from "react-leaflet";
const markerIcon = new DivIcon({
className: "border-none",
html: ReactDOMServer.renderToString(<MapPinIcon size={24} />),
});
interface MarkerProps { interface MarkerProps {
position: LatLng | undefined; position: LatLng | undefined;
onChange: (position: LatLng) => void; onChange: (position: LatLng) => void;
@@ -26,7 +33,7 @@ const LocationMarker = (props: MarkerProps) => {
map.locate(); map.locate();
}, []); }, []);
return position === undefined ? null : <Marker position={position}></Marker>; return position === undefined ? null : <Marker position={position} icon={markerIcon}></Marker>;
}; };
interface MapProps { interface MapProps {
@@ -37,7 +44,7 @@ interface MapProps {
const LeafletMap = (props: MapProps) => { const LeafletMap = (props: MapProps) => {
return ( return (
<MapContainer className="w-full h-72" center={props.latlng} zoom={13} scrollWheelZoom={false}> <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 : () => {}} /> <LocationMarker position={props.latlng} onChange={props.onChange ? props.onChange : () => {}} />
</MapContainer> </MapContainer>
); );