frontend/containers/Map/Map.tsx (view raw)
1import {MapContainer, TileLayer} from 'react-leaflet';
2import MapController from './MapController';
3import MapWrapper from './MapWrapper';
4import useMapStore from '../../stores/useMapStore';
5import Bounds from './Bounds';
6
7const DEV_TILES_URL =
8 process.env.DEV_TILES_URL ||
9 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
10
11const Map = () => {
12 const {markers} = useMapStore();
13
14 return (
15 <MapWrapper>
16 <MapContainer
17 style={{height: '100%', width: '100%'}}
18 zoomControl={false}
19 >
20 <Bounds />
21 <TileLayer key="tiles" url={DEV_TILES_URL} />
22 <MapController />
23 {markers}
24 </MapContainer>
25 </MapWrapper>
26 );
27};
28
29export default Map;