117 lines
2.4 KiB
TypeScript
117 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useTheme } from "next-themes";
|
|
|
|
import {
|
|
MapContainer,
|
|
TileLayer,
|
|
Popup,
|
|
Circle,
|
|
CircleMarker,
|
|
Polygon,
|
|
Polyline,
|
|
Rectangle,
|
|
} from "react-leaflet";
|
|
|
|
const polyline: [number, number][] = [
|
|
[51.505, -0.09],
|
|
[51.51, -0.1],
|
|
[51.51, -0.12],
|
|
];
|
|
|
|
const multiPolyline: [number, number][][] = [
|
|
[
|
|
[51.5, -0.1],
|
|
[51.5, -0.12],
|
|
[51.52, -0.12],
|
|
],
|
|
[
|
|
[51.5, -0.05],
|
|
[51.5, -0.06],
|
|
[51.52, -0.06],
|
|
],
|
|
];
|
|
|
|
const polygon: [number, number][] = [
|
|
[51.515, -0.09],
|
|
[51.52, -0.1],
|
|
[51.52, -0.12],
|
|
];
|
|
|
|
const multiPolygon: [number, number][][] = [
|
|
[
|
|
[51.51, -0.12],
|
|
[51.51, -0.13],
|
|
[51.53, -0.13],
|
|
],
|
|
[
|
|
[51.51, -0.05],
|
|
[51.51, -0.07],
|
|
[51.53, -0.07],
|
|
],
|
|
];
|
|
|
|
const rectangle: [number, number][] = [
|
|
[51.49, -0.08],
|
|
[51.5, -0.06],
|
|
];
|
|
import { colors } from "@/lib/colors";
|
|
|
|
const VectorLayersMap = ({ height = 350 }) => {
|
|
const { theme: mode } = useTheme();
|
|
|
|
const [state, setState] = useState({
|
|
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"
|
|
/>
|
|
<Circle
|
|
radius={0}
|
|
center={position}
|
|
pathOptions={{ fillColor: `hsla(${colors.primary})` }}
|
|
/>
|
|
<CircleMarker
|
|
center={[51.51, -0.12]}
|
|
color={`hsla(${mode === "dark" ? "dark" : colors.warning})`}
|
|
radius={20}
|
|
>
|
|
<Popup>Popup in CircleMarker</Popup>
|
|
</CircleMarker>
|
|
<Polyline
|
|
color={`hsla(${mode === "dark" ? "dark" : colors.primary})`}
|
|
positions={polyline}
|
|
/>
|
|
<Polyline
|
|
color={`hsla(${mode === "dark" ? "dark" : colors.info})`}
|
|
positions={multiPolyline}
|
|
/>
|
|
<Polygon
|
|
color={`hsla(${mode === "dark" ? "dark" : colors.warning})`}
|
|
positions={polygon}
|
|
/>
|
|
<Polygon
|
|
color={`hsla(${mode === "dark" ? "dark" : colors.success})`}
|
|
positions={multiPolygon}
|
|
/>
|
|
<Rectangle
|
|
bounds={rectangle}
|
|
color={`hsla(${mode === "dark" ? "dark" : colors.primary})`}
|
|
/>
|
|
</MapContainer>
|
|
);
|
|
};
|
|
export default VectorLayersMap;
|