43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
"use client";
|
|
import { MapContainer, TileLayer, useMap } from "react-leaflet";
|
|
|
|
export const IRAN_CENTER = L.latLng(32.4279, 53.6880);
|
|
|
|
const MapOptions = ({ options }) => {
|
|
const map = useMap();
|
|
if (!options) return;
|
|
|
|
if (options.mapDrag) {
|
|
map.dragging.enable();
|
|
map.scrollWheelZoom.enable();
|
|
map.touchZoom.enable();
|
|
map.doubleClickZoom.enable();
|
|
} else {
|
|
map.dragging.disable();
|
|
map.scrollWheelZoom.disable();
|
|
map.touchZoom.disable();
|
|
map.doubleClickZoom.disable();
|
|
}
|
|
};
|
|
|
|
function MapLayer({ children, style, otherLayers, options }) {
|
|
return (
|
|
<>
|
|
<MapContainer
|
|
style={{ width: "100%", height: "100%", ...style }}
|
|
center={IRAN_CENTER}
|
|
zoom={6}
|
|
zoomControl={false}
|
|
attributionControl={false}
|
|
{...options}
|
|
>
|
|
<MapOptions options={options} />
|
|
<TileLayer url={`${process.env.NEXT_PUBLIC_MAPTILE_ENDPOINT}/{z}/{x}/{y}.png`} />
|
|
{children}
|
|
</MapContainer>
|
|
{otherLayers}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default MapLayer; |