34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
"use client"
|
|
|
|
import { MapContainer, TileLayer, SVGOverlay } from "react-leaflet"
|
|
|
|
const SVGMap = ({ height = 350 }: { height?: number }) => {
|
|
const position: [number, number] = [51.505, -0.09]
|
|
const bounds: [[number, number], [number, number]] = [
|
|
[51.49, -0.08],
|
|
[51.5, -0.06],
|
|
]
|
|
|
|
return (
|
|
<MapContainer
|
|
center={position}
|
|
zoom={13}
|
|
scrollWheelZoom={false}
|
|
style={{ height: height }}
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<SVGOverlay attributes={{ stroke: 'red' }} bounds={bounds}>
|
|
<rect x="0" y="0" width="100%" height="100%" fill="blue" />
|
|
<circle r="5" cx="10" cy="10" fill="red" />
|
|
<text x="50%" y="50%" stroke="white">
|
|
Hi
|
|
</text>
|
|
</SVGOverlay>
|
|
</MapContainer>
|
|
)
|
|
}
|
|
export default SVGMap;
|