feat: add to single line map arrowa to navigate between points

src/pages/components/map-related/MapContent.tsx

@@ -1,5 +1,6 @@
-import { Marker, Polyline, Popup, TileLayer } from 'react-leaflet'
-import { Icon, IconOptions } from 'leaflet'
+import { useRef } from 'react'
+import { Marker, Polyline, Popup, TileLayer, useMap } from 'react-leaflet'
+import { Icon, IconOptions, Marker as LeafletMarker } from 'leaflet'
 import { useAgencyList } from 'src/api/agencyList'
 import { busIcon, busIconPath } from '../utils/BusIcon'
 import { BusToolTip } from './MapLayers/BusToolTip'
@@ -8,12 +9,13 @@ import '../../Map.scss'
 import { MapProps } from './map-types'
 import { useRecenterOnDataChange } from './useRecenterOnDataChange'
 import { MapIndex } from './MapIndex'
+import MapFooterButtons from './MapFooterButtons/MapFooterButtons'
 
-export function MapContent({ positions, plannedRouteStops }: MapProps) {
+export function MapContent({ positions, plannedRouteStops, showNavigationButtons }: MapProps) {
   useRecenterOnDataChange({ positions, plannedRouteStops })
-
+  const markerRef = useRef<{ [key: number]: LeafletMarker | null }>({})
+  const map = useMap()
   const agencyList = useAgencyList()
-
   const getIcon = (path: string, width: number = 10, height: number = 10): Icon<IconOptions> => {
     return new Icon<IconOptions>({
       iconUrl: path,
@@ -28,6 +30,16 @@ export function MapContent({ positions, plannedRouteStops }: MapProps) {
   const actualRouteStopMarker = getIcon(actualRouteStopMarkerPath, 20, 20)
   const plannedRouteStopMarker = getIcon(plannedRouteStopMarkerPath, 20, 25)
 
+  const navigateMarkers = (positionId: number) => {
+    const loc = positions[positionId]?.loc
+    if (!map || !loc) return
+    const marker = markerRef?.current && markerRef?.current[positionId]
+    if (marker) {
+      map.flyTo(loc, map.getZoom())
+      marker.openPopup()
+    }
+  }
+
   return (
     <>
       <TileLayer
@@ -56,9 +68,21 @@ export function MapContent({ positions, plannedRouteStops }: MapProps) {
               })
             : actualRouteStopMarker
         return (
-          <Marker position={pos.loc} icon={icon} key={i}>
+          <Marker
+            ref={(ref) => (markerRef.current[i] = ref)}
+            position={pos.loc}
+            icon={icon}
+            key={i}>
             <Popup minWidth={300} maxWidth={700}>
-              <BusToolTip position={pos} icon={busIconPath(pos.operator!)} />
+              <BusToolTip position={pos} icon={busIconPath(pos.operator!)}>
+                {showNavigationButtons && (
+                  <MapFooterButtons
+                    index={i}
+                    positions={positions}
+                    navigateMarkers={navigateMarkers}
+                  />
+                )}
+              </BusToolTip>
             </Popup>
           </Marker>
         )

src/pages/components/map-related/MapFooterButtons/MapFooterButtons.scss

@@ -0,0 +1,9 @@
+.map-footer-buttons {
+    display: flex;
+    justify-content: space-between;
+
+    .disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+}

src/pages/components/map-related/MapFooterButtons/MapFooterButtons.tsx

@@ -0,0 +1,35 @@
+import { LeftOutlined, RightOutlined } from '@ant-design/icons'
+import { Point } from 'src/pages/timeBasedMap'
+import './MapFooterButtons.scss'
+
+type TMapFooterButtons = {
+  index: number
+  positions: Point[]
+  navigateMarkers: (id: number) => void
+}
+
+function MapFooterButtons({ index, positions, navigateMarkers }: TMapFooterButtons) {
+  const rightStep = index + 1
+  const leftStep = index - 1
+
+  const checkIfValidStep = (i: number) => {
+    return Boolean(positions.at(i))
+  }
+
+  return (
+    <div className="map-footer-buttons">
+      <RightOutlined
+        title={'right-chevron'}
+        className={`${checkIfValidStep(rightStep) ? '' : 'disabled'}`}
+        onClick={() => navigateMarkers(rightStep)}
+      />
+      <LeftOutlined
+        title={'left-chevron'}
+        className={`${checkIfValidStep(leftStep) ? '' : 'disabled'}`}
+        onClick={() => navigateMarkers(leftStep)}
+      />
+    </div>
+  )
+}
+
+export default MapFooterButtons

src/pages/components/map-related/MapLayers/BusToolTip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { ReactNode, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Point } from 'src/pages/timeBasedMap'
 import { Button } from '@mui/material'
@@ -11,9 +11,9 @@ import CircularProgress from '@mui/material/CircularProgress'
 import cn from 'classnames'
 import CustomTreeView from '../../CustomTreeView'
 
-export type BusToolTipProps = { position: Point; icon: string }
+export type BusToolTipProps = { position: Point; icon: string; children?: ReactNode }
 
-export function BusToolTip({ position, icon }: BusToolTipProps) {
+export function BusToolTip({ position, icon, children }: BusToolTipProps) {
   const [siriRide, setSiriRide] = useState<SiriRideWithRelatedPydanticModel | undefined>()
   const [isLoading, setIsLoading] = useState(false)
   const [showJson, setShowJson] = useState(false)
@@ -110,6 +110,7 @@ export function BusToolTip({ position, icon }: BusToolTipProps) {
               </div>
             )}
           </div>
+          {children}
         </>
       )}
     </div>

src/pages/components/map-related/MapWithLocationsAndPath.tsx

@@ -12,7 +12,11 @@ const position: Point = {
   color: 0,
 }
 
-export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapProps) {
+export function MapWithLocationsAndPath({
+  positions,
+  plannedRouteStops,
+  showNavigationButtons,
+}: MapProps) {
   const [isExpanded, setIsExpanded] = useState<boolean>(false)
   const toggleExpanded = useCallback(() => setIsExpanded((expanded) => !expanded), [])
 
@@ -23,7 +27,11 @@ export function MapWithLocationsAndPath({ positions, plannedRouteStops }: MapPro
       </IconButton>
 
       <MapContainer center={position.loc} zoom={13} scrollWheelZoom={true}>
-        <MapContent positions={positions} plannedRouteStops={plannedRouteStops} />
+        <MapContent
+          positions={positions}
+          plannedRouteStops={plannedRouteStops}
+          showNavigationButtons={showNavigationButtons}
+        />
       </MapContainer>
     </div>
   )

src/pages/components/map-related/map-types.ts

@@ -12,4 +12,5 @@ export interface Path {
 export interface MapProps {
   positions: Point[]
   plannedRouteStops: BusStop[]
+  showNavigationButtons?: boolean
 }

src/pages/singleLineMap/index.tsx

@@ -136,6 +136,7 @@ const SingleLineMapPage = () => {
       <MapWithLocationsAndPath
         positions={filteredPositions}
         plannedRouteStops={plannedRouteStops}
+        showNavigationButtons
       />
     </PageContainer>
   )