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="https://www.openstreetmap.org/copyright/en">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;