53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import Leaflet from "leaflet";
|
|
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
|
|
|
Leaflet.Icon.Default.imagePath = "../node_modules/leaflet";
|
|
|
|
Leaflet.Icon.Default.mergeOptions({
|
|
iconUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png",
|
|
shadowUrl: "https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png",
|
|
});
|
|
|
|
function LocationMarker() {
|
|
const [position, setPosition] = useState<Leaflet.LatLng | null>(null);
|
|
|
|
return position === null ? null : (
|
|
<Marker position={position}>
|
|
<Popup>You are here</Popup>
|
|
</Marker>
|
|
);
|
|
}
|
|
|
|
interface MapState {
|
|
lat: number;
|
|
lng: number;
|
|
zoom: number;
|
|
}
|
|
|
|
const LocationMarkerMap = ({ height = 350 }: { height?: number }) => {
|
|
const [state, setState] = useState<MapState>({
|
|
lat: 51.505,
|
|
lng: -0.09,
|
|
zoom: 13,
|
|
});
|
|
const position: [number, number] = [state.lat, state.lng];
|
|
|
|
return (
|
|
<MapContainer
|
|
center={position}
|
|
zoom={state.zoom}
|
|
style={{ height: height }}
|
|
>
|
|
<TileLayer
|
|
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<LocationMarker />
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default LocationMarkerMap;
|