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