Line route overlay

package.json

@@ -59,6 +59,7 @@
         "copy-to-clipboard": "^3.3.1",
         "date-fns": "^2.23.0",
         "firebase": "^9.0.1",
+        "google-polyline": "^1.0.3",
         "graphql": "^15.6.0",
         "lodash.debounce": "^4.0.8",
         "lz-string": "^1.4.4",
@@ -85,6 +86,7 @@
         "@babel/plugin-proposal-class-properties": "^7.14.5",
         "@babel/preset-env": "^7.15.0",
         "@babel/preset-react": "^7.14.5",
+        "@types/google-polyline": "^1.0.0",
         "@types/lodash.debounce": "^4.0.6",
         "@types/lz-string": "^1.3.34",
         "@types/node": "^16.7.13",

src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { CanvasOverlay } from 'react-map-gl'
+
+interface Props {
+    points: Array<[number, number]>
+    color: string
+}
+
+interface RedrawArgs {
+    width: number
+    height: number
+    ctx: CanvasRenderingContext2D
+    project: (point: [number, number]) => [number, number]
+}
+
+const LineOverlay = ({ points, color }: Props): JSX.Element | null => {
+    const redraw = ({ width, height, ctx, project }: RedrawArgs): void => {
+        ctx.clearRect(0, 0, width, height)
+        ctx.lineWidth = 4
+        ctx.strokeStyle = color
+        ctx.globalAlpha = 0.4
+        ctx.beginPath()
+        points.forEach((point) => {
+            const pixel = project([point[1], point[0]])
+            ctx.lineTo(pixel[0], pixel[1])
+        })
+        ctx.stroke()
+    }
+
+    return <CanvasOverlay redraw={redraw} />
+}
+
+export default LineOverlay

src/components/Map/RealtimeVehicleTag/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { Tooltip } from '@entur/tooltip'
 import { colors } from '@entur/tokens'
@@ -14,54 +14,56 @@ import './styles.scss'
 
 interface Props {
     realtimeVehicle: RealtimeVehicle
+    setHoveredVehicle: (realtimeVehicle: RealtimeVehicle | null) => void
+    isHovered: boolean
 }
 
-const RealtimeVehicleTag = ({ realtimeVehicle }: Props): JSX.Element => {
-    const [isHovered, setIsHovered] = useState<boolean>(false)
-
-    return (
-        <Tooltip
-            placement="top"
-            content={<TooltipContent realtimeVehicle={realtimeVehicle} />}
-            className={`map__realtime-vehicle-tag-tooltip ${
-                isHovered ? 'visible' : ''
-            }`}
-            disableHoverListener={true}
-            isOpen={true}
-            showCloseButton={false}
+const RealtimeVehicleTag = ({
+    realtimeVehicle,
+    setHoveredVehicle,
+    isHovered,
+}: Props): JSX.Element => (
+    <Tooltip
+        placement="top"
+        content={<TooltipContent realtimeVehicle={realtimeVehicle} />}
+        className={`map__realtime-vehicle-tag-tooltip ${
+            isHovered ? 'visible' : ''
+        }`}
+        disableHoverListener={true}
+        isOpen={true}
+        showCloseButton={false}
+    >
+        <div
+            className="map__realtime-vehicle-tag-circle-outer"
+            onMouseEnter={() => setHoveredVehicle(realtimeVehicle)}
+            onMouseLeave={() => setHoveredVehicle(null)}
+            style={
+                realtimeVehicle.active
+                    ? { backgroundColor: 'white' }
+                    : { backgroundColor: colors.greys.grey30 }
+            }
         >
             <div
-                className="map__realtime-vehicle-tag-circle-outer"
-                onMouseOver={() => setIsHovered(true)}
-                onMouseOut={() => setIsHovered(false)}
+                className="map__realtime-vehicle-tag-circle-inner"
                 style={
                     realtimeVehicle.active
-                        ? { backgroundColor: 'white' }
+                        ? {
+                              backgroundColor: getIconColor(
+                                  realtimeVehicle.mode.toLowerCase() as
+                                      | TransportMode
+                                      | LegMode
+                                      | 'ferry',
+                                  IconColorType.DEFAULT,
+                                  undefined,
+                              ),
+                          }
                         : { backgroundColor: colors.greys.grey30 }
                 }
             >
-                <div
-                    className="map__realtime-vehicle-tag-circle-inner"
-                    style={
-                        realtimeVehicle.active
-                            ? {
-                                  backgroundColor: getIconColor(
-                                      realtimeVehicle.mode.toLowerCase() as
-                                          | TransportMode
-                                          | LegMode
-                                          | 'ferry',
-                                      IconColorType.DEFAULT,
-                                      undefined,
-                                  ),
-                              }
-                            : { backgroundColor: colors.greys.grey30 }
-                    }
-                >
-                    {realtimeVehicle.line.publicCode}
-                </div>
+                {realtimeVehicle.line.publicCode}
             </div>
-        </Tooltip>
-    )
-}
+        </div>
+    </Tooltip>
+)
 
 export default RealtimeVehicleTag

