1import {MapContainer, TileLayer} from 'react-leaflet';
 2import MapController from './MapController';
 3import MapWrapper from './MapWrapper';
 4import useMapStore from '../../stores/useMapStore';
 5import Bounds from './Bounds';
 6import MapActions from './MapActions';
 7
 8const TOKEN_FREE_TILES_URL =
 9  process.env.TOKEN_FREE_TILES_URL ||
10  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
11
12const TOKEN_FREE_TILES_LAYER_ATTRIBUTION =
13  process.env.TOKEN_FREE_TILES_LAYER_ATTRIBUTION ||
14  '© <a target="_blank" href="https://www.openstreetmap.org/copyright/en">OpenStreetMap</a> contributors';
15
16const Map = () => {
17  const markers = useMapStore(s => s.markers);
18
19  return (
20    <MapWrapper>
21      <MapContainer style={{height: '100%', width: '100%'}} zoomControl={false}>
22        <Bounds />
23        <TileLayer
24          key="tiles"
25          url={TOKEN_FREE_TILES_URL}
26          attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}
27        />
28        <MapController />
29        {markers}
30        <MapActions />
31      </MapContainer>
32    </MapWrapper>
33  );
34};
35
36export default Map;