39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
|
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
|
||
|
|
import "leaflet/dist/leaflet.css"; // Leaflet CSS
|
||
|
|
import React from "react";
|
||
|
|
|
||
|
|
const points = [
|
||
|
|
{ id: 1, name: "Point A", position: [51.505, -0.09] },
|
||
|
|
{ id: 2, name: "Point B", position: [51.515, -0.1] },
|
||
|
|
{ id: 3, name: "Point C", position: [51.525, -0.11] },
|
||
|
|
];
|
||
|
|
|
||
|
|
const InteractiveMap = () => {
|
||
|
|
return (
|
||
|
|
<div className="w-full h-96 flex justify-center items-center">
|
||
|
|
<MapContainer
|
||
|
|
center={[51.505, -0.09]} // Default map center
|
||
|
|
zoom={13} // Zoom level
|
||
|
|
style={{ height: "100%", width: "100%" }}
|
||
|
|
className="rounded-lg shadow-lg"
|
||
|
|
>
|
||
|
|
{/* Tile Layer for map background */}
|
||
|
|
<TileLayer
|
||
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Add markers for points */}
|
||
|
|
{points.map((point) => (
|
||
|
|
<Marker key={point.id} position={point.position}>
|
||
|
|
{/* Popup when marker is clicked */}
|
||
|
|
<Popup>{point.name}</Popup>
|
||
|
|
{/* Optional hover tooltip */}
|
||
|
|
</Marker>
|
||
|
|
))}
|
||
|
|
</MapContainer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default InteractiveMap;
|