M frontend/containers/TravelMarker/TravelPopup.tsx → frontend/containers/TravelMarker/TravelPopup.tsx

@@ -6,7 +6,6 @@ import Box from '@mui/material/Box';
 import {Travel} from '../../generated/graphql';
 import {Popup} from 'react-leaflet';
 import {useTranslation} from 'react-i18next';
-import useMapStore from '../../stores/useMapStore';
 import getMapsLink from '../../lib/getMapsLink';
 
 interface Props {
@@ -15,16 +14,10 @@ }
 
 const TravelPopup = ({travel}: Props) => {
   const {t} = useTranslation();
-  const {setFocusOnTravel} = useMapStore();
   return (
     <Popup>
       <Card
         sx={{p: 2, width: '350px', maxWidth: '100%', cursor: 'pointer'}}
-        onClick={() => {
-          setFocusOnTravel(travel);
-          const travelCard = document?.getElementById(travel.id);
-          travelCard?.scrollIntoView({behavior: 'smooth'});
-        }}
       >
         {!!travel.departure && (
           <Typography variant="overline" color="Graytext" id="TravelDeparture">

M frontend/containers/TravelMarker/index.tsx → frontend/containers/TravelMarker/index.tsx

@@ -1,8 +1,9 @@ 
+import {useRef} from 'react';
 import {CircleMarker} from 'react-leaflet';
 import {useTheme} from '@mui/material';
+import useMapStore from '../../stores/useMapStore';
 import TravelPopup from './TravelPopup';
 import {Travel} from '../../generated/graphql';
-import {useRef, useState} from 'react';
 
 interface Props {
   travel: Travel & {id: string};
@@ -11,6 +12,7 @@ }
 
 const TravelMarker = ({travel, focused}: Props) => {
   const {meeting_longitude, meeting_latitude} = travel;
+  const {setFocusOnTravel} = useMapStore();
   const markerRef = useRef(null);
   const theme = useTheme();
   const marker = markerRef.current;
@@ -28,11 +30,20 @@ opacity: 1,
     weight: 3,
   };
 
+  const onClick = () => {
+    setFocusOnTravel(travel);
+    const travelCard = document?.getElementById(travel.id);
+    travelCard?.scrollIntoView({behavior: 'smooth'});
+  };
+
   return (
     <CircleMarker
       ref={markerRef}
       {...markerStyle}
       center={[meeting_latitude, meeting_longitude]}
+      eventHandlers={{
+        click: onClick
+      }}
     >
       <TravelPopup travel={travel} />
     </CircleMarker>