Merge pull request #264 from UW-Macrostrat/google-tiles

Google tiles

Author: davenquinn

deps/cesium-viewer

@@ -25,7 +25,8 @@
   "authors": [
     "John Czaplewski <[email protected]>",
     "Daven Quinn <[email protected]>",
-    "Casey Idzikowski <[email protected]>"
+    "Casey Idzikowski <[email protected]>",
+    "Amy Fromandi <[email protected]>"
   ],
   "license": "MIT",
   "devDependencies": {
@@ -159,6 +160,10 @@
     "vite-plugin-inspect": "^0.8.4",
     "zustand": "^4.5.1"
   },
+  "resolutions": {
+    "cesium": "^1.123.1",
+    "resium:": "1.17.1"
+  },
   "prettier": {
     "proseWrap": "always"
   },

package.json

@@ -20,6 +20,6 @@
     "@macrostrat/hyper": "^2.0.1",
     "@macrostrat/mapbox-react": "workspace:*",
     "@macrostrat/mapbox-utils": "workspace:*",
-    "cesium": "^1.109.0"
+    "cesium": "^1.123.1"
   }
 }

packages/globe-dev/package.json

@@ -1,14 +1,20 @@
 // Import @types/cesium to use along with CesiumJS
 //import VectorProvider from "@macrostrat/cesium-vector-provider";
 import TerrainProvider from "@macrostrat/cesium-martini";
-import { useRef } from "react";
+import { useRef, useEffect } from "react";
 import h from "@macrostrat/hyper";
 import { ImageryLayer } from "resium";
 import CesiumViewer, {
   DisplayQuality,
   MapboxLogo,
   SatelliteLayer,
+  GeologyLayer,
 } from "@macrostrat/cesium-viewer";
+import { useCesium } from "resium";
+import {
+  MapboxImageryProvider,
+  createGooglePhotorealistic3DTileset,
+} from "cesium";
 import { MapboxImageryProvider } from "cesium";
 import { elevationLayerURL } from "@macrostrat-web/settings";
 
@@ -35,8 +41,15 @@ function buildSatelliteLayer({ accessToken }) {
   return provider;
 }
 
