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 style={{height: '100%', width: '100%'}} zoomControl={false}>
17 <Bounds />
18 <TileLayer key="tiles" url={DEV_TILES_URL} />
19 <MapController />
20 {markers}
21 </MapContainer>
22 </MapWrapper>
23 );
24};
25
26export default Map;