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