@reearth/core 0.0.7-alpha.15 → 0.0.7-alpha.17

package/dist/index.d.ts

@@ -169,7 +169,6 @@ export declare type Cesium3DTilesAppearance = {
     selectedFeatureColor?: string;
     disableIndexingFeature?: boolean;
     tileset?: string;
-    apiKey?: string;
     experimental_clipping?: EXPERIMENTAL_clipping;
     pointSize?: number;
     meta?: unknown;
@@ -356,6 +355,7 @@ export declare type CoreVisualizerProps = {
     ready?: boolean;
     hiddenLayers?: string[];
     zoomedLayerId?: string;
+    displayCredits?: boolean;
     onCameraChange?: (camera: Camera) => void;
     onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
     onLayerSelect?: (layerId: string | undefined, layer: (() => Promise<ComputedLayer | undefined>) | undefined, feature: ComputedFeature | undefined, reason: LayerSelectionReason | undefined) => void;
@@ -367,6 +367,11 @@ export declare type CoreVisualizerProps = {
     onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
     onInteractionModeChange?: (mode: InteractionModeType) => void;
     onAPIReady?: () => void;
+    onCreditsUpdate?: (credits: Credit[]) => void;
+};
+
+export declare type Credit = {
+    html?: string;
 };
 
 export declare type CursorType = "auto" | "grab" | "crosshair";
@@ -383,6 +388,9 @@ export declare type Data = {
     updateInterval?: number;
     parameters?: Record<string, any>;
     idProperty?: string;
+    serviceTokens?: {
+        googleMapApiKey?: string;
+    };
     time?: {
         property?: string;
         interval?: number;
@@ -496,6 +504,7 @@ export declare type EngineProps = {
     isLayerDragging?: boolean;
     shouldRender?: boolean;
     meta?: Record<string, unknown>;
+    displayCredits?: boolean;
     layersRef?: RefObject<LayersRef>;
     requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
     timelineManagerRef?: TimelineManagerRef;
@@ -510,6 +519,7 @@ export declare type EngineProps = {
     onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
     onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
     onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+    onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export declare type EngineRef = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.15",
+  "version": "0.0.7-alpha.17",
   "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/types/index.ts

@@ -235,6 +235,7 @@ export type EngineProps = {
   isLayerDragging?: boolean;
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
+  displayCredits?: boolean;
   layersRef?: RefObject<LayersRef>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   timelineManagerRef?: TimelineManagerRef;
@@ -258,6 +259,7 @@ export type EngineProps = {
   onLayerSelectWithRectStart?: (e: LayerSelectWithRectStart) => void;
   onLayerSelectWithRectMove?: (e: LayerSelectWithRectMove) => void;
   onLayerSelectWithRectEnd?: (e: LayerSelectWithRectEnd) => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export type LayerEditEvent = {
@@ -381,3 +383,7 @@ export type SketchRef = {
   deleteFeature: (layerId: string, featureId: string) => void;
   onEditFeatureChange: (cb: SketchEditFeatureChangeCb) => void;
 };
+
+export type Credit = {
+  html?: string;
+};

package/src/Visualizer/index.tsx

@@ -12,6 +12,7 @@ import {
   type LatLng,
   type Cluster,
   type ComputedLayer,
+  type Credit,
 } from "../Map";
 import { SketchFeature, SketchType } from "../Map/Sketch/types";
 
@@ -46,6 +47,7 @@ export type CoreVisualizerProps = {
   ready?: boolean;
   hiddenLayers?: string[];
   zoomedLayerId?: string;
+  displayCredits?: boolean;
   onCameraChange?: (camera: Camera) => void;
   onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
   onLayerSelect?: (
@@ -62,6 +64,7 @@ export type CoreVisualizerProps = {
   onSketchFeatureDelete?: (layerId: string, featureId: string) => void;
   onInteractionModeChange?: (mode: InteractionModeType) => void;
   onAPIReady?: () => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 };
 
 export const CoreVisualizer = memo(
@@ -82,6 +85,7 @@ export const CoreVisualizer = memo(
         interactionMode,
         shouldRender,
         meta,
+        displayCredits = true,
         style,
         zoomedLayerId,
         children,
@@ -96,6 +100,7 @@ export const CoreVisualizer = memo(
         onSketchFeatureUpdate,
         onSketchFeatureDelete,
         onAPIReady,
+        onCreditsUpdate,
       },
       ref: Ref<MapRef | null>,
     ) => {
@@ -160,6 +165,7 @@ export const CoreVisualizer = memo(
                 isLayerDragging={isLayerDragging}
                 isLayerDraggable={isEditable}
                 meta={meta}
+                displayCredits={displayCredits}
                 style={style}
                 featureFlags={featureFlags}
                 shouldRender={shouldRender}
@@ -191,6 +197,7 @@ export const CoreVisualizer = memo(
                 onLayerSelectWithRectMove={handleLayerSelectWithRectMove}
                 onLayerSelectWithRectEnd={handleLayerSelectWithRectEnd}
                 onAPIReady={onAPIReady}
+                onCreditsUpdate={onCreditsUpdate}
               />
               <coreContext.Provider value={coreContextValue}>{children}</coreContext.Provider>
             </div>

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

@@ -15,13 +15,11 @@ import {
   Cesium3DTileFeature,
   Model,
   Cesium3DTilePointFeature,
-  GoogleMaps as CesiumGoogleMaps,
-  Resource,
-  defaultValue,
   ImageBasedLighting,
   Cesium3DTileContent,
   Color,
   Viewer,
+  createGooglePhotorealistic3DTileset,
 } from "cesium";
 import { pick } from "lodash-es";
 import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -57,7 +55,6 @@ import {
 } from "../utils";
 
 import { TilesetFeatureIndex } from "./TilesetFeatureIndex";
-import { GoogleMaps } from "./types";
 import { useClippingBox } from "./useClippingBox";
 import { useDrawClipping } from "./useDrawClipping";
 
@@ -77,6 +74,7 @@ const useData = (layer: ComputedLayer | undefined) => {
           ? data.layers.join(",")
           : data?.layers
         : undefined,
+      googleMapApiKey: data?.serviceTokens?.googleMapApiKey,
     };
   }, [layer]);
 };
@@ -460,7 +458,6 @@ export const useHooks = ({
     edgeColor,
     edgeWidth,
     experimental_clipping,
-    apiKey,
     selectedFeatureColor,
     disableIndexingFeature,
   } = property ?? {};
@@ -481,7 +478,7 @@ export const useHooks = ({
   } = useClippingBox({ clipping: experimental_clipping, boxId });
 
   const [style, setStyle] = useState<Cesium3DTileStyle>();
-  const { url, type, idProperty } = useData(layer);
+  const { url, type, idProperty, googleMapApiKey } = useData(layer);
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
@@ -708,31 +705,33 @@ export const useHooks = ({
     })();
   }, [styleUrl]);
 
-  const googleMapResource = useMemo(() => {
-    if (type !== "google-photorealistic" || !isVisible) return;
-    // Ref: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Scene/createGooglePhotorealistic3DTileset.js#L30
-    const googleMaps = CesiumGoogleMaps as GoogleMaps;
-    // Default key: https://github.com/CesiumGS/cesium/blob/b208135a095073386e5f04a59956ee11a03aa847/packages/engine/Source/Core/GoogleMaps.js#L6C36-L6C36
-    const key = defaultValue(apiKey, googleMaps.defaultApiKey);
-    const credit = googleMaps.getDefaultApiKeyCredit(key);
-    return new Resource({
-      url: `${googleMaps.mapTilesApiEndpoint}3dtiles/root.json`,
-      queryParameters: { key },
-      credits: credit ? [credit] : undefined,
-    } as Resource.ConstructorOptions);
-  }, [apiKey, type, isVisible]);
+  const googleMapPhotorealisticResource = useMemo(() => {
+    if (type !== "google-photorealistic" || !isVisible) return null;
+
+    const loadTileset = async () => {
+      try {
+        const tileset = await createGooglePhotorealistic3DTileset(googleMapApiKey);
+        return tileset.resource;
+      } catch (error) {
+        console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
+        throw error;
+      }
+    };
+
+    return loadTileset();
+  }, [type, isVisible, googleMapApiKey]);
 
   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
-      : googleMapResource
-        ? googleMapResource
+      : googleMapPhotorealisticResource && isVisible
+        ? googleMapPhotorealisticResource
         : type === "3dtiles" && isVisible
           ? url ?? tileset
           : null;
-  }, [isVisible, tileset, url, type, meta, googleMapResource]);
+  }, [type, isVisible, meta?.cesiumIonAccessToken, googleMapPhotorealisticResource, url, tileset]);
 
   const imageBasedLighting = useMemo(() => {
     if (

package/src/engines/Cesium/core/Globe.tsx

@@ -5,7 +5,7 @@ import {
   IonResource,
   TerrainProvider,
 } from "cesium";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { Globe as CesiumGlobe } from "resium";
 
 import type { ViewerProperty, TerrainProperty } from "../..";
@@ -15,9 +15,14 @@ import { toColor } from "../common";
 export type Props = {
   property?: ViewerProperty;
   cesiumIonAccessToken?: string;
+  onTerrainProviderChange?: () => void;
 };
 
-export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.Element | null {
+export default function Globe({
+  property,
+  cesiumIonAccessToken,
+  onTerrainProviderChange,
+}: Props): JSX.Element | null {
   const terrainProperty = useMemo(
     (): TerrainProperty => ({
       ...property?.terrain,
@@ -51,6 +56,10 @@ export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.El
     [property?.globe?.baseColor],
   );
 
+  useEffect(() => {
+    onTerrainProviderChange?.();
+  }, [terrainProvider, onTerrainProviderChange]);
+
   return (
     <CesiumGlobe
       baseColor={baseColor}

package/src/engines/Cesium/core/Imagery.tsx

@@ -5,7 +5,7 @@ import {
   TextureMinificationFilter,
 } from "cesium";
 import { isEqual } from "lodash-es";
-import { useCallback, useMemo, useRef, useLayoutEffect, useState } from "react";
+import { useCallback, useMemo, useRef, useLayoutEffect, useState, useEffect } from "react";
 import { ImageryLayer } from "resium";
 
 import { tiles as tilePresets } from "./presets";
@@ -31,9 +31,10 @@ export type Tile = {
 export type Props = {
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
+  onTilesChange?: () => void;
 };
 
-export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
+export default function ImageryLayers({ tiles, cesiumIonAccessToken, onTilesChange }: Props) {
   const { providers, updated } = useImageryProviders({
     tiles,
     cesiumIonAccessToken,
@@ -47,6 +48,10 @@ export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
     if (updated) setCounter(c => c + 1);
   }, [providers, updated]);
 
+  useEffect(() => {
+    onTilesChange?.();
+  }, [tiles, counter, onTilesChange]);
+
   return (
     <>
       {tiles

package/src/engines/Cesium/core/presets.ts

@@ -24,17 +24,6 @@ export const tiles = {
     IonImageryProvider.fromAssetId(IonWorldImageryStyle.ROAD, {
       accessToken: cesiumIonAccessToken,
     }).catch(console.error),
-  stamen_watercolor: () =>
-    new OpenStreetMapImageryProvider({
-      url: "https://stamen-tiles.a.ssl.fastly.net/watercolor/",
-      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
-      fileExtension: "jpg",
-    }),
-  stamen_toner: () =>
-    new OpenStreetMapImageryProvider({
-      url: "https://stamen-tiles.a.ssl.fastly.net/toner/",
-      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
-    }),
   open_street_map: () =>
     new OpenStreetMapImageryProvider({
       url: "https://a.tile.openstreetmap.org/",

package/src/engines/Cesium/hooks.ts

@@ -12,6 +12,8 @@ import {
   GroundPrimitive,
   ShadowMap,
   ImageryLayer,
+  CreditDisplay,
+  Credit as CesiumCredit,
 } from "cesium";
 import { MutableRefObject, RefObject, useCallback, useEffect, useMemo, useRef } from "react";
 import type { CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";
@@ -27,6 +29,7 @@ import type {
 import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
 import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
 import {
+  Credit,
   LayerLoadEvent,
   LayerSelectWithRectEnd,
   LayerSelectWithRectMove,
@@ -89,6 +92,7 @@ export default ({
   onLayerLoad,
   onCameraChange,
   onMount,
+  onCreditsUpdate,
 }: {
   ref: React.ForwardedRef<EngineRef>;
   property?: ViewerProperty;
@@ -128,6 +132,7 @@ export default ({
   onLayerLoad?: (e: LayerLoadEvent) => void;
   onCameraChange?: (camera: Camera) => void;
   onMount?: () => void;
+  onCreditsUpdate?: (credits: Credit[]) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
 
@@ -728,6 +733,49 @@ export default ({
     unmountCamera?.();
   }, [unmountCamera]);
 
+  const updateCredits = useCallback(() => {
+    if (!onCreditsUpdate) return;
+    // currently we don't have a proper way to get the credits update event
+    // wait for 3 seconds to get latest credits
+    // some internal property is been used here.
+    setTimeout(() => {
+      const creditDisplay = cesium.current?.cesiumElement?.creditDisplay as
+        | (CreditDisplay & {
+            _currentFrameCredits: {
+              lightboxCredits: { _array: { credit?: CesiumCredit }[] };
+              screenCredits: { _array: { credit?: CesiumCredit }[] };
+            };
+            _currentCesiumCredit: CesiumCredit;
+          })
+        | undefined;
+
+      if (!creditDisplay) return;
+
+      const { lightboxCredits, screenCredits } = creditDisplay?._currentFrameCredits || {};
+      const cesiumCredits = creditDisplay._currentCesiumCredit;
+
+      const credits: Credit[] = [
+        ...(cesiumCredits?.html ? [{ html: cesiumCredits.html }] : []),
+        ...Array.from(lightboxCredits?._array ?? []).map(c => ({
+          html: c?.credit?.html,
+        })),
+        ...Array.from(screenCredits?._array ?? []).map(c => ({
+          html: c?.credit?.html,
+        })),
+      ];
+
+      onCreditsUpdate(credits);
+    }, 3000);
+  }, [onCreditsUpdate]);
+
+  const handleTilesChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
+  const handleTerrainProviderChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
   return {
     cesium,
     cesiumIonAccessToken,
@@ -747,6 +795,8 @@ export default ({
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   };
 };
 

package/src/engines/Cesium/index.tsx

@@ -47,6 +47,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     shouldRender,
     layerSelectionReason,
     meta,
+    displayCredits,
     layersRef,
     featureFlags,
     requestingRenderMode,
@@ -63,6 +64,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onMount,
     onLayerVisibility,
     onLayerLoad,
+    onCreditsUpdate,
   },
   ref,
 ) => {
@@ -85,6 +87,8 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   } = useHooks({
     ref,
     property,
@@ -112,6 +116,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     onLayerLoad,
     onCameraChange,
     onMount,
+    onCreditsUpdate,
   });
 
   return (
@@ -133,7 +138,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       navigationHelpButton={false}
       projectionPicker={false}
       sceneModePicker={false}
-      creditContainer={creditContainer}
+      creditContainer={displayCredits ? undefined : creditContainer}
       style={{
         width: small ? "300px" : "auto",
         height: small ? "300px" : "100%",
@@ -158,7 +163,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       onWheel={mouseEventHandles.wheel}>
       <Event onMount={handleMount} onUnmount={handleUnmount} />
       <Clock timelineManagerRef={timelineManagerRef} />
-      <ImageryLayers tiles={property?.tiles} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <ImageryLayers
+        tiles={property?.tiles}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTilesChange={handleTilesChange}
+      />
       <LabelImageryLayers tileLabels={property?.tileLabels} />
       <Indicator property={property} timelineManagerRef={timelineManagerRef} />
       <ScreenSpaceEventHandler useDefault>
@@ -252,7 +261,11 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
         saturationShift={property?.sky?.skyAtmosphere?.saturationShift}
         brightnessShift={property?.sky?.skyAtmosphere?.brightnessShift}
       />
-      <Globe property={property} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <Globe
+        property={property}
+        cesiumIonAccessToken={cesiumIonAccessToken}
+        onTerrainProviderChange={handleTerrainProviderChange}
+      />
       <featureContext.Provider value={context}>{ready ? children : null}</featureContext.Provider>
       <AmbientOcclusion
         {...AMBIENT_OCCLUSION_QUALITY[property?.render?.ambientOcclusion?.quality || "low"]}

package/src/mantle/types/appearance.ts

@@ -200,7 +200,6 @@ export type Cesium3DTilesAppearance = {
   selectedFeatureColor?: string; // This doesn't support expression
   disableIndexingFeature?: boolean;
   tileset?: string;
-  apiKey?: string;
   experimental_clipping?: EXPERIMENTAL_clipping;
   pointSize?: number;
   meta?: unknown;

package/src/mantle/types/index.ts

@@ -76,6 +76,9 @@ export type Data = {
   updateInterval?: number; // milliseconds
   parameters?: Record<string, any>;
   idProperty?: string;
+  serviceTokens?: {
+    googleMapApiKey?: string;
+  };
   time?: {
     property?: string;
     interval?: number; // milliseconds