src/components/Map/RealtimeVehicleTag/styles.scss

@@ -26,9 +26,11 @@
     }
     &-tooltip {
         opacity: 0;
+        visibility: hidden;
     }
     &-tooltip.visible {
         opacity: 1;
+        visibility: visible;
         transition: opacity 0.1s ease-in;
         margin-bottom: 0.5rem;
     }

src/components/Map/index.tsx

@@ -3,22 +3,26 @@ import React, { useState, memo, useRef, useEffect, useMemo } from 'react'
 import { InteractiveMap, Marker } from 'react-map-gl'
 import type { MapRef } from 'react-map-gl'
 
+import type { ClusterProperties } from 'supercluster'
 import useSupercluster from 'use-supercluster'
+import polyline from 'google-polyline'
 
-import type { ClusterProperties } from 'supercluster'
+import { TransportMode } from '@entur/sdk'
 
 import { Station, Vehicle } from '@entur/sdk/lib/mobility/types'
 
 import PositionPin from '../../assets/icons/positionPin'
 
-import { StopPlaceWithDepartures } from '../../types'
+import { IconColorType, StopPlaceWithDepartures } from '../../types'
 
 import { Filter } from '../../services/realtimeVehicles/types/filter'
 
-import { useDebounce } from '../../utils'
+import { getIconColor, useDebounce } from '../../utils'
 
-import useVehicleData from '../../logic/useRealtimeVehicleData'
+import useRealtimeVehicleData from '../../logic/useRealtimeVehicleData'
+import { RealtimeVehicle } from '../../services/realtimeVehicles/types/realtimeVehicle'
 
+import LineOverlay from './RealtimeVehicleTag/LineOverlay'
 import BikeRentalStationTag from './BikeRentalStationTag'
 import StopPlaceTag from './StopPlaceTag'
 import ScooterMarkerTag from './ScooterMarkerTag'
