Add marker icons and mode line colors

entur · Sep 14, 2023 · 17b8ad1 · 17b8ad1
1 parent 933c738
commit 17b8ad1
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 14 deletions.
diff --git a/client-next/public/img/marker-flag-end-shadowed.png b/client-next/public/img/marker-flag-end-shadowed.png
diff --git a/client-next/public/img/marker-flag-start-shadowed.png b/client-next/public/img/marker-flag-start-shadowed.png
diff --git a/client-next/src/components/ItineraryListContainer.tsx b/client-next/src/components/ItineraryListContainer.tsx
@@ -3,12 +3,7 @@ import { Card } from 'react-bootstrap';
 
 export function ItineraryListContainer({ tripQueryResult }: { tripQueryResult: TripQuery | null }) {
   return (
-    <section
-      style={{
-        width: '36rem',
-        height: 'auto',
-      }}
-    >
+    <section className="itinterary-list-container">
       <h2>Itineraries</h2>
       {tripQueryResult &&
         tripQueryResult.trip.tripPatterns.map((tripPattern) => (

diff --git a/client-next/src/components/MapView.tsx b/client-next/src/components/MapView.tsx
@@ -2,6 +2,7 @@ import { Layer, Map, Marker, NavigationControl, Source } from 'react-map-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { TripQuery, TripQueryVariables } from '../gql/graphql.ts';
 import { decode } from '@googlemaps/polyline-codec';
+import { getColorForMode } from '../util/getColorForMode.ts';
 
 const mapStyle = {
   version: 8,
@@ -29,6 +30,7 @@ const initialViewState = {
   longitude: 10.2332855,
   zoom: 4,
 };
+
 export function MapView({
   tripQueryVariables,
   setTripQueryVariables,
@@ -45,7 +47,7 @@ export function MapView({
       // @ts-ignore
       mapStyle={mapStyle}
       initialViewState={initialViewState}
-      style={{ width: '100%', height: 'calc(100vh - 184px)' }}
+      style={{ width: '100%', height: 'calc(100vh - 200px)' }}
       onDblClick={(e) => {
         e.preventDefault();
         if (!tripQueryVariables?.from.coordinates) {
@@ -89,7 +91,10 @@ export function MapView({
               from: { coordinates: { latitude: e.lngLat.lat, longitude: e.lngLat.lng } },
             });
           }}
-        />
+          anchor="bottom-right"
+        >
+          <img alt="" src="/img/marker-flag-start-shadowed.png" height={48} width={49} />
+        </Marker>
       )}
       {tripQueryVariables?.to.coordinates && (
         <Marker
@@ -102,15 +107,17 @@ export function MapView({
               to: { coordinates: { latitude: e.lngLat.lat, longitude: e.lngLat.lng } },
             });
           }}
-        />
+          anchor="bottom-right"
+        >
+          <img alt="" src="/img/marker-flag-end-shadowed.png" height={48} width={49} />
+        </Marker>
       )}
       {tripQueryResult &&
         tripQueryResult.trip.tripPatterns[0].legs.map(
           (leg) =>
             leg.pointsOnLink && (
               <Source
                 key={leg.id}
-                //id="polylineLayer"
                 type="geojson"
                 data={{
                   type: 'Feature',
@@ -122,15 +129,13 @@ export function MapView({
                 }}
               >
                 <Layer
-                  //id="lineLayer"
                   type="line"
-                  //source="my-data"
                   layout={{
                     'line-join': 'round',
                     'line-cap': 'round',
                   }}
                   paint={{
-                    'line-color': 'rgba(3, 170, 238, 1)',
+                    'line-color': getColorForMode(leg.mode),
                     'line-width': 5,
                   }}
                 />

diff --git a/client-next/src/hooks/useTripQuery.ts b/client-next/src/hooks/useTripQuery.ts
@@ -12,14 +12,15 @@ const endpoint = `https://api.entur.io/journey-planner/v3/graphql`;
  */
 const query = graphql(`
   query trip($from: Location!, $to: Location!) {
-    trip(from: $from, to: $to, numTripPatterns: 1) {
+    trip(from: $from, to: $to, numTripPatterns: 3) {
       tripPatterns {
         aimedStartTime
         aimedEndTime
         duration
         distance
         legs {
           id
+          mode
           pointsOnLink {
             points
           }

diff --git a/client-next/src/style.css b/client-next/src/style.css
@@ -5,3 +5,9 @@
 .navbar-brand {
   color: #4078bc;
 }
+
+.itinterary-list-container {
+  width: 36rem;
+  height: calc(100vh - 200px);
+  overflow: scroll;
+}
diff --git a/client-next/src/util/getColorForMode.ts b/client-next/src/util/getColorForMode.ts
@@ -0,0 +1,21 @@
+import { Mode } from '../gql/graphql.ts';
+
+export const getColorForMode = function (mode: Mode) {
+  if (mode === Mode.Foot) return '#444';
+  if (mode === Mode.Bicycle) return '#44f';
+  if (mode === Mode.Scooter) return '#88f';
+  if (mode === Mode.Car) return '#444';
+  if (mode === Mode.Rail) return '#b00';
+  if (mode === Mode.Coach) return '#0f0';
+  if (mode === Mode.Metro) return '#f00';
+  if (mode === Mode.Bus) return '#0f0';
+  if (mode === Mode.Tram) return '#f00';
+  if (mode === Mode.Trolleybus) return '#0f0';
+  if (mode === Mode.Water) return '#f0f';
+  if (mode === Mode.Air) return '#f0f';
+  if (mode === Mode.Cableway) return '#f0f';
+  if (mode === Mode.Funicular) return '#f0f';
+  if (mode === Mode.Monorail) return '#f0f';
+  if (mode === Mode.Taxi) return '#f0f';
+  return '#aaa';
+};