Add static icons to the map + update colors

src/components/timeline/map.js

@@ -17,6 +17,7 @@ import {
   MOVING_PLATFORMS_COLORS,
   STATIC_PLATFORMS,
   getLineColors,
+  getStaticIcons,
 } from "../../utils/platform-colors"
 
 export function DeploymentMap({
@@ -50,6 +51,7 @@ export function DeploymentMap({
   const lineColorsPaint = getLineColors(
     movingPlatforms.filter((i, index) => movingPlatforms.indexOf(i) === index)
   )
+  const iconImage = getStaticIcons()
 
   const [selectedPlatforms, setSelectedPlatforms] = useState(
     names
@@ -114,28 +116,24 @@ export function DeploymentMap({
           <DeploymentLayer
             config={{
               id: "static-locations",
-              type: "circle",
+              type: "symbol",
               source: "deployment",
-              paint: {
-                "circle-color": "#E8E845",
-                "circle-opacity": {
-                  base: 1.5,
-                  stops: [
-                    [10, 0.65],
-                    [14, 0.85],
-                  ],
-                },
-                "circle-radius": {
-                  base: 1.5,
-                  stops: [
-                    [10, 4],
-                    [16, 10],
-                    [20, 16],
-                  ],
-                },
-                "circle-stroke-width": 1,
-                "circle-stroke-opacity": 0.1,
-                "circle-stroke-color": "#E8E845",
+              layout: {
+                "icon-image": iconImage,
+                "icon-allow-overlap": true,
+                "icon-size": [
+                  "interpolate",
+                  ["exponential", 0.3],
+                  ["zoom"],
+                  0,
+                  0.1,
+                  12,
+                  0.6,
+                  18,
+                  1,
+                  22,
+                  1.5,
+                ],
               },
               filter: ["all", ["==", "$type", "Point"]],
             }}
@@ -204,7 +202,7 @@ DeploymentLayer.propTypes = {
   map: PropTypes.object,
   config: PropTypes.object,
   selectedDeployment: PropTypes.string,
-  selectedPlatforms: PropTypes.string,
+  selectedPlatforms: PropTypes.array,
   onLoad: PropTypes.func,
 }
 

src/icons/static-platform-icons.js

@@ -75,7 +75,7 @@ export const FieldSurveyIcon = ({ size = "extra-tiny" }) => (
   </svg>
 )
 
-export const PermanentWaterIcon = ({ size = "extra-tiny" }) => (
+export const PermanentWaterSiteIcon = ({ size = "extra-tiny" }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 576 512"

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

@@ -1,7 +1,12 @@
-import { getLineColors, MOVING_PLATFORMS_COLORS } from "../platform-colors"
+import {
+  getLineColors,
+  getStaticIcons,
+  MOVING_PLATFORMS_COLORS,
+  STATIC_PLATFORMS,
+} from "../platform-colors"
 
 describe("getLineColor", () => {
-  it("returns correct match for DC-8 and ER-2", () => {
+  it("returns correct mapbox gl expression to color platforms", () => {
     const platforms = ["DC-8", "ER-2", "GH", "Learjet"]
     const result = [
       "match",
@@ -19,3 +24,28 @@ describe("getLineColor", () => {
     expect(getLineColors(platforms)).toEqual(result)
   })
 })
+
+describe("getStaticIcons", () => {
+  it("returns correct mapbox gl expression", () => {
+    const result = [
+      "match",
+      ["get", "platform_name"],
+      STATIC_PLATFORMS[0].name,
+      STATIC_PLATFORMS[0].mapIcon,
+      STATIC_PLATFORMS[1].name,
+      STATIC_PLATFORMS[1].mapIcon,
+      STATIC_PLATFORMS[2].name,
+      STATIC_PLATFORMS[2].mapIcon,
+      STATIC_PLATFORMS[3].name,
+      STATIC_PLATFORMS[3].mapIcon,
+      STATIC_PLATFORMS[4].name,
+      STATIC_PLATFORMS[4].mapIcon,
+      STATIC_PLATFORMS[5].name,
+      STATIC_PLATFORMS[5].mapIcon,
+      STATIC_PLATFORMS[6].name,
+      STATIC_PLATFORMS[6].mapIcon,
+      "BalloonIcon",
+    ]
+    expect(getStaticIcons()).toEqual(result)
+  })
+})

src/utils/platform-colors.js

@@ -6,7 +6,7 @@ import {
   FieldSurveyIcon,
   MooredBuoyIcon,
   PermanentLandSiteIcon,
-  PermanentWaterIcon,
+  PermanentWaterSiteIcon,
   VehicleIcon,
 } from "../icons/static-platform-icons"
 
@@ -28,17 +28,44 @@ export const STATIC_PLATFORMS = [
     name: "Permanent Land Site",
     color: "#FFFFD4",
     icon: <PermanentLandSiteIcon />,
+    mapIcon: "PermanentLandSiteIcon",
   },
-  { name: "Vehicle", color: "#FEE391", icon: <VehicleIcon /> },
-  { name: "Balloon Launch Site", color: "#FEC44F", icon: <BalloonIcon /> },
-  { name: "Field Site", color: "#EC7014", icon: <FieldSiteIcon /> },
-  { name: "Field Survey", color: "#EC7014", icon: <FieldSurveyIcon /> },
   {
-    name: "Permanent Water Site",
+    name: "Vehicle",
+    color: "#FEE391",
+    icon: <VehicleIcon />,
+    mapIcon: "VehicleIcon",
+  },
+  {
+    name: "Balloon Launch Site",
+    color: "#FEC44F",
+    icon: <BalloonIcon />,
+    mapIcon: "BalloonIcon",
+  },
+  {
+    name: "Field Site",
+    color: "#FE9929",
+    icon: <FieldSiteIcon />,
+    mapIcon: "FieldSiteIcon",
+  },
+  {
+    name: "Field Survey",
     color: "#EC7014",
-    icon: <PermanentWaterIcon />,
+    icon: <FieldSurveyIcon />,
+    mapIcon: "FieldSurveyIcon",
+  },
+  {
+    name: "Permanent Water Site",
+    color: "#CC4C02",
+    icon: <PermanentWaterSiteIcon />,
+    mapIcon: "PermanentWaterSiteIcon",
+  },
+  {
+    name: "Moored Buoy",
+    color: "#8C2D04",
+    icon: <MooredBuoyIcon />,
+    mapIcon: "MooredBuoyIcon",
   },
-  { name: "Moored Buoy", color: "#EC7014", icon: <MooredBuoyIcon /> },
 ]
 
 export const flightPathColors = platforms =>
@@ -53,3 +80,13 @@ export const getLineColors = platforms => {
     FALLBACK_COLOR,
   ]
 }
+
+export const getStaticIcons = () => {
+  const icons = STATIC_PLATFORMS.map(i => [i.name, i.mapIcon])
+  return [
+    "match",
+    ["get", "platform_name"],
+    ...icons.flatMap(i => i),
+    "BalloonIcon", // fallback icon
+  ]
+}