refactor(otp2-tile-overlay): Refactor route color expression.

ibi-group · Apr 15, 2024 · 14d44dd · 14d44dd
1 parent 647bfbd
commit 14d44dd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 26 deletions.
diff --git a/packages/otp2-tile-overlay/src/index.tsx b/packages/otp2-tile-overlay/src/index.tsx
@@ -11,7 +11,7 @@ import React, { useCallback, useEffect, useState } from "react"
 import { Layer, Popup, Source, useMap } from "react-map-gl"
 
 // eslint-disable-next-line prettier/prettier
-import { generateLayerPaint } from "./util"
+import { generateLayerPaint, ROUTE_COLOR_EXPRESSION } from "./util"
 
 const SOURCE_ID = "otp2-tiles"
 const AREA_TYPES = ["areaStops"]
@@ -143,11 +143,7 @@ const OTP2TileLayerWithPopup = ({
         filter={filter}
         id={`${id}-fill`}
         paint={{
-          "fill-color": [
-            "concat",
-            "#",
-            ["case", ["!=", ["index-of", ",", ["get", "routeColors"]], -1], ["slice", ["get", "routeColors"], 0, ["index-of", ",", ["get", "routeColors"]]], ["get", "routeColors"]]
-          ],
+          "fill-color": ROUTE_COLOR_EXPRESSION,
           "fill-opacity": 0.2,
         }}
         source-layer={type}
@@ -159,11 +155,7 @@ const OTP2TileLayerWithPopup = ({
         id={`${id}-outline`}
         layout={{ "line-join": "round", "line-cap": "round" }}
         paint={{
-          "line-color": [
-            "concat",
-            "#",
-            ["case", ["!=", ["index-of", ",", ["get", "routeColors"]], -1], ["slice", ["get", "routeColors"], 0, ["index-of", ",", ["get", "routeColors"]]], ["get", "routeColors"]]
-          ],
+          "line-color": ROUTE_COLOR_EXPRESSION,
           "line-opacity": 0.8,
           "line-width": 3
         }}

diff --git a/packages/otp2-tile-overlay/src/util.ts b/packages/otp2-tile-overlay/src/util.ts
@@ -1,3 +1,5 @@
+import { Expression } from "mapbox-gl";
+
 const generateFloatingVehicleColor = (formFactor: string) => [
   "case",
   ["==", ["get", formFactor], "SCOOTER"],
@@ -7,6 +9,22 @@ const generateFloatingVehicleColor = (formFactor: string) => [
   "#333"
 ];
 
+export const ROUTE_COLOR_EXPRESSION: Expression = [
+  "concat",
+  "#",
+  [
+    "case",
+    ["!=", ["index-of", ",", ["get", "routeColors"]], -1],
+    [
+      "slice",
+      ["get", "routeColors"],
+      0,
+      ["index-of", ",", ["get", "routeColors"]]
+    ],
+    ["get", "routeColors"]
+  ]
+];
+
 // eslint-disable-next-line import/prefer-default-export
 export const generateLayerPaint = (color?: string): any => {
   return {
@@ -30,21 +48,7 @@ export const generateLayerPaint = (color?: string): any => {
       "circle-stroke-width": 3
     },
     areaStops: {
-      "circle-color": [
-        "concat",
-        "#",
-        [
-          "case",
-          ["!=", ["index-of", ",", ["get", "routeColors"]], -1],
-          [
-            "slice",
-            ["get", "routeColors"],
-            0,
-            ["index-of", ",", ["get", "routeColors"]]
-          ],
-          ["get", "routeColors"]
-        ]
-      ],
+      "circle-color": ROUTE_COLOR_EXPRESSION,
       "circle-opacity": 0.9,
       "circle-stroke-color": "#333",
       "circle-stroke-width": 2