1import {CircleMarker} from 'react-leaflet';
 2import EventPopup from './EventPopup';
 3import {Event} from '../../../generated/graphql';
 4import theme from '../../../theme';
 5
 6interface Props {
 7  event: Event & {id: string};
 8}
 9
10const EventMarker = ({event}: Props) => {
11  const {latitude, longitude} = event;
12
13  const markerStyle = {
14    radius: 12,
15    fillColor: theme.palette.primary.main,
16    color: theme.palette.background.paper,
17    fillOpacity: 1,
18    opacity: 1,
19    weight: 3,
20  };
21
22  return (
23    <CircleMarker {...markerStyle} radius={9} center={[latitude, longitude]}>
24      <CircleMarker
25        {...{
26          ...markerStyle,
27          fillColor: markerStyle.color,
28          color: markerStyle.fillColor,
29        }}
30        center={[latitude, longitude]}
31      ></CircleMarker>
32      <EventPopup event={event} />
33    </CircleMarker>
34  );
35};
36
37export default EventMarker;