Add GlobeMap view option to campaign maps

gatsby-config.js

@@ -94,8 +94,8 @@ module.exports = {
           "child-src": "'self' blob:",
           "connect-src":
             process.env.NODE_ENV === "development"
-              ? "'self' https://admg.nasa-impact.net https://www.google-analytics.com https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com http://localhost:* ws://localhost:*"
-              : "'self' https://admg.nasa-impact.net https://www.google-analytics.com https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com https://admgstaging.nasa-impact.net/api/unpublished_drafts",
+              ? "'self' https://admg.nasa-impact.net https://www.google-analytics.com https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com http://localhost:* ws://localhost:* https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson"
+              : "'self' https://admg.nasa-impact.net https://www.google-analytics.com https://*.tiles.mapbox.com https://api.mapbox.com https://events.mapbox.com https://admgstaging.nasa-impact.net/api/unpublished_drafts https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson",
         },
       },
     },

package.json

@@ -27,10 +27,11 @@
     "@turf/area": "^6.5.0",
     "@turf/bbox": "^6.5.0",
     "@turf/boolean-disjoint": "^6.5.0",
-    "@turf/centroid": "^6.5.0",
+    "@turf/centroid": "^7.1.0",
     "@turf/envelope": "^6.5.0",
     "d3": "^7.3.0",
     "date-fns": "^2.28.0",
+    "deck.gl": "^9.0.30",
     "gatsby": "^5.13.7",
     "gatsby-plugin-csp": "^1.1.4",
     "gatsby-plugin-google-gtag": "5.13.1",

src/components/map/globe-map.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useState, useMemo } from "react"
+import { centroid } from "@turf/centroid"
+import DeckGL from "@deck.gl/react"
+import {
+  COORDINATE_SYSTEM,
+  _GlobeView as GlobeView,
+  FlyToInterpolator,
+} from "@deck.gl/core"
+import { GeoJsonLayer } from "@deck.gl/layers"
+import { SimpleMeshLayer } from "@deck.gl/mesh-layers"
+import { SphereGeometry } from "@luma.gl/engine"
+import PropTypes from "prop-types"
+
+const INITIAL_VIEW_STATE = {
+  longitude: -98,
+  latitude: 40,
+  zoom: 0,
+}
+
+export function GlobeMap({ geojson }) {
+  const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE)
+
+  useEffect(() => {
+    const dataCentroid = centroid(geojson)
+    const [lon, lat] = dataCentroid.geometry.coordinates
+    setInitialViewState({
+      longitude: lon,
+      latitude: lat,
+      zoom: 1,
+      transitionInterpolator: new FlyToInterpolator({ speed: 1.5 }),
+      transitionDuration: "auto",
+    })
+  }, [geojson])
+
+  const backgroundLayers = useMemo(
+    () => [
+      new SimpleMeshLayer({
+        id: "earth-sphere",
+        data: [0],
+        mesh: new SphereGeometry({
+          radius: 6.3e6,
+          nlat: 18,
+          nlong: 36,
+        }),
+        coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
+        getPosition: [0, 0, 0],
+        getColor: [255, 255, 255],
+      }),
+      new GeoJsonLayer({
+        id: "earth-land",
+        data: "https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson",
+        // Styles
+        stroked: false,
+        filled: true,
+        opacity: 0.1,
+        getFillColor: [18, 23, 33],
+      }),
+    ],
+    []
+  )
+
+  const dataLayers = new GeoJsonLayer({
+    id: "flight",
+    data: geojson,
+    // Styles
+    lineWidthMinPixels: 0.5,
+    getLineWidth: 1,
+    getLineColor: [255, 0, 0],
+  })
+
+  return (
+    <div style={{ position: "relative", display: "block", height: "500px", width: "100%", overflow: "hidden", background: "#111", }} >
+      <DeckGL
+        views={
+          new GlobeView({
+            controller: { keyboard: false, inertia: true },
+          })
+        }
+        initialViewState={initialViewState}
+        layers={[backgroundLayers, dataLayers]}
+      ></DeckGL>
+    </div>
+  )
+}
+
+GlobeMap.propTypes = {
+  geojson: PropTypes.object.required,
+}

src/components/timeline/timeline-chart.js

@@ -13,6 +13,8 @@ import { Disclosure } from "@reach/disclosure"
 import { DeploymentPanel } from "./deployment-panel"
 import { DeploymentMap } from "./map"
 import { replaceSlashes } from "../../utils/helpers"
+import { GlobeMap } from "../map/globe-map"
+import Button from "../button"
 
 const chartSettings = {
   marginTop: 1,
@@ -86,6 +88,7 @@ export const TimelineChart = ({ deployments, bounds, campaignName }) => {
   const [count, setCount] = useState(1)
   const [priority, setPriority] = useState({})
   const [geojson, setGeojson] = useState({})
+  const [enable3DView, setEnable3DView] = useState(false)
 
   const [tooltip, setTooltip] = useState({ x: null, y: null })
   const [tooltipContent, setTooltipContent] = useState(null)
@@ -146,12 +149,27 @@ export const TimelineChart = ({ deployments, bounds, campaignName }) => {
   return (
     <Disclosure open={!!selectedDeployment}>
       {geojson?.features?.length && (
-        <DeploymentMap
-          geojson={geojson}
-          deployments={deployments}
-          bounds={bounds}
-          selectedDeployment={selectedDeployment}
-        />
+        <>
+          {enable3DView ? (
+            <GlobeMap geojson={geojson} />
+          ) : (
+            <DeploymentMap
+              geojson={geojson}
+              deployments={deployments}
+              bounds={bounds}
+              selectedDeployment={selectedDeployment}
+            />
+          )}
+          <div css={{ marginTop: "5px" }}>
+            <Button
+              action={() => setEnable3DView(!enable3DView)}
+              mode={POSITIVE}
+              noBorder
+            >
+              Switch to {enable3DView ? "2D" : "3D"} map view
+            </Button>
+          </div>
+        </>
       )}
       <div
         ref={containerRef}