@reearth/core 0.0.7-alpha.4 → 0.0.7-alpha.40

package/src/engines/Cesium/common.ts

@@ -35,11 +35,14 @@ import {
   Plane,
   CameraEventType,
   KeyboardEventModifier,
+  CreditDisplay,
+  Credit as CesiumCredit,
 } from "cesium";
-import { useCallback, MutableRefObject } from "react";
+import { MutableRefObject, useMemo } from "react";
 
 import type { Camera, Clock } from "..";
 import { ClassificationType } from "../../mantle";
+import { Credits } from "../../Map";
 import type {
   CameraOptions,
   FlyToDestination,
@@ -48,16 +51,16 @@ import type {
   OverideKeyboardEventModifier,
   ScreenSpaceCameraControllerOptions,
 } from "../../types";
-import { tweenInterval, useCanvas, useImage, LatLngHeight } from "../../utils";
+import { tweenInterval, useImage, LatLngHeight } from "../../utils";
 
 import { DEFAULT_SCREEN_SPACE_CAMERA_ASSIGNMENTS } from "./constants";
 
 export const layerIdField = `__reearth_layer_id`;
 
 const defaultImageSize = 50;
+const emptyCredites: Credits = { engine: {}, lightbox: [], screen: [] };
 
-export const drawIcon = (
-  c: HTMLCanvasElement,
+const drawIcon = (
   image: HTMLImageElement | undefined,
   w: number,
   h: number,
@@ -68,13 +71,14 @@ export const drawIcon = (
   shadowOffsetX = 0,
   shadowOffsetY = 0,
 ) => {
+  const c = document.createElement("canvas");
   const ctx = c.getContext("2d");
   if (!image || !ctx) return;
 
   ctx.save();
 
-  c.width = w + shadowBlur;
-  c.height = h + shadowBlur;
+  c.width = w + shadowBlur * 2;
+  c.height = h + shadowBlur * 2;
   ctx.shadowBlur = shadowBlur;
   ctx.shadowOffsetX = shadowOffsetX;
   ctx.shadowOffsetY = shadowOffsetY;
@@ -85,14 +89,14 @@ export const drawIcon = (
   if (crop === "circle") {
     ctx.fillStyle = "black";
     ctx.globalCompositeOperation = "destination-in";
-    ctx.arc(w / 2, h / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
+    ctx.arc(c.width / 2, c.height / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
     ctx.fill();
 
     if (shadow) {
       ctx.shadowColor = shadowColor;
       ctx.globalCompositeOperation = "destination-over";
       ctx.fillStyle = "black";
-      ctx.arc(w / 2, h / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
+      ctx.arc(c.width / 2, c.height / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
       ctx.fill();
     }
   } else if (shadow) {
@@ -104,6 +108,7 @@ export const drawIcon = (
   }
 
   ctx.restore();
+  return c.toDataURL();
 };
 
 export const useIcon = ({
@@ -138,13 +143,11 @@ export const useIcon = ({
       ? Math.floor(img.height * imageSize)
       : Math.floor((w / img.width) * img.height);
 
-  const draw = useCallback(
-    (can: HTMLCanvasElement) =>
-      drawIcon(can, img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
+  const canvas = useMemo(
+    () => drawIcon(img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
     [crop, h, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, w],
   );
-  const canvas = useCanvas(draw);
-  return [canvas, w, h];
+  return [canvas ?? "", w, h];
 };
 
 export const ho = (o: "left" | "center" | "right" | undefined): HorizontalOrigin | undefined =>
@@ -545,7 +548,7 @@ export const colorBlendMode = (colorBlendMode?: "highlight" | "replace" | "mix"
   )[colorBlendMode || ""];
 
 export const colorBlendModeFor3DTile = (
-  colorBlendMode?: "highlight" | "replace" | "mix" | "default",
+  colorBlendMode: "highlight" | "replace" | "mix" = "highlight",
 ) =>
   (
     ({
@@ -553,7 +556,7 @@ export const colorBlendModeFor3DTile = (
       replace: Cesium3DTileColorBlendMode.REPLACE,
       mix: Cesium3DTileColorBlendMode.MIX,
     }) as { [key in string]?: Cesium3DTileColorBlendMode }
-  )[colorBlendMode || ""];
+  )[colorBlendMode];
 
 export const heightReference = (
   heightReference?: "none" | "clamp" | "relative",
@@ -852,6 +855,7 @@ export function getExtrudedHeight(
   scene: Scene,
   position: Cartesian3,
   windowPosition: Cartesian2,
+  allowNegative = false,
 ): number | undefined {
   const cartesianScratch = new Cartesian3();
   const normalScratch = new Cartesian3();
@@ -893,9 +897,41 @@ export function getExtrudedHeight(
       scene.globe.ellipsoid,
       cartographicScratch,
     ).height;
-    return Math.max(0, toHeight - fromHeight);
+    return allowNegative ? toHeight - fromHeight : Math.max(0, toHeight - fromHeight);
   } catch (error) {
     console.error(error);
   }
   return;
 }
+
+export function getCredits(viewer: Viewer) {
+  if (!viewer) return emptyCredites;
+  const creditDisplay = viewer.creditDisplay as
+    | (CreditDisplay & {
+        _currentFrameCredits: {
+          lightboxCredits: { _array: { credit?: CesiumCredit }[] };
+          screenCredits: { _array: { credit?: CesiumCredit }[] };
+        };
+        _currentCesiumCredit: CesiumCredit;
+      })
+    | undefined;
+
+  if (!creditDisplay) return emptyCredites;
+
+  const { lightboxCredits, screenCredits } = creditDisplay?._currentFrameCredits || {};
+  const cesiumCredits = creditDisplay._currentCesiumCredit;
+
+  const credits: Credits = {
+    engine: {
+      cesium: cesiumCredits?.html ? { html: cesiumCredits.html } : undefined,
+    },
+    lightbox: Array.from(lightboxCredits?._array ?? []).map(c => ({
+      html: c?.credit?.html,
+    })),
+    screen: Array.from(screenCredits?._array ?? []).map(c => ({
+      html: c?.credit?.html,
+    })),
+  };
+
+  return credits;
+}

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
@@ -108,6 +113,12 @@ export function useImageryProviders({
   const tileKeys = tiles.map(t => t.id).join(",");
   const prevTileKeys = useRef(tileKeys);
   const prevProviders = useRef<Providers>({});
+  const zoomLevels = useMemo(() => tiles.map(t => {
+      if (t.id && t.zoomLevel) return { [t.id]: t.zoomLevel };
+      return
+  }),
+  [tiles]);
+  const prevZoomLevels = useRef(zoomLevels);
 
   // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.
   const { providers, updated } = useMemo(() => {
@@ -169,13 +180,15 @@ export function useImageryProviders({
       !!added.length ||
       !!isCesiumAccessTokenUpdated ||
       !isEqual(prevTileKeys.current, tileKeys) ||
+      !isEqual(prevZoomLevels.current, zoomLevels) ||
       rawProviders.some(p => p.tile && (p.prevType !== p.tile.type || p.prevUrl !== p.tile.url));
 
     prevTileKeys.current = tileKeys;
+    prevZoomLevels.current = zoomLevels;
     prevCesiumIonAccessToken.current = cesiumIonAccessToken;
 
     return { providers, updated };
-  }, [cesiumIonAccessToken, tiles, tileKeys, newTile]);
+  }, [cesiumIonAccessToken, tiles, tileKeys, newTile, zoomLevels]);
 
   prevProviders.current = providers;
   return { providers, updated };

package/src/engines/Cesium/core/labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImagery.tsx

@@ -12,6 +12,7 @@ import {
   type Ellipsoid,
   type Label,
 } from "@cesium/engine";
+import { DistanceDisplayCondition } from "cesium";
 import { merge, omit } from "lodash-es";
 import { type Feature } from "protomaps";
 import { memo, useCallback, useEffect, useMemo, useRef, type FC } from "react";
@@ -170,6 +171,8 @@ export interface JapanGSIOptimalBVmapLabelImageryProps {
   height?: number;
   style?: AnnotationStyle;
   labelCollection?: LabelCollection;
+  near?: number;
+  far?: number;
 }
 
 export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImageryProps> = memo(
@@ -180,6 +183,8 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
     height = 50,
     style = defaultStyle,
     labelCollection,
+    near,
+    far,
   }) => {
     const cesiumContext = useCesium();
 
@@ -282,6 +287,8 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
             horizontalOrigin: HorizontalOrigin.CENTER,
             verticalOrigin: VerticalOrigin.BOTTOM,
             heightReference: HeightReference.CLAMP_TO_GROUND,
+            distanceDisplayCondition:
+              near || far ? new DistanceDisplayCondition(near, far) : undefined,
             disableDepthTestDistance: Infinity,
             ...styleOptions,
           };
@@ -308,7 +315,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
           scene?.postRender.addEventListener(removeLabels);
         }
       };
-    }, [style, annotations, scene, labelCollection]);
+    }, [style, annotations, scene, labelCollection, near, far]);
 
     useEffect(() => {
       updateVisibility();

package/src/engines/Cesium/core/labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapVectorMapLabel.tsx

@@ -143,7 +143,9 @@ const LabelImageryCollection: FC<{
   imageriesAtom: Atom<KeyedImagery[]>;
   style?: AnnotationStyle;
   labelCollection?: LabelCollection;
-}> = ({ imageryProvider, imageriesAtom, style, labelCollection }) => {
+  near?: number;
+  far?: number;
+}> = ({ imageryProvider, imageriesAtom, style, labelCollection, near, far }) => {
   const imageries = useAtomValue(imageriesAtom);
   return (
     <>
@@ -155,6 +157,8 @@ const LabelImageryCollection: FC<{
             descendants={imagery.descendants}
             style={style}
             labelCollection={labelCollection}
+            near={near}
+            far={far}
           />
         </Suspense>
       ))}
@@ -164,9 +168,15 @@ const LabelImageryCollection: FC<{
 
 export interface VectorMapLabelProps {
   style?: Record<string, any>;
+  near?: number;
+  far?: number;
 }
 
-export const JapanGSIOptimalBVmapVectorMapLabel: FC<VectorMapLabelProps> = ({ style }) => {
+export const JapanGSIOptimalBVmapVectorMapLabel: FC<VectorMapLabelProps> = ({
+  style,
+  near,
+  far,
+}) => {
   const [imageryProvider, setImageryProvider] =
     useState<JapanGSIOptimalBVmapLabelImageryProvider>();
   const setRef = useCallback((handle: CesiumComponentRef<CesiumImageryLayer> | null) => {
@@ -251,6 +261,8 @@ export const JapanGSIOptimalBVmapVectorMapLabel: FC<VectorMapLabelProps> = ({ st
           imageriesAtom={imageriesAtom}
           style={style}
           labelCollection={labels}
+          near={near}
+          far={far}
         />
       )}
     </>

package/src/engines/Cesium/core/labels/LabelImageryLayers.tsx

@@ -8,6 +8,8 @@ export interface TileLabelConfig {
   labelType: "japan_gsi_optimal_bvmap";
   fillColor?: string;
   outlineColor?: string;
+  near?: number;
+  far?: number;
   style: Record<string, any>;
 }
 
@@ -23,7 +25,14 @@ const LabelImageryLayers = memo(
           if (!label) return null;
           switch (label.labelType) {
             case "japan_gsi_optimal_bvmap":
-              return <JapanGSIOptimalBVmapVectorMapLabel key={label.id} style={label.style} />;
+              return (
+                <JapanGSIOptimalBVmapVectorMapLabel
+                  key={label.id}
+                  style={label.style}
+                  near={label.near}
+                  far={label.far}
+                />
+              );
             default:
               return null;
           }

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/helpers/getGeometryFromEntity.ts

@@ -0,0 +1,55 @@
+import { Cartesian3, Entity, JulianDate, PolygonHierarchy } from "cesium";
+
+import { Geometry } from "../../../mantle";
+
+export function getMarkerCoordinates(
+  entity: Entity,
+  currentTime: JulianDate,
+): [number, number, number] {
+  const position = entity.position?.getValue(currentTime) as Cartesian3 | undefined;
+  return [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0];
+}
+
+export function getGeometryFromEntity(currentTime: JulianDate, entity: Entity) {
+  if (entity.point || entity.billboard || entity.label) {
+    const coordinates = getMarkerCoordinates(entity, currentTime);
+
+    const geometry: Geometry = {
+      type: "Point",
+      coordinates,
+    };
+    return geometry;
+  }
+
+  if (entity.polyline) {
+    const positions = entity.polyline?.positions?.getValue(currentTime) as Cartesian3[];
+    const coordinates = positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+
+    const geometry: Geometry = {
+      type: "LineString",
+      coordinates,
+    };
+    return geometry;
+  }
+
+  if (entity.polygon) {
+    const hierarchy = entity.polygon?.hierarchy?.getValue(currentTime) as PolygonHierarchy;
+    const coordinates = hierarchy?.positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+
+    const geometry: Geometry = {
+      type: "Polygon",
+      coordinates: [coordinates],
+    };
+    return geometry;
+  }
+
+  return undefined;
+}

package/src/engines/Cesium/hooks/useEngineRef.ts

@@ -32,8 +32,10 @@ import {
   cartesianToLatLngHeight,
   getExtrudedHeight,
   getOverriddenScreenSpaceCameraOptions,
+  getCredits,
 } from "../common";
 import { attachTag, getTag } from "../Feature";
+import { getGeometryFromEntity } from "../helpers/getGeometryFromEntity";
 import { PickedFeature, pickManyFromViewportAsFeature } from "../pickMany";
 import { createGeometry } from "../Sketch/createGeometry";
 import { CursorType } from "../types";
@@ -259,15 +261,31 @@ export default function useEngineRef(
         }
         return;
       },
-      getExtrudedHeight: (position, windowPosition) => {
+      getExtrudedHeight: (position, windowPosition, allowNegative) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
         return getExtrudedHeight(
           viewer.scene,
           new Cesium.Cartesian3(position[0], position[1], position[2]),
           new Cesium.Cartesian2(windowPosition[0], windowPosition[1]),
+          allowNegative,
         );
       },
+      getExtrudedPoint: (position, extrudedHeight) => {
+        if (!position || !extrudedHeight) return;
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const point = new Cesium.Cartesian3(position[0], position[1], position[2]);
+        const cartesianScratch = new Cesium.Cartesian3();
+        const normal = viewer.scene?.globe.ellipsoid.geodeticSurfaceNormal(point, cartesianScratch);
+        if (!normal) return;
+        const extrudedPoint = Cesium.Cartesian3.add(
+          point,
+          Cesium.Cartesian3.multiplyByScalar(normal, extrudedHeight, cartesianScratch),
+          cartesianScratch,
+        );
+        return [extrudedPoint.x, extrudedPoint.y, extrudedPoint.z];
+      },
       getSurfaceDistance: (point1, point2) => {
         const viewer = cesium.current?.cesiumElement;
         if (!viewer || viewer.isDestroyed()) return;
@@ -831,6 +849,7 @@ export default function useEngineRef(
             tag.computedFeature ?? {
               type: "computedFeature",
               id: tag.featureId,
+              geometry: getGeometryFromEntity(viewer.clock.currentTime, entity),
               properties: convertEntityProperties(viewer.clock.currentTime, entity),
               metaData: {
                 description: convertEntityDescription(viewer.clock.currentTime, entity),
@@ -938,6 +957,32 @@ export default function useEngineRef(
         tickEventCallback.current = tickEventCallback.current.filter(c => c !== cb) || [];
       },
       tickEventCallback,
+      calcRectangleControlPoint: (p1: Position3d, p2: Position3d, p3: Position3d) => {
+        const pp1 = new Cesium.Cartesian3(...p1);
+        const pp2 = new Cesium.Cartesian3(...p2);
+        const pp3 = new Cesium.Cartesian3(...p3);
+        const cartesianScratch1 = new Cesium.Cartesian3();
+        const cartesianScratch2 = new Cesium.Cartesian3();
+        const projection = Cesium.Cartesian3.projectVector(
+          Cesium.Cartesian3.subtract(pp3, pp1, cartesianScratch1),
+          Cesium.Cartesian3.subtract(pp2, pp1, cartesianScratch2),
+          cartesianScratch1,
+        );
+        const offset = Cesium.Cartesian3.subtract(
+          pp3,
+          Cesium.Cartesian3.add(pp1, projection, cartesianScratch1),
+          cartesianScratch2,
+        );
+        const pp4 = Cesium.Cartesian3.midpoint(pp1, pp2, cartesianScratch1);
+        const pp5 = Cesium.Cartesian3.add(pp4, offset, cartesianScratch2);
+        const p5 = [pp5.x, pp5.y, pp5.z] as Position3d;
+        return [p1, p2, p5];
+      },
+      getCredits: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getCredits(viewer);
+      },
     };
   }, [cesium]);
 

package/src/engines/Cesium/hooks/useOverrideGlobeShader/useOverrideGlobeShader.ts

@@ -143,7 +143,7 @@ const useTerrainHeatmap = ({
         [
           "#ifdef APPLY_COLOR_TO_ALPHA",
           "vec3 colorDiff = abs(color.rgb - colorToAlpha.rgb);",
-          "colorDiff.r = max(max(colorDiff.r, colorDiff.g), colorDiff.b);",
+          "colorDiff.r = czm_maximumComponent(colorDiff);",
           "alpha = czm_branchFreeTernary(colorDiff.r < colorToAlpha.a, 0.0, alpha);",
           "#endif",
         ],

package/src/engines/Cesium/hooks.ts

@@ -27,6 +27,7 @@ import type {
 import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
 import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
 import {
+  Credits,
   LayerLoadEvent,
   LayerSelectWithRectEnd,
   LayerSelectWithRectMove,
@@ -37,7 +38,7 @@ import {
 import { TimelineManagerRef } from "../../Map/useTimelineManager";
 import { FEATURE_FLAGS } from "../../Visualizer/featureFlags";
 
-import { isSelectable } from "./common";
+import { getCredits, isSelectable } from "./common";
 import { getTag, type Context as FeatureContext } from "./Feature";
 import { arrayToCartecian3 } from "./helpers/sphericalHaromic";
 import useCamera from "./hooks/useCamera";
@@ -89,6 +90,7 @@ export default ({
   onLayerLoad,
   onCameraChange,
   onMount,
+  onCreditsUpdate,
 }: {
   ref: React.ForwardedRef<EngineRef>;
   property?: ViewerProperty;
@@ -128,6 +130,7 @@ export default ({
   onLayerLoad?: (e: LayerLoadEvent) => void;
   onCameraChange?: (camera: Camera) => void;
   onMount?: () => void;
+  onCreditsUpdate?: (credits: Credits) => void;
 }) => {
   const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
 
@@ -557,8 +560,11 @@ export default ({
         if (pickRay) {
           const l = await scene.imageryLayers.pickImageryLayerFeatures(pickRay, scene);
 
-          // NOTE: For now we only send the first selected feature to onLayerSelect instead of sending all of them: @pyshx
-          const f = l?.[0];
+          // Find the topmost overlaid feature.
+          const f = l?.findLast(f => {
+            const appearanceType = f?.data?.appearanceType;
+            return appearanceType && f?.data?.feature?.[appearanceType]?.show !== false;
+          });
 
           const appearanceType = f?.data?.appearanceType;
 
@@ -648,6 +654,22 @@ export default ({
     viewer.scene.requestRender();
   }, []);
 
+  const onCreditsUpdateRef = useRef(onCreditsUpdate);
+  onCreditsUpdateRef.current = onCreditsUpdate;
+  const updateCredits = useCallback(() => {
+    if (!onCreditsUpdateRef.current) 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(() => {
+      if (!onCreditsUpdateRef.current) return;
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return;
+      const credits = getCredits(viewer);
+      onCreditsUpdateRef.current(credits);
+    }, 3000);
+  }, []);
+
   const context = useMemo<FeatureContext>(
     () => ({
       selectionReason,
@@ -662,8 +684,17 @@ export default ({
       toXYZ: engineAPI.toXYZ,
       toWindowPosition: engineAPI.toWindowPosition,
       isPositionVisible: engineAPI.isPositionVisible,
+      updateCredits,
     }),
-    [selectionReason, engineAPI, onLayerEdit, onLayerVisibility, onLayerLoad, timelineManagerRef],
+    [
+      selectionReason,
+      engineAPI,
+      onLayerEdit,
+      onLayerVisibility,
+      onLayerLoad,
+      timelineManagerRef,
+      updateCredits,
+    ],
   );
 
   useEffect(() => {
@@ -728,6 +759,14 @@ export default ({
     unmountCamera?.();
   }, [unmountCamera]);
 
+  const handleTilesChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
+  const handleTerrainProviderChange = useCallback(() => {
+    updateCredits();
+  }, [updateCredits]);
+
   return {
     cesium,
     cesiumIonAccessToken,
@@ -747,6 +786,8 @@ export default ({
     handleClick,
     handleMount,
     handleUnmount,
+    handleTilesChange,
+    handleTerrainProviderChange,
   };
 };