Improve GlobeMap rendering and set flight colors based on the platfor…

…m name
NASA-IMPACT · Sep 27, 2024 · 02f1400 · 02f1400
1 parent ba521b4
commit 02f1400
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 7 deletions.
diff --git a/src/components/map/globe-map.js b/src/components/map/globe-map.js
@@ -12,6 +12,8 @@ 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"
 
 const INITIAL_VIEW_STATE = {
   longitude: -98,
@@ -20,8 +22,16 @@ const INITIAL_VIEW_STATE = {
 }
 const MAPBOX_TOKEN = process.env.GATSBY_MAPBOX_TOKEN
 
-export function GlobeMap({ geojson, mapStyleID }) {
+export function GlobeMap({ geojson, deployments, mapStyleID }) {
   const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE)
+  const platforms = getUniquePlatforms(
+    deployments.flatMap(d => d.collectionPeriods)
+  ).map(i => ({ name: i.item.shortname, type: i.item.platformType.shortname }))
+  const movingPlatforms = platforms
+    .filter(platform =>
+      ["Jet", "Prop", "UAV", "Ships/Boats"].includes(platform.type)
+    )
+    .map(platform => platform.name)
 
   useEffect(() => {
     const dataCentroid = centroid(geojson)
@@ -47,15 +57,15 @@ export function GlobeMap({ geojson, mapStyleID }) {
         }),
         coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
         getPosition: [0, 0, 0],
-        getColor: [18, 42, 70, 255],
+        getColor: [42, 98, 163, 125],
       }),
       new TileLayer({
         id: "TileLayer",
         data: `https://api.mapbox.com/styles/v1/${mapStyleID}/tiles/256/{z}/{x}/{y}@2x?access_token=${MAPBOX_TOKEN}`,
         maxZoom: 22,
         minZoom: 0,
+        zoomOffset: 1,
         tileSize: 256,
-
         renderSubLayers: props => {
           // eslint-disable-next-line react/prop-types
           const { boundingBox } = props.tile
@@ -79,10 +89,14 @@ export function GlobeMap({ geojson, mapStyleID }) {
   const dataLayers = new GeoJsonLayer({
     id: "flight",
     data: geojson,
+    pointType: "circle",
     // Styles
     lineWidthMinPixels: 0.5,
     getLineWidth: 1,
-    getLineColor: [255, 0, 0],
+    getLineColor: f =>
+      getLineColorToDeckGL(movingPlatforms.indexOf(f.properties.platform_name)),
+    getFillColor: [160, 160, 180, 200],
+    getPointRadius: 4,
   })
 
   return (
@@ -93,6 +107,7 @@ export function GlobeMap({ geojson, mapStyleID }) {
             controller: { keyboard: false, inertia: true },
           })
         }
+        parameters={{ cull: true }}
         initialViewState={initialViewState}
         layers={[backgroundLayers, dataLayers]}
       ></DeckGL>
@@ -101,8 +116,9 @@ export function GlobeMap({ geojson, mapStyleID }) {
 }
 
 GlobeMap.propTypes = {
-  geojson: PropTypes.object.required,
-  mapStyleID: PropTypes.string.required,
+  geojson: PropTypes.object,
+  deployments: PropTypes.array,
+  mapStyleID: PropTypes.string,
 }
 
 const MapContainer = styled.div`

diff --git a/src/components/timeline/timeline-chart.js b/src/components/timeline/timeline-chart.js
@@ -152,7 +152,11 @@ export const TimelineChart = ({ deployments, bounds, campaignName }) => {
       {geojson?.features?.length && (
         <>
           {enable3DView ? (
-            <GlobeMap geojson={geojson} mapStyleID={MAP_STYLE_ID} />
+            <GlobeMap
+              geojson={geojson}
+              deployments={deployments}
+              mapStyleID={MAP_STYLE_ID}
+            />
           ) : (
             <DeploymentMap
               geojson={geojson}

diff --git a/src/utils/__tests__/platform-colors.test.js b/src/utils/__tests__/platform-colors.test.js
@@ -1,5 +1,6 @@
 import {
   getLineColors,
+  getLineColorToDeckGL,
   getStaticIcons,
   MOVING_PLATFORMS_COLORS,
   STATIC_PLATFORMS,
@@ -51,3 +52,15 @@ describe("getStaticIcons", () => {
     expect(getStaticIcons()).toEqual(result)
   })
 })
+
+describe("getLineColorsToDeckGL", () => {
+  it("returns the color in RGB format", () => {
+    const platforms = ["DC-8", "ER-2", "GH", "Learjet"]
+    expect(getLineColorToDeckGL(platforms.indexOf("DC-8"))).toEqual([
+      178, 223, 138,
+    ])
+    expect(getLineColorToDeckGL(platforms.indexOf("GH"))).toEqual([
+      253, 191, 111,
+    ])
+  })
+})
diff --git a/src/utils/platform-colors.js b/src/utils/platform-colors.js
@@ -78,6 +78,16 @@ export const STATIC_PLATFORMS = [
 export const flightPathColors = platforms =>
   platforms.map((i, index) => [i, MOVING_PLATFORMS_COLORS[index]])
 
+const hex2rgb = hex => hex.match(/[0-9a-f]{2}/g).map(x => parseInt(x, 16))
+
+export const getLineColorToDeckGL = index => {
+  if (index === -1) return hex2rgb(FALLBACK_COLOR)
+  const color = MOVING_PLATFORMS_COLORS[index]
+  // converts from HEX to RGB
+  console.log(hex2rgb)
+  return hex2rgb(color)
+}
+
 export const getLineColors = platforms => {
   const colors = flightPathColors(platforms)
   return [