Style each moving platform with a different color

src/components/timeline/map.js

@@ -12,6 +12,7 @@ import { mapLayerFilter } from "../../utils/filter-utils"
 import { colors } from "../../theme"
 import { replaceSlashes } from "../../utils/helpers"
 import { usePlatformStatus } from "../../utils/use-platform-status"
+import { getLineColors } from "../../utils/platform-colors"
 
 export function DeploymentMap({
   geojson,
@@ -35,6 +36,16 @@ export function DeploymentMap({
   const platformsWithData = geojson.features.map(
     f => f.properties.platform_name
   )
+  let movingPlatforms = platforms
+    .filter(platform =>
+      ["Jet", "Prop", "UAV", "Ships/Boats"].includes(platform.type)
+    )
+    .map(platform => platform.name)
+
+  const lineColorsPaint = getLineColors(
+    movingPlatforms.filter((i, index) => movingPlatforms.indexOf(i) === index)
+  )
+
   const [selectedPlatforms, setSelectedPlatforms] = useState(
     names
       .filter((name, index) => names.indexOf(name) === index)
@@ -61,7 +72,7 @@ export function DeploymentMap({
               type: "line",
               source: "deployment",
               paint: {
-                "line-color": "#1B9E77",
+                "line-color": lineColorsPaint,
                 "line-width": 2,
                 "line-opacity": 0.9,
               },

src/utils/__tests__/platform-colors.test.js

@@ -0,0 +1,17 @@
+import { getLineColors } from "../platform-colors"
+
+describe("getLineColor", () => {
+  it("returns correct match for DC-8 and ER-2", () => {
+    const platforms = ["DC-8", "ER-2"]
+    const result = [
+      "match",
+      ["get", "platform_name"],
+      "DC-8",
+      "#F1EEF6",
+      "ER-2",
+      "#BDC9E1",
+      "#1a9b8c",
+    ]
+    expect(getLineColors(platforms)).toEqual(result)
+  })
+})

src/utils/platform-colors.js

@@ -0,0 +1,14 @@
+export const flightColors = platforms => {
+  const colors = ["#F1EEF6", "#BDC9E1", "#74A9CF", "#2B8CBE", "#045A8D"]
+  return platforms.map((i, index) => [i, colors[index]])
+}
+
+export const getLineColors = platforms => {
+  const colors = flightColors(platforms)
+  return [
+    "match",
+    ["get", "platform_name"],
+    ...colors.flatMap(i => i),
+    "#1a9b8c", // this is a fallback color
+  ]
+}