1import {CircleMarker} from 'react-leaflet';
 2import {useTheme} from '@mui/material';
 3import TravelPopup from './TravelPopup';
 4import {Travel} from '../../generated/graphql';
 5import {useRef, useState} from 'react';
 6
 7interface Props {
 8  travel: Travel & {id: string};
 9  focused: boolean;
10}
11
12const TravelMarker = ({travel, focused}: Props) => {
13  const {meeting_longitude, meeting_latitude} = travel;
14  const markerRef = useRef(null);
15  const theme = useTheme();
16  const marker = markerRef.current;
17
18  if (marker && focused) {
19    marker.openPopup();
20  }
21
22  const markerStyle = {
23    radius: 12,
24    fillColor: theme.palette.primary.main,
25    color: theme.palette.background.paper,
26    fillOpacity: 1,
27    opacity: 1,
28    weight: 3,
29  };
30
31  return (
32    <CircleMarker
33      ref={markerRef}
34      {...markerStyle}
35      center={[meeting_latitude, meeting_longitude]}
36    >
37      <TravelPopup travel={travel} />
38    </CircleMarker>
39  );
40};
41
42export default TravelMarker;