1import {
 2  MapContainer,
 3  CircleMarker,
 4  TileLayer,
 5  ZoomControl,
 6  Popup,
 7} from 'react-leaflet';
 8import {useTheme} from '@mui/material';
 9import MapController from './MapController';
10import MapWrapper from './MapWrapper';
11import useMapStore from '../../stores/useMapStore';
12import Bounds from './Bounds';
13
14const DEV_TILES_URL =
15  process.env.DEV_TILES_URL ||
16  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
17
18const Map = () => {
19  const theme = useTheme();
20  const {center, markers} = useMapStore();
21  const defaultMarkerStyle = {
22    radius: 12,
23    fillColor: theme.palette.primary.main,
24    color: theme.palette.background.paper,
25    fillOpacity: 1,
26    opacity: 1,
27    weight: 3,
28  };
29
30  return (
31    <MapWrapper>
32      <MapContainer
33        center={center}
34        zoom={15}
35        style={{height: '100%', width: '100%'}}
36        zoomControl={false}
37      >
38        <Bounds />
39        <TileLayer key="tiles" url={DEV_TILES_URL} />
40        <MapController />
41        {markers.map(({popup, ...circleMarkerProps}, index) => (
42          <CircleMarker
43            key={index}
44            {...defaultMarkerStyle}
45            radius={circleMarkerProps.double ? 9 : defaultMarkerStyle.radius}
46            center={circleMarkerProps.center}
47          >
48            <CircleMarker
49              {...{
50                ...defaultMarkerStyle,
51                fillColor: defaultMarkerStyle.color,
52                color: defaultMarkerStyle.fillColor,
53              }}
54              center={circleMarkerProps.center}
55            ></CircleMarker>
56            {popup && <Popup>{popup}</Popup>}
57          </CircleMarker>
58        ))}
59      </MapContainer>
60    </MapWrapper>
61  );
62};
63
64export default Map;