@reearth/core 0.0.7-alpha.7 → 0.0.7-alpha.70

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

@@ -2,6 +2,7 @@ import {
   Cesium3DTileset as Cesium3DTilesetType,
   Cesium3DTileStyle,
   IonResource,
+  Resource,
   ClippingPlane,
   ClippingPlaneCollection as CesiumClippingPlaneCollection,
   Cartesian3,
@@ -15,16 +16,22 @@ 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";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { CesiumComponentRef, useCesium } from "resium";
 
 import type {
@@ -57,7 +64,6 @@ import {
 } from "../utils";
 
 import { TilesetFeatureIndex } from "./TilesetFeatureIndex";
-import { GoogleMaps } from "./types";
 import { useClippingBox } from "./useClippingBox";
 import { useDrawClipping } from "./useDrawClipping";
 
@@ -77,6 +83,8 @@ const useData = (layer: ComputedLayer | undefined) => {
           ? data.layers.join(",")
           : data?.layers
         : undefined,
+      googleMapApiKey: data?.serviceTokens?.googleMapApiKey,
+      provider: data?.provider,
     };
   }, [layer]);
 };
@@ -179,7 +187,7 @@ const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
 
 const useFeature = ({
   id,
-  tileset,
+  tilesetRef,
   idProperty,
   layer,
   viewer,
@@ -189,9 +197,10 @@ const useFeature = ({
   onComputedFeatureFetch,
   shouldUseFeatureIndex,
   isTilesetReady,
+  useExternalStyle,
 }: {
   id?: string;
-  tileset: MutableRefObject<Cesium3DTileset | undefined>;
+  tilesetRef: MutableRefObject<Cesium3DTileset | undefined>;
   idProperty?: string;
   layer?: ComputedLayer;
   viewer?: Viewer;
@@ -201,6 +210,7 @@ const useFeature = ({
   selectedFeatureIdsRef: MutableRefObject<string[]>;
   shouldUseFeatureIndex?: boolean;
   isTilesetReady: boolean;
+  useExternalStyle?: boolean;
 }) => {
   const cachedFeaturesRef = useRef<CachedFeature[]>([]);
   const cachedCalculatedLayerRef = useRef(layer);
@@ -222,44 +232,51 @@ const useFeature = ({
 
         const computedFeature = evalFeature(layer, { ...feature?.feature, properties });
 
-        const style = computedFeature?.["3dtiles"];
-
-        COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
-          if (name === "color") {
-            if (isFeatureSelected) {
-              raw.color =
-                typeof layer["3dtiles"]?.selectedFeatureColor === "string"
-                  ? toColor(layer["3dtiles"]?.selectedFeatureColor) ?? raw.color
-                  : raw.color;
-              return;
-            }
-
-            raw.color = DEFAULT_FEATURE_COLOR;
-          }
-          const val = convertStyle(style?.[name], convert);
-          if (val !== undefined) {
-            raw[name] = val;
-          }
-        });
+        if (!useExternalStyle) {
+          const style = computedFeature?.["3dtiles"];
 
-        if (raw instanceof Cesium3DTilePointFeature) {
-          POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+          COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
             const val = convertStyle(style?.[name], convert);
-            if (val !== undefined) {
-              raw[name] = val;
+
+            if (name === "color") {
+              // Reset color to default so that new style could update all.
+              raw.color = DEFAULT_FEATURE_COLOR;
+
+              // Apply color from style.
+              if (val !== undefined) {
+                raw.color = val;
+              }
+
+              // Apply color for selected feature.
+              if (isFeatureSelected && typeof layer["3dtiles"]?.selectedFeatureColor === "string") {
+                raw.color = toColor(layer["3dtiles"]?.selectedFeatureColor) ?? val;
+              }
+            } else {
+              if (val !== undefined) {
+                raw[name] = val;
+              }
             }
           });
-        }
 
-        if ("style" in raw) {
-          raw.style = new Cesium3DTileStyle(
-            // TODO: Convert value if it's necessary
-            MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
-              const val = convertStyle(style?.[name as keyof typeof style], convert);
-              if (val === undefined) return res;
-              return { ...res, [name]: val };
-            }, {}),
-          );
+          if (raw instanceof Cesium3DTilePointFeature) {
+            POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+              const val = convertStyle(style?.[name], convert);
+              if (val !== undefined) {
+                raw[name] = val;
+              }
+            });
+          }
+
+          if ("style" in raw) {
+            raw.style = new Cesium3DTileStyle(
+              // TODO: Convert value if it's necessary
+              MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
+                const val = convertStyle(style?.[name as keyof typeof style], convert);
+                if (val === undefined) return res;
+                return { ...res, [name]: val };
+              }, {}),
+            );
+          }
         }
 
         attachTag(feature.raw, {
@@ -273,7 +290,7 @@ const useFeature = ({
       }
       return;
     },
-    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef],
+    [evalFeature, layerId, viewer, shouldUseFeatureIndex, selectedFeatureIdsRef, useExternalStyle],
   );
 
   const handleTilesetLoad = useCallback(
@@ -324,10 +341,10 @@ const useFeature = ({
   handleTilesetLoadRef.current = handleTilesetLoad;
   useEffect(
     () =>
-      tileset.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileLoad.addEventListener((t: Cesium3DTile) =>
         handleTilesetLoadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   const handleTilesetUnload = useCallback(
@@ -343,10 +360,10 @@ const useFeature = ({
   handleTilesetUnloadRef.current = handleTilesetUnload;
   useEffect(
     () =>
-      tileset.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
+      tilesetRef.current?.tileUnload.addEventListener((t: Cesium3DTile) =>
         handleTilesetUnloadRef.current(t),
       ),
-    [tileset, isTilesetReady],
+    [tilesetRef, isTilesetReady],
   );
 
   useEffect(() => {
@@ -362,7 +379,7 @@ const useFeature = ({
 
   // If styles are updated while features are calculating,
   // we stop calculating features, and reassign styles.
-  const skippedComputingAt = useRef<number | null>();
+  const skippedComputingAt = useRef<number | null>(undefined);
   useEffect(() => {
     skippedComputingAt.current = Date.now();
   }, [pickedAppearance, updateStyle]);
@@ -449,8 +466,8 @@ export const useHooks = ({
   onLayerFetch?: (value: Partial<Pick<LayerSimple, "properties">>) => void;
 }) => {
   const { viewer } = useCesium();
-  const tilesetRef = useRef<Cesium3DTilesetType>();
-  const { onLayerLoad } = useContext();
+  const tilesetRef = useRef<Cesium3DTilesetType>(undefined);
+  const { onLayerLoad, updateCredits, customProvider } = useContext();
   const layerIdRef = useRef(layer?.id);
   layerIdRef.current = layer?.id;
 
@@ -460,7 +477,6 @@ export const useHooks = ({
     edgeColor,
     edgeWidth,
     experimental_clipping,
-    apiKey,
     selectedFeatureColor,
     disableIndexingFeature,
   } = property ?? {};
@@ -481,10 +497,53 @@ export const useHooks = ({
   } = useClippingBox({ clipping: experimental_clipping, boxId });
 
   const [style, setStyle] = useState<Cesium3DTileStyle>();
-  const { url, type, idProperty } = useData(layer);
+  const { url, type, idProperty, googleMapApiKey, provider } = useData(layer);
+  const cesiumIonAccessToken =
+    typeof meta?.cesiumIonAccessToken === "string" ? meta.cesiumIonAccessToken : undefined;
   const shouldUseFeatureIndex = !disableIndexingFeature && !!idProperty;
 
   const [isTilesetReady, setIsTilesetReady] = useState(false);
+  const [isTilesetCompReady, setIsTilesetCompReady] = useState(false);
+  const [isTilesetRefReady, setIsTilesetRefReady] = useState(false);
+
+  const reearthGooglePhotorealisticUrl = useMemo(
+    () =>
+      customProvider?.layers?.providers?.find(
+        p => p.id === "reearth_google_photorealistic_3d_tiles",
+      )?.url,
+    [customProvider],
+  );
+
+  const tilesetKey = useMemo(
+    () =>
+      generateIDWithMD5(
+        JSON.stringify({
+          type,
+          url,
+          tileset,
+          provider,
+          googleMapApiKey,
+          reearthGooglePhotorealisticUrl,
+          cesiumIonAccessToken:
+            type === "osm-buildings" ||
+            (type === "google-photorealistic" && (provider === "cesium-ion" || !googleMapApiKey))
+              ? cesiumIonAccessToken
+              : undefined,
+        }),
+      ),
+    [
+      type,
+      url,
+      tileset,
+      provider,
+      googleMapApiKey,
+      reearthGooglePhotorealisticUrl,
+      cesiumIonAccessToken,
+    ],
+  );
+  const currentTilesetKeyRef = useRef(tilesetKey);
+  currentTilesetKeyRef.current = tilesetKey;
+  const tilesetRefKeyRef = useRef<string | undefined>(undefined);
 
   const prevPlanes = useRef(_planes);
   const planes = useMemo(() => {
@@ -503,8 +562,9 @@ export const useHooks = ({
     return prevPlanes.current;
   }, [_planes]);
   const clipDirection = direction === "inside" ? -1 : 1;
+
   // Create immutable object
-  const [clippingPlanes] = useState(
+  const [clippingPlanes, setClippingPlanes] = useState<CesiumClippingPlaneCollection>(
     () =>
       new CesiumClippingPlaneCollection({
         planes: planes?.map(
@@ -519,6 +579,27 @@ export const useHooks = ({
         edgeColor: toColor(edgeColor),
       }),
   );
+  // Initialize clipping planes
+  // This is workaround to reinitialize ClippingPlanes in strict mode.
+  useEffect(
+    () => () => {
+      setClippingPlanes(
+        new CesiumClippingPlaneCollection({
+          planes: planes?.map(
+            plane =>
+              new ClippingPlane(
+                new Cartesian3(plane.normal?.x, plane.normal?.y, plane.normal?.z),
+                (plane.distance || 0) * clipDirection,
+              ),
+          ),
+          unionClippingRegions: direction === "outside",
+          edgeWidth: edgeWidth,
+          edgeColor: toColor(edgeColor),
+        }),
+      );
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
 
   const { drawClippingEnabled, drawClippingEdgeProps } = useDrawClipping({
     ...experimental_clipping?.draw,
@@ -531,19 +612,25 @@ export const useHooks = ({
 
   const ref = useCallback(
     (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
-      if (tileset?.cesiumElement) {
-        attachTag(tileset.cesiumElement, {
+      const cesiumElement = tileset?.cesiumElement;
+      if (tilesetKey !== currentTilesetKeyRef.current) {
+        return;
+      }
+      if (cesiumElement) {
+        attachTag(cesiumElement, {
           layerId: layer?.id || id,
           featureIndex: shouldUseFeatureIndex ? featureIndex : undefined,
           appearanceType: "3dtiles",
         });
       }
-      if (layer?.id && tileset?.cesiumElement) {
-        (tileset?.cesiumElement as any)[layerIdField] = layer.id;
+      if (layer?.id && cesiumElement) {
+        (cesiumElement as any)[layerIdField] = layer.id;
       }
-      tilesetRef.current = tileset?.cesiumElement;
+      tilesetRef.current = cesiumElement;
+      tilesetRefKeyRef.current = cesiumElement ? tilesetKey : undefined;
+      setIsTilesetRefReady(!!cesiumElement);
     },
-    [id, layer?.id, featureIndex, shouldUseFeatureIndex],
+    [id, layer?.id, featureIndex, shouldUseFeatureIndex, tilesetKey],
   );
 
   const selectedFeatureIdsRef = useRef<string[]>([]);
@@ -551,6 +638,20 @@ export const useHooks = ({
   selectedFeatureColorRef.current = selectedFeatureColor;
   const [selectedFeatureColorMap] = useState(() => new Map<string, Color>());
 
+  // The Cesium3DTileset child remounts when tilesetKey changes, while this hook stays mounted.
+  useLayoutEffect(() => {
+    setIsTilesetCompReady(false);
+    setIsTilesetReady(false);
+    if (tilesetRefKeyRef.current !== tilesetKey) {
+      tilesetRef.current = undefined;
+      tilesetRefKeyRef.current = undefined;
+      setIsTilesetRefReady(false);
+    }
+    featureIndex.records.clear();
+    selectedFeatureIdsRef.current = [];
+    selectedFeatureColorMap.clear();
+  }, [tilesetKey, featureIndex, selectedFeatureColorMap]);
+
   useEffect(() => {
     if (!tilesetRef.current || !shouldUseFeatureIndex || !isTilesetReady) return;
     Object.assign(tilesetRef.current, {
@@ -578,7 +679,7 @@ export const useHooks = ({
 
   useFeature({
     id,
-    tileset: tilesetRef,
+    tilesetRef,
     layer,
     idProperty,
     viewer,
@@ -588,6 +689,7 @@ export const useHooks = ({
     selectedFeatureIdsRef,
     shouldUseFeatureIndex,
     isTilesetReady,
+    useExternalStyle: !!styleUrl,
   });
 
   const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
@@ -703,36 +805,88 @@ export const useHooks = ({
     }
     (async () => {
       const res = await fetch(styleUrl);
-      if (!res.ok) return;
-      setStyle(new Cesium3DTileStyle(await res.json()));
+      if (!res.ok) {
+        console.warn("Failed to fetch style from:", styleUrl);
+        return;
+      }
+      const styleData = await res.json();
+      const newStyle = new Cesium3DTileStyle(styleData);
+      setStyle(newStyle);
     })();
   }, [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 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
-        : type === "3dtiles" && isVisible
-          ? url ?? tileset
-          : null;
-  }, [isVisible, tileset, url, type, meta, googleMapResource]);
+  // Apply style to tileset when both external style and tileset are ready
+  useEffect(() => {
+    if (style && tilesetRef.current && isTilesetReady) {
+      tilesetRef.current.style = style;
+    }
+  }, [style, isTilesetReady]);
+
+  const googleMapPhotorealisticResource = useMemo((): string | Promise<Resource> | null => {
+    if (type !== "google-photorealistic" || !isVisible) return null;
+
+    // For Re:Earth provider, use the custom URL from customProvider or layer data
+    if (provider === "reearth") {
+      return reearthGooglePhotorealisticUrl || url || null;
+    }
+
+    // Otherwise load via Google API key or Cesium Ion.
+    const loadTileset = async (): Promise<Resource> => {
+      try {
+        if (provider === "cesium-ion" || !googleMapApiKey) {
+          const resource = await IonResource.fromAssetId(2275207, {
+            accessToken: cesiumIonAccessToken,
+          });
+          return resource;
+        }
+        const tileset = await createGooglePhotorealistic3DTileset({
+          key: googleMapApiKey,
+        });
+        return tileset.resource;
+      } catch (error) {
+        console.error(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
+        throw error;
+      }
+    };
+
+    return loadTileset();
+  }, [
+    type,
+    isVisible,
+    googleMapApiKey,
+    cesiumIonAccessToken,
+    provider,
+    reearthGooglePhotorealisticUrl,
+    url,
+  ]);
+
+  const tilesetUrl = useMemo((): string | Resource | Promise<Resource> | null => {
+    if (!isVisible) return null;
+
+    // Google Photorealistic 3D Tiles
+    if (googleMapPhotorealisticResource) {
+      return googleMapPhotorealisticResource;
+    }
+
+    // Re:Earth Buildings — use layer's own url if provided, otherwise fall back to public service
+    if (type === "reearth-buildings") {
+      return url ?? "https://buildings.reearth.land/tileset.json";
+    }
+
+    // OSM Buildings — only available via Cesium Ion.
+    if (type === "osm-buildings") {
+      return IonResource.fromAssetId(96188, {
+        accessToken: cesiumIonAccessToken,
+      }); // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
+    }
+
+    // Standard 3D Tiles with explicit URL
+    if (type === "3dtiles") {
+      return url ?? tileset ?? null;
+    }
+
+    return null;
+  }, [type, isVisible, googleMapPhotorealisticResource, url, tileset, cesiumIonAccessToken]);
 
   const imageBasedLighting = useMemo(() => {
     if (
@@ -773,14 +927,45 @@ export const useHooks = ({
 
   const handleReady = useCallback(
     (tileset: Cesium3DTileset) => {
-      setIsTilesetReady(true);
+      if (tilesetKey !== currentTilesetKeyRef.current) {
+        return;
+      }
+      setIsTilesetCompReady(true);
       onLayerFetch?.({ properties: tileset.properties });
       onLayerLoad?.({ layerId: layerIdRef.current });
     },
-    [onLayerFetch, onLayerLoad],
+    [onLayerFetch, onLayerLoad, tilesetKey],
+  );
+
+  const handleError = useCallback(
+    (error: unknown) => {
+      if (tilesetKey !== currentTilesetKeyRef.current) {
+        return;
+      }
+      tilesetRef.current = undefined;
+      tilesetRefKeyRef.current = undefined;
+      setIsTilesetCompReady(false);
+      setIsTilesetRefReady(false);
+      setIsTilesetReady(false);
+      console.error("Error loading Cesium 3D Tileset:", error);
+    },
+    [tilesetKey],
   );
 
+  useEffect(() => {
+    if (!isTilesetCompReady || !isTilesetRefReady) return;
+    setIsTilesetReady(true);
+  }, [isTilesetCompReady, isTilesetRefReady]);
+
+  useEffect(() => {
+    updateCredits?.();
+    return () => {
+      updateCredits?.();
+    };
+  }, [type, updateCredits]);
+
   return {
+    tilesetKey,
     tilesetUrl,
     ref,
     style,
@@ -790,5 +975,6 @@ export const useHooks = ({
     builtinBoxProps,
     imageBasedLighting,
     handleReady,
+    handleError,
   };
 };

package/src/engines/Cesium/Feature/Tileset/index.stories.tsx

@@ -5,7 +5,6 @@ import { Map, Props } from "../../../../Map";
 
 export default {
   component: Map,
-  parameters: { actions: { argTypesRegex: "^on.*" } },
 } as Meta;
 
 const Template: StoryFn<Props> = args => <Map {...args} />;

package/src/engines/Cesium/Feature/Tileset/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useMemo } from "react";
+import { useMemo, type JSX } from "react";
 import { Cesium3DTileset } from "resium";
 
 import type { Cesium3DTilesAppearance, ComputedLayer } from "../../..";
@@ -37,6 +37,7 @@ function Tileset({
     property ?? {};
   const boxId = `${layer?.id}_box`;
   const {
+    tilesetKey,
     tilesetUrl,
     ref,
     style,
@@ -46,6 +47,7 @@ function Tileset({
     builtinBoxProps,
     imageBasedLighting,
     handleReady,
+    handleError,
   } = useHooks({
     id,
     boxId,
@@ -72,6 +74,7 @@ function Tileset({
   return !isVisible || !tilesetUrl ? null : (
     <>
       <Cesium3DTileset
+        key={tilesetKey}
         ref={ref}
         url={tilesetUrl}
         customShader={
@@ -88,8 +91,10 @@ function Tileset({
         colorBlendMode={colorBlendModeFor3DTile(colorBlendMode)}
         imageBasedLighting={imageBasedLighting}
         onReady={handleReady}
+        onError={handleError}
         debugWireframe={showWireframe}
         debugShowBoundingVolume={showBoundingVolume}
+        showCreditsOnScreen
       />
       {builtinBoxProps && (
         <Box
@@ -110,19 +115,7 @@ function Tileset({
   );
 }
 
-export default memo(
-  Tileset,
-  (prev, next) =>
-    prev.id === next.id &&
-    prev.isVisible === next.isVisible &&
-    prev.property === next.property &&
-    prev.layer?.layer === next.layer?.layer &&
-    prev.viewerProperty === next.viewerProperty &&
-    prev.meta === next.meta &&
-    prev.evalFeature === next.evalFeature &&
-    prev.onComputedFeatureFetch === next.onComputedFeatureFetch &&
-    prev.onFeatureDelete === next.onFeatureDelete,
-);
+export default Tileset;
 
 export const config: FeatureComponentConfig = {
   noFeature: true,

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

@@ -105,7 +105,7 @@ export const useClippingBox = ({
 
   const isBoxClicked = useRef(false);
   const isTopBottomSidePlaneClicked = useRef(false);
-  const currentCameraPosition = useRef<Camera | undefined>();
+  const currentCameraPosition = useRef<Camera | undefined>(undefined);
 
   // Coordinates
   const [coords, setCoords] = useState(coordinates);
@@ -349,7 +349,7 @@ export const useClippingBox = ({
     [boxId, boxState.isEdgeClicked, boxState.isScalePointClicked, handleUpdateBoxState],
   );
 
-  const hovered = useRef<any>();
+  const hovered = useRef<any>(undefined);
   const handleRawMouseMove = useCallback(
     (e: any) => {
       const picked = viewer?.scene.pick(e.endPosition);

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

@@ -69,11 +69,11 @@ export const useDrawClipping = ({
       const polygon = turf.polygon([surfacePoints.map(p => [p.lng, p.lat])]);
       const center = turf.centroid(polygon);
       const baseHeight = viewer?.scene
-        ? (await sampleTerrainHeight(
+        ? ((await sampleTerrainHeight(
             viewer?.scene,
             center.geometry.coordinates[0],
             center.geometry.coordinates[1],
-          )) ?? 0
+          )) ?? 0)
         : 0;
       setBaseHeight(baseHeight);
 

package/src/engines/Cesium/Feature/context.ts

@@ -3,12 +3,14 @@ import { createContext, useContext as useReactContext } from "react";
 
 import type { Camera, LayerSelectionReason } from "../..";
 import { LayerEditEvent, LayerLoadEvent, LayerVisibilityEvent } from "../../../Map";
+import type { CustomProviderConfig } from "../../../Map/types/customProvider";
 import { TimelineManagerRef } from "../../../Map/useTimelineManager";
 import type { FlyTo } from "../../../types";
 
 export type Context = {
   selectionReason?: LayerSelectionReason;
   timelineManagerRef?: TimelineManagerRef;
+  customProvider?: CustomProviderConfig;
   getCamera?: () => Camera | undefined;
   flyTo?: FlyTo;
   onLayerEdit?: (e: LayerEditEvent) => void;
@@ -26,6 +28,7 @@ export type Context = {
     position: [x: number, y: number, z: number],
   ) => [x: number, y: number] | undefined;
   isPositionVisible?: (position: [x: number, y: number, z: number]) => boolean;
+  updateCredits?: () => void;
 };
 
 export const context = createContext<Context>({});