@@ -50,12 +54,31 @@ const Map = ({
     const debouncedViewport = useDebounce(viewport, 200)
     const mapRef = useRef<MapRef>(null)
     const [filter, setFilter] = useState<Filter>({})
-    const { realtimeVehicles } = useVehicleData(filter)
+    const { realtimeVehicles } = useRealtimeVehicleData(filter)
     const [bounds, setBounds] = useState<[number, number, number, number]>(
         mapRef.current?.getMap()?.getBounds()?.toArray()?.flat() ||
             ([0, 0, 0, 0] as [number, number, number, number]),
     )
 
+    const [hoveredVehicle, setHoveredVehicle] =
+        useState<RealtimeVehicle | null>(null)
+
+    const displayedLine = useMemo(() => {
+        if (!hoveredVehicle || !hoveredVehicle.line.pointsOnLink) return null
+
+        const cords = polyline.decode(hoveredVehicle.line.pointsOnLink)
+
+        return (
+            <LineOverlay
+                points={cords}
+                color={getIconColor(
+                    hoveredVehicle.mode.toLowerCase() as TransportMode,
+                    IconColorType.DEFAULT,
+                )}
+            ></LineOverlay>
+        )
+    }, [hoveredVehicle])
+
     useEffect(() => {
         const newBounds = (mapRef.current
             ?.getMap()
@@ -143,15 +166,24 @@ const Map = ({
                           key={vehicle.vehicleRef}
                           latitude={vehicle.location.latitude}
                           longitude={vehicle.location.longitude}
-                          className="map__live-vehicle-marker"
+                          className="map__realtime-vehicle-marker"
+                          offsetTop={-25}
+                          offsetLeft={-10}
                       >
                           <RealtimeVehicleTag
                               realtimeVehicle={vehicle}
+                              setHoveredVehicle={setHoveredVehicle}
+                              isHovered={
+                                  hoveredVehicle
+                                      ? hoveredVehicle.vehicleRef ===
+                                        vehicle.vehicleRef
+                                      : false
+                              }
                           ></RealtimeVehicleTag>
                       </Marker>
                   ))
                 : [],
-        [realtimeVehicles],
+        [realtimeVehicles, hoveredVehicle],
     )
 
     const scooterClusterMarkers = useMemo(() => {
@@ -175,6 +207,7 @@ const Map = ({
                     }
                     latitude={slatitude}
                     longitude={slongitude}
+                    className="map__scooter-marker"
                 >
                     <ScooterMarkerTag
                         pointCount={pointCount}
@@ -199,6 +232,7 @@ const Map = ({
                         longitude={stopPlace.longitude ?? 0}
                         offsetLeft={-50}
                         offsetTop={-10}
+                        className="map__stop-place-marker"
                     >
                         <StopPlaceTag
                             stopPlace={stopPlace}
@@ -236,6 +270,7 @@ const Map = ({
                         latitude={slatitude}
                         longitude={slongitude}
                         marker-size="large"
+                        className="map__bike-rental-station-marker"
                     >
                         <BikeRentalStationTag
                             bikes={stationCluster.properties.bikesAvailable}
@@ -277,6 +312,7 @@ const Map = ({
             ref={mapRef}
         >
             {realtimeVehicles && realtimeVehicleMarkers}
+            {displayedLine}
             {scooterClusters && scooterClusterMarkers}
             {stopPlaces && stopPlaceMarkers}
             {stationClusters && stationClusterMarkers}

src/components/Map/styles.scss

@@ -1,3 +1,13 @@
-.map__live-vehicle-marker:hover {
-    z-index: 1000;
+.map__realtime-vehicle-marker:hover {
+    z-index: 3;
+}
+
+.map__realtime-vehicle-marker {
+    z-index: 1;
+}
+
+.map__bike-rental-station-marker,
+.map__scooter-marker,
+.map__stop-place-marker {
+    z-index: 2;
 }

src/containers/Admin/EditTab/index.tsx

@@ -39,7 +39,7 @@ import {
 } from '../../../settings/LocalStorage'
 import { useStopPlacesWithLines } from '../../../logic/useStopPlacesWithLines'
 
-import useVehicleData from '../../../logic/useRealtimeVehicleData'
+import useRealtimeVehicleData from '../../../logic/useRealtimeVehicleData'
 
 import StopPlacePanel from './StopPlacePanel'
 import BikePanelSearch from './BikeSearch'
@@ -104,7 +104,7 @@ const EditTab = (): JSX.Element => {
         settings?.distance || DEFAULT_DISTANCE,
     )
 
-    const { allLinesWithRealtimeData } = useVehicleData()
+    const { allLinesWithRealtimeData } = useRealtimeVehicleData()
     const { uniqueLines } = useStopPlacesWithLines()
 
     const realtimeLines = useMemo(

src/dashboards/Map/styles.scss

@@ -16,6 +16,7 @@
     align-items: center;
     justify-content: left;
     overflow-x: scroll;
+    z-index: 3;
 }
 .content {
     max-width: 100%;