From 26bacf3a7d7960ba6f15923dd52eb6223a7f10c4 Mon Sep 17 00:00:00 2001 From: Wille Marcel Date: Thu, 26 Sep 2024 15:49:03 -0300 Subject: [PATCH] Add GlobeMap view option to campaign maps --- gatsby-config.js | 4 +- package.json | 3 +- src/components/map/globe-map.js | 88 +++ src/components/timeline/timeline-chart.js | 30 +- yarn.lock | 902 +++++++++++++++++++++- 5 files changed, 1004 insertions(+), 23 deletions(-) create mode 100644 src/components/map/globe-map.js diff --git a/gatsby-config.js b/gatsby-config.js index 1f11c79d..0bd536a2 100644 --- 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:*" - : "'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", }, }, }, diff --git a/package.json b/package.json index b7235afc..8813a2b6 100644 --- a/package.json +++ b/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", diff --git a/src/components/map/globe-map.js b/src/components/map/globe-map.js new file mode 100644 index 00000000..8eddb6ff --- /dev/null +++ b/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 ( +
+ +
+ ) +} + +GlobeMap.propTypes = { + geojson: PropTypes.object.required, +} diff --git a/src/components/timeline/timeline-chart.js b/src/components/timeline/timeline-chart.js index 43709592..73a4a58f 100644 --- a/src/components/timeline/timeline-chart.js +++ b/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 ( {geojson?.features?.length && ( - + <> + {enable3DView ? ( + + ) : ( + + )} +
+ +
+ )}