29 lines
693 B
TypeScript
29 lines
693 B
TypeScript
'use client';
|
|
|
|
import { MapContainer } from 'react-leaflet';
|
|
import MapTiles from './MapTiles';
|
|
import './metars.css';
|
|
import { coordinatesState, zoomState } from '@/state/map';
|
|
import { useRecoilValue } from 'recoil';
|
|
|
|
export default function Map() {
|
|
const coordinates = useRecoilValue(coordinatesState);
|
|
const zoom = useRecoilValue(zoomState);
|
|
|
|
return (
|
|
<>
|
|
<MapContainer
|
|
center={[coordinates.lat, coordinates.lon]}
|
|
zoom={zoom}
|
|
maxZoom={14} // Zoomed in
|
|
minZoom={3} // Zoomed out
|
|
id='map-container'
|
|
className={`map-container`}
|
|
attributionControl={false}
|
|
>
|
|
<MapTiles />
|
|
</MapContainer>
|
|
</>
|
|
);
|
|
}
|