78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import {
|
|
Circle,
|
|
FeatureGroup,
|
|
LayerGroup,
|
|
MapContainer,
|
|
Popup,
|
|
Rectangle,
|
|
TileLayer,
|
|
} from "react-leaflet";
|
|
|
|
import { useTheme } from "next-themes";
|
|
const rectangle: [number, number][] = [
|
|
[51.49, -0.08],
|
|
[51.5, -0.06],
|
|
];
|
|
|
|
interface MapState {
|
|
lat: number;
|
|
lng: number;
|
|
zoom: number;
|
|
}
|
|
import { colors } from "@/lib/colors";
|
|
const LayerGroupMap = ({ height = 350 }: { height?: number }) => {
|
|
const { theme: mode } = useTheme();
|
|
|
|
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"
|
|
/>
|
|
<LayerGroup>
|
|
<Circle radius={0} center={position} pathOptions={{ fillColor: "blue" }} />
|
|
<Circle radius={0}
|
|
center={position}
|
|
pathOptions={{
|
|
fillColor: mode === "dark" ? "dark" : colors.primary,
|
|
}}
|
|
/>
|
|
<LayerGroup>
|
|
<Circle
|
|
radius={0}
|
|
center={[51.51, -0.08]}
|
|
pathOptions={{
|
|
fillColor: mode === "dark" ? "dark" : colors.warning,
|
|
}}
|
|
/>
|
|
</LayerGroup>
|
|
</LayerGroup>
|
|
<FeatureGroup
|
|
pathOptions={{
|
|
fillColor: mode === "dark" ? "dark" : "bg-info",
|
|
}}
|
|
>
|
|
<Popup>Popup in FeatureGroup</Popup>
|
|
<Circle radius={0} center={[51.51, -0.06]} />
|
|
<Rectangle bounds={rectangle} />
|
|
</FeatureGroup>
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default LayerGroupMap;
|