Try to add static location icons

NASA-IMPACT · Oct 3, 2024 · b973320 · b973320
1 parent 228a70f
commit b973320
Show file tree

Hide file tree

Showing 4 changed files with 186 additions and 141 deletions.
diff --git a/src/components/map/globe-map.js b/src/components/map/globe-map.js
@@ -6,14 +6,14 @@ import {
   _GlobeView as GlobeView,
   FlyToInterpolator,
 } from "@deck.gl/core"
-import { GeoJsonLayer, BitmapLayer } from "@deck.gl/layers"
+import { GeoJsonLayer, BitmapLayer, IconLayer } from "@deck.gl/layers"
 import { TileLayer } from "@deck.gl/geo-layers"
 import { SimpleMeshLayer } from "@deck.gl/mesh-layers"
 import { SphereGeometry } from "@luma.gl/engine"
 import PropTypes from "prop-types"
 import styled from "styled-components"
 import { getUniquePlatforms } from "../../utils/get-unique-platforms"
-import { getLineColorToDeckGL } from "../../utils/platform-colors"
+import { getLineColorAsRGB, getPlatformIcon } from "../../utils/platform-colors"
 
 const INITIAL_VIEW_STATE = {
   longitude: -98,
@@ -24,6 +24,7 @@ const MAPBOX_TOKEN = process.env.GATSBY_MAPBOX_TOKEN
 
 export function GlobeMap({ geojson, deployments, mapStyleID }) {
   const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE)
+  const [iconMapping, setIconMapping] = useState({})
   const platforms = getUniquePlatforms(
     deployments.flatMap(d => d.collectionPeriods)
   ).map(i => ({ name: i.item.shortname, type: i.item.platformType.shortname }))
@@ -33,6 +34,27 @@ export function GlobeMap({ geojson, deployments, mapStyleID }) {
     )
     .map(platform => platform.name)
 
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch(
+          `https://api.mapbox.com/styles/v1/${mapStyleID}/48lhibiqllsww17zqo5nw6pga/sprite@2x.json?access_token=${MAPBOX_TOKEN}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        )
+        const mapping = await response.json()
+        setIconMapping(mapping)
+      } catch (error) {
+        console.log("catch error", error)
+      }
+    }
+    fetchData()
+  }, [])
+
   useEffect(() => {
     const dataCentroid = centroid(geojson)
     const [lon, lat] = dataCentroid.geometry.coordinates
@@ -86,33 +108,48 @@ export function GlobeMap({ geojson, deployments, mapStyleID }) {
     []
   )
 
-  const dataLayers = new GeoJsonLayer({
-    id: "flight",
-    data: geojson,
-    pointType: "circle",
-    // Styles
+  const flights = new GeoJsonLayer({
+    id: "flights",
+    data: {
+      ...geojson,
+      features: geojson.features.filter(f => f.geometry.type !== "Point"),
+    },
     lineWidthMinPixels: 0.5,
     getLineWidth: 1,
     getLineColor: f =>
-      getLineColorToDeckGL(movingPlatforms.indexOf(f.properties.platform_name)),
-    getFillColor: [160, 160, 180, 200],
-    getPointRadius: 4,
+      getLineColorAsRGB(movingPlatforms.indexOf(f.properties.platform_name)),
   })
 
-  return (
-    <MapContainer>
-      <DeckGL
-        views={
-          new GlobeView({
-            controller: { keyboard: false, inertia: true },
-          })
-        }
-        parameters={{ cull: true }}
-        initialViewState={initialViewState}
-        layers={[backgroundLayers, dataLayers]}
-      ></DeckGL>
-    </MapContainer>
-  )
+  const staticLocations = new IconLayer({
+    id: "static-platforms",
+    data: geojson.features.filter(f => f.geometry.type === "Point"),
+    pickable: true,
+    iconAtlas: `https://api.mapbox.com/styles/v1/${mapStyleID}/sprite@2x.png?access_token=${MAPBOX_TOKEN}`,
+    iconMapping: iconMapping,
+    getIcon: f => {
+      return getPlatformIcon(f.properties.platform_name)
+    },
+    getPosition: f => f.geometry.coordinates,
+    getSize: 20,
+    sizeScale: 15,
+  })
+
+  if (iconMapping && geojson) {
+    return (
+      <MapContainer>
+        <DeckGL
+          views={
+            new GlobeView({
+              controller: { keyboard: false, inertia: true },
+            })
+          }
+          parameters={{ cull: true }}
+          initialViewState={initialViewState}
+          layers={[backgroundLayers, flights, staticLocations]}
+        ></DeckGL>
+      </MapContainer>
+    )
+  }
 }
 
 GlobeMap.propTypes = {

diff --git a/src/components/timeline/map.js b/src/components/timeline/map.js
@@ -68,117 +68,115 @@ export function DeploymentMap({
       basemap={`mapbox://styles/${mapStyleID}`}
       showControls={true}
     >
-      {geojson && (
-        <Source
-          id="deployment"
+      <Source
+        id="deployment"
+        config={{
+          type: "geojson",
+          data: geojson,
+        }}
+      >
+        <DeploymentLayer
           config={{
-            type: "geojson",
-            data: geojson,
+            id: "flights",
+            type: "line",
+            source: "deployment",
+            paint: {
+              "line-color": lineColorsPaint,
+              "line-width": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                0,
+                1,
+                10,
+                2,
+                22,
+                6,
+              ],
+              "line-opacity": [
+                "interpolate",
+                ["linear"],
+                ["zoom"],
+                0,
+                0.25,
+                10,
+                0.5,
+                22,
+                1,
+              ],
+            },
+            visible: true,
           }}
-        >
-          <DeploymentLayer
-            config={{
-              id: "flights",
-              type: "line",
-              source: "deployment",
-              paint: {
-                "line-color": lineColorsPaint,
-                "line-width": [
-                  "interpolate",
-                  ["linear"],
-                  ["zoom"],
-                  0,
-                  1,
-                  10,
-                  2,
-                  22,
-                  6,
-                ],
-                "line-opacity": [
-                  "interpolate",
-                  ["linear"],
-                  ["zoom"],
-                  0,
-                  0.25,
-                  10,
-                  0.5,
-                  22,
-                  1,
-                ],
-              },
-              visible: true,
-            }}
-            onLoad={map => map.fitBounds(bounds, { padding: 50 })}
-            selectedPlatforms={selectedPlatforms}
-            selectedDeployment={
-              selectedDeployment
-                ? replaceSlashes(selectedDeployment.longname)
-                : ""
-            }
-          />
-          <DeploymentLayer
-            config={{
-              id: "bg-static-locations",
-              type: "circle",
-              source: "deployment",
-              paint: {
-                "circle-color": "#294060",
-                "circle-radius": [
-                  "interpolate",
-                  ["exponential", 0.5],
-                  ["zoom"],
-                  0,
-                  4,
-                  10,
-                  14,
-                  22,
-                  20,
-                ],
-                "circle-stroke-width": 1,
-                "circle-stroke-color": iconColors,
-              },
-              filter: ["all", ["==", "$type", "Point"]],
-            }}
-            selectedPlatforms={selectedPlatforms}
-            selectedDeployment={
-              selectedDeployment
-                ? replaceSlashes(selectedDeployment.longname)
-                : ""
-            }
-          />
-          <DeploymentLayer
-            config={{
-              id: "static-locations",
-              type: "symbol",
-              source: "deployment",
-              layout: {
-                "icon-image": iconImage,
-                "icon-allow-overlap": true,
-                "icon-size": [
-                  "interpolate",
-                  ["exponential", 0.5],
-                  ["zoom"],
-                  0,
-                  0.25,
-                  10,
-                  0.75,
-                  16,
-                  1,
-                  20,
-                  1.125,
-                ],
-              },
-              filter: ["all", ["==", "$type", "Point"]],
-            }}
-            selectedPlatforms={selectedPlatforms}
-            selectedDeployment={
-              selectedDeployment
-                ? replaceSlashes(selectedDeployment.longname)
-                : ""
-            }
-          />
-        </Source>
-      )}
+          onLoad={map => map.fitBounds(bounds, { padding: 50 })}
+          selectedPlatforms={selectedPlatforms}
+          selectedDeployment={
+            selectedDeployment
+              ? replaceSlashes(selectedDeployment.longname)
+              : ""
+          }
+        />
+        <DeploymentLayer
+          config={{
+            id: "bg-static-locations",
+            type: "circle",
+            source: "deployment",
+            paint: {
+              "circle-color": "#294060",
+              "circle-radius": [
+                "interpolate",
+                ["exponential", 0.5],
+                ["zoom"],
+                0,
+                4,
+                10,
+                14,
+                22,
+                20,
+              ],
+              "circle-stroke-width": 1,
+              "circle-stroke-color": iconColors,
+            },
+            filter: ["all", ["==", "$type", "Point"]],
+          }}
+          selectedPlatforms={selectedPlatforms}
+          selectedDeployment={
+            selectedDeployment
+              ? replaceSlashes(selectedDeployment.longname)
+              : ""
+          }
+        />
+        <DeploymentLayer
+          config={{
+            id: "static-locations",
+            type: "symbol",
+            source: "deployment",
+            layout: {
+              "icon-image": iconImage,
+              "icon-allow-overlap": true,
+              "icon-size": [
+                "interpolate",
+                ["exponential", 0.5],
+                ["zoom"],
+                0,
+                0.25,
+                10,
+                0.75,
+                16,
+                1,
+                20,
+                1.125,
+              ],
+            },
+            filter: ["all", ["==", "$type", "Point"]],
+          }}
+          selectedPlatforms={selectedPlatforms}
+          selectedDeployment={
+            selectedDeployment
+              ? replaceSlashes(selectedDeployment.longname)
+              : ""
+          }
+        />
+      </Source>
       <MapLegend
         platforms={platforms}
         platformsWithData={platformsWithData}

diff --git a/src/utils/__tests__/platform-colors.test.js b/src/utils/__tests__/platform-colors.test.js
@@ -1,7 +1,8 @@
 import {
   getLineColors,
-  getLineColorToDeckGL,
+  getLineColorAsRGB,
   getStaticIcons,
+  getPlatformIcon,
   MOVING_PLATFORMS_COLORS,
   STATIC_PLATFORMS,
 } from "../platform-colors"
@@ -53,14 +54,21 @@ describe("getStaticIcons", () => {
   })
 })
 
-describe("getLineColorsToDeckGL", () => {
+describe("getLineColorAsRGB", () => {
   it("returns the color in RGB format", () => {
     const platforms = ["DC-8", "ER-2", "GH", "Learjet"]
-    expect(getLineColorToDeckGL(platforms.indexOf("DC-8"))).toEqual([
+    expect(getLineColorAsRGB(platforms.indexOf("DC-8"))).toEqual([
       178, 223, 138,
     ])
-    expect(getLineColorToDeckGL(platforms.indexOf("GH"))).toEqual([
-      253, 191, 111,
-    ])
+    expect(getLineColorAsRGB(platforms.indexOf("GH"))).toEqual([253, 191, 111])
+  })
+})
+
+describe("getPlatformIcon", () => {
+  it("returns the icon id for a platform", () => {
+    expect(getPlatformIcon("Vehicle")).toEqual("VehicleIcon")
+    expect(getPlatformIcon("Permanent Land Site")).toEqual(
+      "PermanentLandSiteIcon"
+    )
   })
 })