-function CesiumView({ style, accessToken, ...rest }) {
-  const terrainProvider = useRef(
+function CesiumView({
+  style,
+  showGeology,
+  accessToken,
+  showGoogleTiles,
+  googleMapsAPIKey,
+  ...rest
+}) {
+  const terrainProvider: any = useRef(
     new TerrainProvider({
       hasVertexNormals: false,
       hasWaterMask: false,
@@ -48,8 +61,28 @@ function CesiumView({ style, accessToken, ...rest }) {
     })
   );
 
-  console.log("Access token", accessToken);
+  if (showGoogleTiles) {
+    // @ts-ignore
+    return h(
+      CesiumViewer,
+      {
+        terrainProvider: terrainProvider.current,
+        displayQuality: DisplayQuality.High,
+        fogDensity: 0.0002,
+        //skyBox: true,
+        showInspector: true,
+        showIonLogo: false,
+        ...rest,
+      },
+      [
+        h(GooglePhotorealistic3DTileset, {
+          googleMapsAPIKey,
+        }),
+      ]
+    );
+  }
 
+  // @ts-ignore
   return h(
     CesiumViewer,
     {
@@ -61,8 +94,36 @@ function CesiumView({ style, accessToken, ...rest }) {
       showIonLogo: false,
       ...rest,
     },
-    [h(SatelliteLayer, { accessToken }), h(MapboxLogo)]
+    [
+      h(SatelliteLayer, { accessToken, show: !showGoogleTiles }),
+      h(GeologyLayer, { alpha: 0.3, show: showGeology && !showGoogleTiles }),
+      h(MapboxLogo),
+      // h(GooglePhotorealistic3DTileset, {
+      //   googleMapsAPIKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
+      //   show: showGoogleTiles,
+      // }),
+    ]
   );
 }
 
+// https://cesium.com/learn/cesiumjs-learn/cesiumjs-photorealistic-3d-tiles/
+function GooglePhotorealistic3DTileset({ googleMapsAPIKey }) {
+  const viewer = useCesium();
+  const tileset = useRef(null);
+  useEffect(() => {
+    if (tileset.current != null) {
+      viewer.scene.primitives.add(tileset.current);
+    } else {
+      createGooglePhotorealistic3DTileset(googleMapsAPIKey).then((ts) => {
+        tileset.current = ts;
+        viewer.scene.primitives.add(ts);
+      });
+    }
+    return () => {
+      viewer.scene.primitives.remove(tileset.current);
+    };
+  }, [googleMapsAPIKey, viewer]);
+  return null;
+}
+
 export default CesiumView;

packages/globe-dev/src/cesium-view.ts

@@ -3,6 +3,7 @@ import {
   DisplayQuality,
   flyToParams,
   translateCameraPosition,
+  GeologyLayer,
 } from "@macrostrat/cesium-viewer";
 import hyper from "@macrostrat/hyper";
 import { MapPosition } from "@macrostrat/mapbox-utils";
@@ -26,10 +27,9 @@ import Map from "./map-comparison";
 
 const h = hyper.styled(styles);
 
-function VisControl({ show, setShown, name }) {
+function VisControl({ show, setShown, name, children }) {
   const className = show ? "active" : "";
-  return h(
-    "li",
+  return h("li.vis-control", [
     h(
       "a",
       {
@@ -39,8 +39,9 @@ function VisControl({ show, setShown, name }) {
         },
       },
       [show ? "Hide" : "Show", " ", name]
-    )
-  );
+    ),
+    children,
+  ]);
 }
 
 function getStartingPosition(): MapPosition {
@@ -74,15 +75,20 @@ function App({ accessToken }) {
   const style = "mapbox://styles/jczaplewski/cklb8aopu2cnv18mpxwfn7c9n";
   const [showWireframe, setShowWireframe] = useState(false);
   const [showInspector, setShowInspector] = useState(false);
+  const [showGoogleTiles, setShowGoogleTiles] = useState(false);
   const [showMapbox, setShowMapbox] = useState(false);
+  const [showGeology, setShowGeology] = useState(false);
   const [position, setPosition] = useState<MapPosition>(
     initialPosition.current
   );
 
+  const googleMapsAPIKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY;
+
   const queryString = useRef<object>({});
 
   useEffect(() => {
     let hashData = {};
+    console.log("Updated position");
     applyMapPositionToHash(hashData, position);
     queryString.current = buildQueryString(hashData);
     setHashString(hashData);
@@ -102,6 +108,7 @@ function App({ accessToken }) {
   }
 
   const onViewChange = useCallback((cpos: CameraParams) => {
+    console.log("View changed");
     const { camera } = cpos;
     setPosition({
       camera: {
@@ -133,6 +140,16 @@ function App({ accessToken }) {
           show: showMapbox,
           setShown: setShowMapbox,
         }),
+        h(VisControl, {
+          name: "Google tiles",
+          show: showGoogleTiles,
+          setShown: setShowGoogleTiles,
+        }),
+        h(VisControl, {
+          name: "geology",
+          show: showGeology,
+          setShown: setShowGeology,
+        }),
         h(Link, { href: mapURL }, "Switch to map"),
         h(GoogleEarthLink, { position }, "Open in Google Earth"),
       ]),
@@ -145,9 +162,12 @@ function App({ accessToken }) {
           flyTo,
           showWireframe,
           showInspector,
+          showGeology,
+          showGoogleTiles,
           highResolution: true,
           displayQuality: DisplayQuality.High,
           onViewChange,
+          googleMapsAPIKey,
         }),
       ]),
       h.if(showMapbox)("div.map-panel", [