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 TOKEN_FREE_TILES_URL =
8 process.env.TOKEN_FREE_TILES_URL ||
9 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
10
11 const TOKEN_FREE_TILES_LAYER_ATTRIBUTION =
12 process.env.TOKEN_FREE_TILES_LAYER_ATTRIBUTION ||
13 '© <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
14
15const Map = () => {
16 const markers = useMapStore(s => s.markers);
17
18 return (
19 <MapWrapper>
20 <MapContainer style={{height: '100%', width: '100%'}} zoomControl={false}>
21 <Bounds />
22 <TileLayer key="tiles" url={TOKEN_FREE_TILES_URL} attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}/>
23 <MapController />
24 {markers}
25 </MapContainer>
26 </MapWrapper>
27 );
28};
29
30export default Map;