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        <ZoomControl key="control_zoom" position="bottomright" />
42        {markers.map(({popup, ...circleMarkerProps}, index) => (
43          <CircleMarker
44            key={index}
45            {...defaultMarkerStyle}
46            radius={circleMarkerProps.double ? 9 : defaultMarkerStyle.radius}
47            center={circleMarkerProps.center}
48          >
49            <CircleMarker
50              {...{
51                ...defaultMarkerStyle,
52                fillColor: defaultMarkerStyle.color,
53                color: defaultMarkerStyle.fillColor,
54              }}
55              center={circleMarkerProps.center}
56            ></CircleMarker>
57            {popup && <Popup>{popup}</Popup>}
58          </CircleMarker>
59        ))}
60      </MapContainer>
61    </MapWrapper>
62  );
63};
64
65export default Map;