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
11const 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
23          key="tiles"
24          url={TOKEN_FREE_TILES_URL}
25          attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}
26        />
27        <MapController />
28        {markers}
29      </MapContainer>
30    </MapWrapper>
31  );
32};
33
34export default Map;