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 style={{height: '100%', width: '100%'}} zoomControl={false}>
17        <Bounds />
18        <TileLayer key="tiles" url={DEV_TILES_URL} />
19        <MapController />
20        {markers}
21      </MapContainer>
22    </MapWrapper>
23  );
24};
25
26export default Map;