@reearth/core 0.0.7-alpha.32 → 0.0.7-alpha.34

package/dist/index.d.ts

@@ -374,7 +374,7 @@ export declare type Credit = {
     html?: string;
 };
 
-declare type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair";
+declare type CursorType = "default" | "auto" | "help" | "pointer" | "grab" | "crosshair" | "wait";
 
 export declare type Data = {
     type: DataType;
@@ -763,6 +763,17 @@ export declare type FrustumAppearance = {
     length?: number;
 };
 
+export declare type GeoidProperty = {
+    server: {
+        url: string;
+        geoidProperty: string;
+    };
+};
+
+declare type GeoidRef = {
+    getGeoidHeight: (lat?: number, lng?: number) => Promise<number | undefined>;
+};
+
 export declare type Geometry = Point | LineString | Polygon_2 | MultiPoint | MultiLineString | MultiPolygon;
 
 export declare type GeometryOptionsXYZ = {
@@ -1099,6 +1110,7 @@ export declare type MapRef = {
     layers: WrappedRef<LayersRef>;
     sketch: WrappedRef<SketchRef>;
     spatialId?: WrappedRef<SpatialIdRef>;
+    geoid: WrappedRef<GeoidRef>;
     timeline?: TimelineManagerRef;
 };
 
@@ -1794,6 +1806,7 @@ export declare type ValueTypes = {
 
 export declare type ViewerProperty = {
     globe?: GlobeProperty;
+    geoid?: GeoidProperty;
     terrain?: TerrainProperty;
     scene?: SceneProperty;
     tiles?: TileProperty[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.32",
+  "version": "0.0.7-alpha.34",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",

package/src/Map/Geoid/index.tsx

@@ -0,0 +1,68 @@
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from "react";
+
+import { GeoidServer, GeoidRef } from "./types";
+
+export type GeoidProps = {
+  geoidServer?: GeoidServer;
+};
+
+const MAX_GEOID_CACHE_SIZE = 1000;
+
+const Geoid: ForwardRefRenderFunction<GeoidRef, GeoidProps> = ({ geoidServer }, ref) => {
+  const geoidCache = useRef<Map<string, number>>(new Map());
+
+  const getGeoidHeight = useCallback(
+    async (lng?: number, lat?: number): Promise<number | undefined> => {
+      if (!geoidServer?.url || !geoidServer?.geoidProperty) {
+        console.error("Geoid: Server is not set properly");
+        return Promise.resolve(undefined);
+      }
+
+      if (lat === undefined || lng === undefined) {
+        console.error("Geoid: Invalid lat or lng");
+        return Promise.resolve(undefined);
+      }
+
+      const cache = geoidCache.current.get(`${lng},${lat}`);
+      if (cache) return Promise.resolve(cache);
+
+      return fetch(
+        geoidServer.url.replace("${lng}", lng.toString()).replace("${lat}", lat.toString()),
+      )
+        .then(res => {
+          return res.json().then((result: any) => {
+            if (!result) return undefined;
+            const geoid = Number(result[geoidServer?.geoidProperty]);
+            if (!isNaN(geoid)) {
+              const cache = geoidCache.current;
+              if (cache.size > MAX_GEOID_CACHE_SIZE) {
+                const firstKey = cache.keys().next().value;
+                if (firstKey) cache.delete(firstKey);
+              }
+              cache.set(`${lng},${lat}`, geoid);
+              return geoid;
+            }
+            return undefined;
+          });
+        })
+        .catch(e => {
+          console.error("Failed to fetch geoid height", e);
+          return undefined;
+        });
+    },
+    [geoidServer?.url, geoidServer?.geoidProperty],
+  );
+
+  useImperativeHandle(ref, () => ({
+    getGeoidHeight,
+  }));
+  return null;
+};
+
+export default forwardRef(Geoid);

package/src/Map/Geoid/types.ts

@@ -0,0 +1,8 @@
+export type GeoidServer = {
+  url: string; // URL of the geoid server. use ${lat} ${lng} for lat/lng placeholders. Example: "https://mock.com/api/altitude?lat=${lat}&lng=${lng}"
+  geoidProperty: string; // TODO: support json path
+};
+
+export type GeoidRef = {
+  getGeoidHeight: (lat?: number, lng?: number) => Promise<number | undefined>;
+};

package/src/Map/SpatialId/constants.ts

@@ -14,3 +14,8 @@ export const SPATIALID_DEFAULT_OPTIONS: Required<SpatialIdPickSpaceOptions> = {
   verticalSpaceIndicatorColor: "#ffffff33",
   verticalSpaceIndicatorOutlineColor: "#ffffff55",
 };
+
+export const SPATIALID_LATITUDE_RANGE = {
+  min: -85.0511,
+  max: 85.0511,
+};

package/src/Map/SpatialId/hooks.ts

@@ -12,9 +12,10 @@ import { v4 as uuid } from "uuid";
 
 import { useWindowEvent } from "../../utils/use-window-event";
 import { InteractionModeType } from "../../Visualizer";
+import { GeoidRef } from "../Geoid/types";
 import { EngineRef, MouseEventProps } from "../types";
 
-import { SPATIALID_DEFAULT_OPTIONS } from "./constants";
+import { SPATIALID_DEFAULT_OPTIONS, SPATIALID_LATITUDE_RANGE } from "./constants";
 import {
   SpatialIdRef,
   SpatialIdSpacePickingState,
@@ -29,6 +30,7 @@ import { createSpatialIdSpace, getSpaceData, getVerticalLimits } from "./utils";
 type Props = {
   ref: ForwardedRef<SpatialIdRef>;
   engineRef: RefObject<EngineRef>;
+  geoidRef: RefObject<GeoidRef>;
   terrainEnabled?: boolean;
   interactionMode?: InteractionModeType;
   overrideInteractionMode?: (mode: InteractionModeType) => void;
@@ -38,6 +40,7 @@ type Props = {
 export default ({
   ref,
   engineRef,
+  geoidRef,
   terrainEnabled,
   interactionMode,
   overrideInteractionMode,
@@ -51,9 +54,12 @@ export default ({
   const [coordinateSelector, setCoordinateSelector] = useState<CoordinateSelectorType | null>(null);
   const lastCoordinateSelector = useRef<CoordinateSelectorType | null>(null);
   const [spaceSelector, setSpaceSelector] = useState<SpatialIdSpaceType | null>(null);
+  const centerGeoidHeightRef = useRef<number | null>(null);
 
   const [basePosition, setBasePosition] = useState<[number, number, number] | null>(null);
-  const [baseCoordinate, setBaseCoordinate] = useState<[number, number, number] | null>(null);
+  const [baseCoordinateGeoid, setBaseCoordinateGeoid] = useState<[number, number, number] | null>(
+    null,
+  );
 
   const [pickOptions, setPickOptions] =
     useState<Required<SpatialIdPickSpaceOptions>>(SPATIALID_DEFAULT_OPTIONS);
@@ -67,7 +73,7 @@ export default ({
     const allSpaces = [...(spatialIdSpaces ?? []), ...(spaceSelector ? [spaceSelector] : [])];
 
     if (!allSpaces) return null;
-    // find unique spaces by space.space.zfxy.z, space.space.zfxy.x, space.space.zfxy.y
+
     const uniqueSpaces = allSpaces.reduce((acc, space) => {
       if (
         !acc.find(
@@ -113,10 +119,11 @@ export default ({
   const finishPicking = useCallback(() => {
     setState("idle");
     setBasePosition(null);
-    setBaseCoordinate(null);
+    setBaseCoordinateGeoid(null);
     setSpaceSelector(null);
     setCoordinateSelector(null);
     lastCoordinateSelector.current = null;
+    centerGeoidHeightRef.current = null;
     setVerticalSpaceIndicator(null);
     overrideInteractionMode?.(
       interactionModeRef.current === "spatialId"
@@ -128,30 +135,79 @@ export default ({
   }, [overrideInteractionMode, engineRef]);
 
   const handleMouseUp = useCallback(
-    (props: MouseEventProps) => {
+    async (props: MouseEventProps) => {
       if (state === "idle") return;
       if (tempSwitchToMoveMode.current) return;
 
       // handle coordinate picking
       if (state === "coordinate") {
-        if (!coordinateSelector || props.lat === undefined || props.lng === undefined) return;
+        if (
+          !coordinateSelector ||
+          props.lat === undefined ||
+          props.lng === undefined ||
+          props.lat > SPATIALID_LATITUDE_RANGE.max ||
+          props.lat < SPATIALID_LATITUDE_RANGE.min
+        )
+          return;
 
-        setState("floor");
-        setBaseCoordinate([props.lng, props.lat, terrainEnabled ? props.height ?? 0 : 0]);
-        setBasePosition(
-          engineRef.current?.toXYZ(props.lng, props.lat, props.height ?? 0, {
-            useGlobeEllipsoid: !terrainEnabled,
-          }) ?? null,
+        setState("fetchingGeoid");
+
+        const { id, wsen, space } = createSpatialIdSpace(
+          props.lng,
+          props.lat,
+          0,
+          pickOptions.zoom,
+          0,
         );
 
-        lastCoordinateSelector.current = coordinateSelector;
-        setCoordinateSelector(null);
+        requestAnimationFrame(() => {
+          engineRef.current?.setCursor("wait");
+        });
+
+        const [geoidHeight, centerGeoidHeight] = await Promise.all([
+          geoidRef.current?.getGeoidHeight(props.lng, props.lat),
+          geoidRef.current?.getGeoidHeight(space.center.lng, space.center.lat),
+        ]);
+
+        setTimeout(() => {
+          engineRef.current?.setCursor("crosshair");
+        }, 100);
+
+        if (geoidHeight === undefined && centerGeoidHeight === undefined) {
+          setState("coordinate");
+          return;
+        }
+
+        // In most case the geoidHeight difference between click point and center is small
+        // The API is not that stable, it has NaN for some points for unknown reason
+        // Therefore we try use one another if one is NaN
+        const appliedGeoidHeight = geoidHeight ?? centerGeoidHeight ?? 0;
+        const appliedCenterGeoidHeight = centerGeoidHeight ?? geoidHeight ?? 0;
+        centerGeoidHeightRef.current = appliedCenterGeoidHeight;
+
+        setVerticalSpaceIndicator({
+          id,
+          wsen,
+          height: verticalLimits.top + appliedCenterGeoidHeight,
+          extrudedHeight: verticalLimits.bottom + appliedCenterGeoidHeight,
+          color: pickOptions.verticalSpaceIndicatorColor,
+          outlineColor: pickOptions.verticalSpaceIndicatorOutlineColor,
+        });
+
+        setBaseCoordinateGeoid([
+          props.lng,
+          props.lat,
+          (terrainEnabled ? props.height ?? 0 : 0) - appliedGeoidHeight,
+        ]);
+
+        setBasePosition(engineRef.current?.toXYZ(props.lng, props.lat, props.height ?? 0) ?? null);
 
         const initialSpaceSelectorSpace = createSpatialIdSpace(
           props.lng,
           props.lat,
-          terrainEnabled ? props.height ?? 0 : 0,
+          (terrainEnabled ? props.height ?? 0 : 0) - appliedGeoidHeight,
           pickOptions.zoom,
+          appliedCenterGeoidHeight,
         );
         setSpaceSelector({
           ...initialSpaceSelectorSpace,
@@ -159,21 +215,11 @@ export default ({
           outlineColor: pickOptions.outlineColor,
         });
 
-        const { id, wsen } = createSpatialIdSpace(
-          props.lng,
-          props.lat,
-          terrainEnabled ? props.height ?? 0 : 0,
-          pickOptions.zoom,
-        );
-        setVerticalSpaceIndicator({
-          id,
-          wsen,
-          height: verticalLimits.top,
-          extrudedHeight: verticalLimits.bottom,
-          color: pickOptions.verticalSpaceIndicatorColor,
-          outlineColor: pickOptions.verticalSpaceIndicatorOutlineColor,
-        });
+        lastCoordinateSelector.current = coordinateSelector;
+        setCoordinateSelector(null);
+
         engineRef.current?.requestRender();
+        setState("floor");
       } else if (state === "floor") {
         if (!spaceSelector) return;
 
@@ -198,6 +244,7 @@ export default ({
       state,
       terrainEnabled,
       engineRef,
+      geoidRef,
       spaceSelector,
       pickOptions,
       verticalLimits,
@@ -212,19 +259,22 @@ export default ({
       if (tempSwitchToMoveMode.current) return;
 
       if (state === "coordinate") {
-        if (props.lat === undefined || props.lng === undefined) return;
+        if (
+          props.lat === undefined ||
+          props.lng === undefined ||
+          props.lat > SPATIALID_LATITUDE_RANGE.max ||
+          props.lat < SPATIALID_LATITUDE_RANGE.min
+        )
+          return;
 
-        const newSpace = createSpatialIdSpace(
-          props.lng,
-          props.lat,
-          terrainEnabled ? props.height ?? 0 : 0,
-          pickOptions.zoom,
-        );
+        // Coordinate Selector is clamp to ground, we can ignore height
+        // The space id is used to identify the selector only
+        const newSpace = createSpatialIdSpace(props.lng, props.lat, 0, pickOptions.zoom, 0);
 
-        if (newSpace.space.id === coordinateSelector?.spaceId) return;
+        if (newSpace.space.id === coordinateSelector?.uid) return;
         setCoordinateSelector({
           id: uuid(),
-          spaceId: newSpace.space.id,
+          uid: newSpace.space.id,
           wsen: newSpace.wsen,
           color: pickOptions.selectorColor,
         });
@@ -233,7 +283,7 @@ export default ({
           props.x === undefined ||
           props.y === undefined ||
           basePosition === null ||
-          baseCoordinate === null
+          baseCoordinateGeoid === null
         )
           return;
 
@@ -241,16 +291,17 @@ export default ({
           engineRef.current?.getExtrudedHeight(basePosition, [props.x, props.y], true) ?? 0;
 
         if (
-          baseCoordinate[2] + offset > verticalLimits.top ||
-          baseCoordinate[2] + offset < verticalLimits.bottom
+          baseCoordinateGeoid[2] + offset > verticalLimits.top ||
+          baseCoordinateGeoid[2] + offset < verticalLimits.bottom
         )
           return;
 
         const newSpace = createSpatialIdSpace(
-          baseCoordinate[0],
-          baseCoordinate[1],
-          baseCoordinate[2] + offset,
+          baseCoordinateGeoid[0],
+          baseCoordinateGeoid[1],
+          baseCoordinateGeoid[2] + offset,
           pickOptions.zoom,
+          centerGeoidHeightRef.current ?? 0,
         );
 
         if (newSpace.space.id === spaceSelector?.space.id) return;
@@ -266,12 +317,11 @@ export default ({
       state,
       spaceSelector,
       basePosition,
-      baseCoordinate,
+      baseCoordinateGeoid,
       engineRef,
-      terrainEnabled,
       pickOptions,
       verticalLimits,
-      coordinateSelector?.spaceId,
+      coordinateSelector?.uid,
     ],
   );
 
@@ -282,10 +332,11 @@ export default ({
     } else if (state === "floor") {
       setSpaceSelector(null);
       setBasePosition(null);
-      setBaseCoordinate(null);
+      setBaseCoordinateGeoid(null);
       setVerticalSpaceIndicator(null);
       setCoordinateSelector(lastCoordinateSelector.current);
       setState("coordinate");
+      centerGeoidHeightRef.current = null;
     }
     engineRef.current?.requestRender();
   }, [state, pickOptions, engineRef, finishPicking]);

package/src/Map/SpatialId/index.tsx

@@ -6,6 +6,7 @@ import {
   VerticalSpaceIndicator,
 } from "../../engines/Cesium/SpatialId";
 import { InteractionModeType } from "../../Visualizer";
+import { GeoidRef } from "../Geoid/types";
 import { EngineRef } from "../types";
 
 import useHooks from "./hooks";
@@ -13,6 +14,7 @@ import { SpatialIdRef } from "./types";
 
 type SpatialIdProps = {
   engineRef: RefObject<EngineRef>;
+  geoidRef: RefObject<GeoidRef>;
   terrainEnabled?: boolean;
   interactionMode?: InteractionModeType;
   overrideInteractionMode?: (mode: InteractionModeType) => void;
@@ -20,7 +22,7 @@ type SpatialIdProps = {
 };
 
 const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
-  { engineRef, terrainEnabled, interactionMode, overrideInteractionMode, onMount },
+  { engineRef, geoidRef, terrainEnabled, interactionMode, overrideInteractionMode, onMount },
   ref,
 ) => {
   const {
@@ -32,6 +34,7 @@ const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
   } = useHooks({
     ref,
     engineRef,
+    geoidRef,
     terrainEnabled,
     interactionMode,
     overrideInteractionMode,

package/src/Map/SpatialId/types.ts

@@ -21,7 +21,7 @@ export type VerticalSpaceIndicatorType = {
 
 export type CoordinateSelectorType = {
   id: string;
-  spaceId: string;
+  uid: string;
   wsen: [number, number, number, number];
   color: string;
 };
@@ -47,7 +47,7 @@ export type SpatialIdRef = {
   onSpacePick: (cb: (space: SpatialIdSpaceData) => void) => void;
 };
 
-export type SpatialIdSpacePickingState = "idle" | "coordinate" | "floor";
+export type SpatialIdSpacePickingState = "idle" | "coordinate" | "fetchingGeoid" | "floor";
 
 export type SpatialIdSpaceData = {
   id: string;

package/src/Map/SpatialId/utils.ts

@@ -22,6 +22,7 @@ export const createSpatialIdSpace = (
   lat: number,
   alt: number,
   zoom: number,
+  geoidHeight: number,
 ): SpatialIdSpaceType => {
   const space = new Space({ lat, lng, alt }, zoom);
   const { wsen, height, extrudedHeight } = getRectangeParamsFromSpace(space);
@@ -30,8 +31,8 @@ export const createSpatialIdSpace = (
     id: uuid(),
     space,
     wsen,
-    height,
-    extrudedHeight,
+    height: height + geoidHeight,
+    extrudedHeight: extrudedHeight + geoidHeight,
   };
 };
 

package/src/Map/hooks.ts

@@ -2,6 +2,7 @@ import { useImperativeHandle, useRef, type Ref, useState, useCallback, useEffect
 
 import { SelectedFeatureInfo } from "../mantle";
 
+import { GeoidRef } from "./Geoid/types";
 import { type MapRef, mapRef } from "./ref";
 import { SpatialIdRef } from "./SpatialId/types";
 import type {
@@ -51,6 +52,7 @@ export default function ({
   const layersRef = useRef<LayersRef>(null);
   const sketchRef = useRef<SketchRef>(null);
   const spatialIdRef = useRef<SpatialIdRef>(null);
+  const geoidRef = useRef<GeoidRef>(null);
   const requestingRenderMode = useRef<RequestingRenderMode>(NO_REQUEST_RENDER);
 
   useImperativeHandle(
@@ -61,6 +63,7 @@ export default function ({
         layersRef,
         sketchRef,
         spatialIdRef,
+        geoidRef,
         timelineManagerRef,
       }),
     [timelineManagerRef],
@@ -151,6 +154,7 @@ export default function ({
     layersRef,
     sketchRef,
     spatialIdRef,
+    geoidRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,

package/src/Map/index.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useMemo, type Ref } from "react";
 
 import { INTERACTION_MODES } from "../Visualizer/interactionMode";
 
+import Geoid from "./Geoid";
 import useHooks, { MapRef } from "./hooks";
 import Layers, { type Props as LayersProps } from "./Layers";
 import Sketch, { SketchProps } from "./Sketch";
@@ -82,6 +83,7 @@ function MapFn(
     layersRef,
     sketchRef,
     spatialIdRef,
+    geoidRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
@@ -167,11 +169,13 @@ function MapFn(
       <SpatialId
         ref={spatialIdRef}
         engineRef={engineRef}
+        geoidRef={geoidRef}
         interactionMode={interactionMode}
         terrainEnabled={!!props.property?.terrain?.enabled}
         overrideInteractionMode={overrideInteractionMode}
         onMount={handleSpatialIdMount}
       />
+      <Geoid ref={geoidRef} geoidServer={props.property?.geoid?.server} />
     </Engine>
   ) : null;
 }

package/src/Map/ref.ts

@@ -1,5 +1,6 @@
 import type { RefObject } from "react";
 
+import { GeoidRef } from "./Geoid/types";
 import { SpatialIdRef } from "./SpatialId/types";
 import type { EngineRef, LayersRef, SketchRef } from "./types";
 import { TimelineManagerRef } from "./useTimelineManager";
@@ -10,6 +11,7 @@ export type MapRef = {
   layers: WrappedRef<LayersRef>;
   sketch: WrappedRef<SketchRef>;
   spatialId?: WrappedRef<SpatialIdRef>;
+  geoid: WrappedRef<GeoidRef>;
   timeline?: TimelineManagerRef;
 };
 
@@ -141,17 +143,23 @@ const spatialIdRefKeys: FunctionKeys<SpatialIdRef> = {
   onSpacePick: 1,
 };
 
+const geoidRefKeys: FunctionKeys<GeoidRef> = {
+  getGeoidHeight: 1,
+};
+
 export function mapRef({
   engineRef,
   layersRef,
   sketchRef,
   spatialIdRef,
+  geoidRef,
   timelineManagerRef,
 }: {
   engineRef: RefObject<EngineRef>;
   layersRef: RefObject<LayersRef>;
   sketchRef: RefObject<SketchRef>;
   spatialIdRef: RefObject<SpatialIdRef>;
+  geoidRef: RefObject<GeoidRef>;
   timelineManagerRef?: TimelineManagerRef;
 }): MapRef {
   return {
@@ -159,6 +167,7 @@ export function mapRef({
     layers: wrapRef(layersRef, layersRefKeys),
     sketch: wrapRef(sketchRef, sketchRefKeys),
     spatialId: wrapRef(spatialIdRef, spatialIdRefKeys),
+    geoid: wrapRef(geoidRef, geoidRefKeys),
     timeline: timelineManagerRef,
   };
 }

package/src/Map/types/viewerProperty.ts

@@ -37,6 +37,7 @@ export type SceneMode = "3d" | "2d" | "columbus";
 
 export type ViewerProperty = {
   globe?: GlobeProperty;
+  geoid?: GeoidProperty;
   terrain?: TerrainProperty;
   scene?: SceneProperty;
   tiles?: TileProperty[];
@@ -56,6 +57,13 @@ export type GlobeProperty = {
   depthTestAgainstTerrain?: boolean;
 };
 
+export type GeoidProperty = {
+  server: {
+    url: string;
+    geoidProperty: string;
+  };
+};
+
 export type GlobeAtmosphereProperty = {
   enabled?: boolean;
   lightIntensity?: number;

package/src/engines/Cesium/Feature/Tileset/hooks.ts

@@ -92,15 +92,14 @@ const makeFeatureId = (
   }
   const featureId = getBuiltinFeatureId(tileFeature);
   return generateIDWithMD5(
-    `${coordinates.x}-${coordinates.y}-${coordinates.z}-${featureId}-${
-      !(tileFeature instanceof Model)
-        ? JSON.stringify(
-            // Read only root properties.
-            Object.entries(convertCesium3DTileFeatureProperties(tileFeature))
-              .filter((_k, v) => typeof v === "string" || typeof v === "number")
-              .map(([k, v]) => `${k}${v}`),
-          )
-        : ""
+    `${coordinates.x}-${coordinates.y}-${coordinates.z}-${featureId}-${!(tileFeature instanceof Model)
+      ? JSON.stringify(
+        // Read only root properties.
+        Object.entries(convertCesium3DTileFeatureProperties(tileFeature))
+          .filter((_k, v) => typeof v === "string" || typeof v === "number")
+          .map(([k, v]) => `${k}${v}`),
+      )
+      : ""
     }`,
   );
 };
@@ -732,8 +731,15 @@ export const useHooks = ({
 
     const loadTileset = async () => {
       try {
-        const tileset = await createGooglePhotorealistic3DTileset(googleMapApiKey);
-        return tileset.resource;
+        if (googleMapApiKey) {
+          const tileset = await createGooglePhotorealistic3DTileset(googleMapApiKey);
+          return tileset.resource;
+        } else {
+          const resource = IonResource.fromAssetId(2275207, {
+            accessToken: meta?.cesiumIonAccessToken as string | undefined,
+          });
+          return resource;
+        }
       } catch (error) {
         console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
         throw error;
@@ -741,13 +747,13 @@ export const useHooks = ({
     };
 
     return loadTileset();
-  }, [type, isVisible, googleMapApiKey]);
+  }, [type, isVisible, googleMapApiKey, meta?.cesiumIonAccessToken]);
 
   const tilesetUrl = useMemo(() => {
     return type === "osm-buildings" && isVisible
       ? IonResource.fromAssetId(96188, {
-          accessToken: meta?.cesiumIonAccessToken as string | undefined,
-        }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
+        accessToken: meta?.cesiumIonAccessToken as string | undefined,
+      }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
       : googleMapPhotorealisticResource && isVisible
         ? googleMapPhotorealisticResource
         : type === "3dtiles" && isVisible
@@ -772,7 +778,7 @@ export const useHooks = ({
       property?.imageBasedLightIntensity ?? viewerProperty?.scene?.imageBasedLighting?.intensity;
     const sphericalHarmonicCoefficients = arrayToCartecian3(
       property?.sphericalHarmonicCoefficients ??
-        viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
+      viewerProperty?.scene?.imageBasedLighting?.sphericalHarmonicCoefficients,
       imageBasedLightIntensity,
     );