Add Mapbox tiles to GlobeView map

NASA-IMPACT · Sep 27, 2024 · ba521b4 · ba521b4
1 parent f092e4c
commit ba521b4
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/gatsby-config.js b/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:* 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",
+              ? "'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",
         },
       },
     },

diff --git a/src/components/map/globe-map.js b/src/components/map/globe-map.js
@@ -6,7 +6,8 @@ import {
   _GlobeView as GlobeView,
   FlyToInterpolator,
 } from "@deck.gl/core"
-import { GeoJsonLayer } from "@deck.gl/layers"
+import { GeoJsonLayer, BitmapLayer } 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"
@@ -17,8 +18,9 @@ const INITIAL_VIEW_STATE = {
   latitude: 40,
   zoom: 0,
 }
+const MAPBOX_TOKEN = process.env.GATSBY_MAPBOX_TOKEN
 
-export function GlobeMap({ geojson }) {
+export function GlobeMap({ geojson, mapStyleID }) {
   const [initialViewState, setInitialViewState] = useState(INITIAL_VIEW_STATE)
 
   useEffect(() => {
@@ -45,16 +47,30 @@ export function GlobeMap({ geojson }) {
         }),
         coordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
         getPosition: [0, 0, 0],
-        getColor: [255, 255, 255],
+        getColor: [18, 42, 70, 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],
+      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,
+        tileSize: 256,
+
+        renderSubLayers: props => {
+          // eslint-disable-next-line react/prop-types
+          const { boundingBox } = props.tile
+          return new BitmapLayer(props, {
+            data: null,
+            // eslint-disable-next-line react/prop-types
+            image: props.data,
+            bounds: [
+              boundingBox[0][0],
+              boundingBox[0][1],
+              boundingBox[1][0],
+              boundingBox[1][1],
+            ],
+          })
+        },
       }),
     ],
     []
@@ -86,6 +102,7 @@ export function GlobeMap({ geojson }) {
 
 GlobeMap.propTypes = {
   geojson: PropTypes.object.required,
+  mapStyleID: PropTypes.string.required,
 }
 
 const MapContainer = styled.div`

diff --git a/src/components/timeline/map.js b/src/components/timeline/map.js
@@ -26,6 +26,7 @@ export function DeploymentMap({
   deployments,
   bounds,
   selectedDeployment,
+  mapStyleID,
 }) {
   const platforms = getUniquePlatforms(
     deployments.flatMap(d => d.collectionPeriods)
@@ -64,7 +65,7 @@ export function DeploymentMap({
   return (
     <Map
       height={500}
-      basemap="mapbox://styles/devseed/clx25ggbv076o01ql8k8m03k8"
+      basemap={`mapbox://styles/${mapStyleID}`}
       showControls={true}
     >
       {geojson && (
@@ -194,6 +195,7 @@ DeploymentMap.propTypes = {
   deployments: PropTypes.array,
   bounds: PropTypes.array,
   selectedDeployment: PropTypes.object,
+  mapStyleID: PropTypes.string.isRequired,
 }
 
 const DeploymentLayer = ({

diff --git a/src/components/timeline/timeline-chart.js b/src/components/timeline/timeline-chart.js
@@ -42,6 +42,7 @@ export const Swatch = styled.div`
 
 export const TimelineChart = ({ deployments, bounds, campaignName }) => {
   const [containerRef, dms] = useChartDimensions(chartSettings)
+  const MAP_STYLE_ID = "devseed/clx25ggbv076o01ql8k8m03k8"
 
   const minDateString = d3
     .min(
@@ -151,13 +152,14 @@ export const TimelineChart = ({ deployments, bounds, campaignName }) => {
       {geojson?.features?.length && (
         <>
           {enable3DView ? (
-            <GlobeMap geojson={geojson} />
+            <GlobeMap geojson={geojson} mapStyleID={MAP_STYLE_ID} />
           ) : (
             <DeploymentMap
               geojson={geojson}
               deployments={deployments}
               bounds={bounds}
               selectedDeployment={selectedDeployment}
+              mapStyleID={MAP_STYLE_ID}
             />
           )}
           <div css={{ marginTop: "5px" }}>