@reearth/core 0.0.7-alpha.62 → 0.0.7-alpha.63

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

@@ -1,12 +1,16 @@
 import {
   Color,
+  ImageryLayer as CesiumImageryLayer,
   ImageryProvider,
   TextureMagnificationFilter,
   TextureMinificationFilter,
+  UrlTemplateImageryProvider,
 } from "cesium";
 import { isEqual } from "lodash-es";
-import { useCallback, useMemo, useRef, useLayoutEffect, useState, useEffect } from "react";
-import { ImageryLayer } from "resium";
+import { useCallback, useMemo, useRef, useEffect } from "react";
+import { useCesium } from "resium";
+
+import type { CustomProviderConfig } from "../../../Map/types/customProvider";
 
 import { isValidPresetTileType, PresetTileType, tiles as tilePresets } from "./presets";
 
@@ -22,6 +26,7 @@ export type Tile = {
   id: string;
   url?: string;
   type?: string;
+  cesiumIonAssetId?: number;
   opacity?: number;
   zoomLevel?: number[];
   zoomLevelForURL?: number[];
@@ -31,64 +36,127 @@ export type Tile = {
 export type Props = {
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
+  customProvider?: CustomProviderConfig;
   onTilesChange?: () => void;
 };
 
-export default function ImageryLayers({ tiles, cesiumIonAccessToken, onTilesChange }: Props) {
-  const { providers, updated } = useImageryProviders({
+// NOTE: This component intentionally bypasses Resium's declarative <ImageryLayer />.
+// Resium wraps provider creation in queueMicrotask; under React 18 Strict Mode the effect
+// cleanup runs before that microtask resolves, so the layer reference is undefined at cleanup
+// time and old layers are never removed — they accumulate silently behind new ones.
+// Direct imageryLayerCollection management with a `cancelled` flag is the only safe fix.
+export default function ImageryLayers({
+  tiles,
+  cesiumIonAccessToken,
+  customProvider,
+  onTilesChange,
+}: Props) {
+  const { imageryLayerCollection, scene } = useCesium();
+
+  const { providers } = useImageryProviders({
     tiles,
     cesiumIonAccessToken,
+    customProvider,
     presets: tilePresets,
   });
 
-  // force rerendering all layers when any provider is updated
-  // since Resium does not sort layers according to ImageryLayer component order
-  const [counter, setCounter] = useState(0);
-  useLayoutEffect(() => {
-    if (updated) setCounter(c => c + 1);
-  }, [providers, updated]);
-
   useEffect(() => {
+    if (!imageryLayerCollection || !scene) return;
+
+    let cancelled = false;
+    const addedLayers: CesiumImageryLayer[] = [];
+    // Track layers by their intended index to maintain order with async loading
+    const layersByIndex: (CesiumImageryLayer | null)[] = new Array(tiles?.length || 0).fill(null);
+
+    const reorderLayers = () => {
+      if (cancelled || scene.isDestroyed()) return;
+
+      // Move each layer to its correct position based on layersByIndex
+      layersByIndex.forEach((layer, targetIndex) => {
+        if (!layer) return;
+
+        const currentIndex = imageryLayerCollection.indexOf(layer);
+        if (currentIndex === -1) return; // Layer not in collection
+
+        // Calculate where this layer should be: count non-null layers before it
+        const desiredIndex = layersByIndex.slice(0, targetIndex).filter(l => l !== null).length;
+
+        if (currentIndex !== desiredIndex) {
+          // Move layer to correct position
+          imageryLayerCollection.remove(layer, false); // Don't destroy
+          imageryLayerCollection.add(layer, desiredIndex);
+        }
+      });
+
+      scene.requestRender();
+    };
+
+    tiles?.forEach(({ id, zoomLevel, opacity, heatmap }, i) => {
+      const providerOrPromise = providers[id]?.[3];
+      if (!providerOrPromise) return;
+
+      const doAdd = (provider: ImageryProvider) => {
+        if (!provider || cancelled || scene.isDestroyed()) return;
+        const layer = new CesiumImageryLayer(provider, {
+          minimumTerrainLevel: zoomLevel?.[0],
+          maximumTerrainLevel: zoomLevel?.[1],
+          alpha: opacity,
+          colorToAlpha: heatmap ? Color.WHITE : undefined,
+          colorToAlphaThreshold: heatmap ? 1 : undefined,
+          magnificationFilter: heatmap ? TextureMagnificationFilter.LINEAR : undefined,
+          minificationFilter: heatmap ? TextureMinificationFilter.NEAREST : undefined,
+        });
+
+        // Always append to avoid index out of bounds
+        imageryLayerCollection.add(layer);
+        layersByIndex[i] = layer;
+        addedLayers.push(layer);
+
+        // Reorder all layers after each addition
+        reorderLayers();
+      };
+
+      if (providerOrPromise instanceof Promise) {
+        providerOrPromise.then(doAdd).catch(err => console.error("Failed to load imagery provider:", err));
+      } else {
+        doAdd(providerOrPromise);
+      }
+    });
+
+    scene.requestRender();
     onTilesChange?.();
-  }, [tiles, counter, onTilesChange]);
-
-  return (
-    <>
-      {tiles
-        ?.map(({ id, ...tile }) => ({
-          ...tile,
-          id,
-          provider: providers[id]?.[2],
-        }))
-        .map(({ id, opacity, zoomLevel, provider, heatmap }, i) =>
-          provider ? (
-            <ImageryLayer
-              key={`${id}_${i}_${counter}`}
-              imageryProvider={provider}
-              minimumTerrainLevel={zoomLevel?.[0]}
-              maximumTerrainLevel={zoomLevel?.[1]}
-              alpha={opacity}
-              index={i}
-              colorToAlpha={heatmap ? Color.WHITE : undefined}
-              colorToAlphaThreshold={heatmap ? 1 : undefined}
-              magnificationFilter={heatmap ? TextureMagnificationFilter.LINEAR : undefined}
-              minificationFilter={heatmap ? TextureMinificationFilter.NEAREST : undefined}
-            />
-          ) : null,
-        )}
-    </>
-  );
+
+    return () => {
+      cancelled = true;
+      for (const layer of addedLayers) {
+        if (!scene.isDestroyed() && imageryLayerCollection.contains(layer)) {
+          imageryLayerCollection.remove(layer);
+        }
+      }
+    };
+  }, [providers, tiles, imageryLayerCollection, scene, onTilesChange]);
+
+  return null;
 }
 
-type Providers = { [id: string]: [string | undefined, string | undefined, ImageryProvider] };
+type Providers = {
+  [id: string]: [
+    string | undefined,
+    string | undefined,
+    number | undefined,
+    Promise<ImageryProvider> | ImageryProvider,
+  ];
+};
 
 export function useImageryProviders({
   tiles = [],
   cesiumIonAccessToken,
+  customProvider,
   presets,
 }: {
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
+  customProvider?: CustomProviderConfig;
   presets: {
     [K in PresetTileType]: (opts?: {
       url?: string;
@@ -99,17 +167,34 @@ export function useImageryProviders({
   };
 }): { providers: Providers; updated: boolean } {
   const newTile = useCallback(
-    (t: Tile, ciat?: string) =>
-      presets[isValidPresetTileType(t.type) ? t.type : "default"]({
+    (t: Tile, ciat?: string, tp?: CustomProviderConfig) => {
+      const opts = {
         url: t.url,
         cesiumIonAccessToken: ciat,
+        cesiumIonAssetId: t.cesiumIonAssetId,
         heatmap: t.heatmap,
-        zoomLevel: t.zoomLevelForURL,
-      }),
+        tile_zoomLevel: t.zoomLevelForURL,
+      };
+      if (isValidPresetTileType(t.type)) {
+        return presets[t.type](opts);
+      }
+      // Dynamic: check customProvider.imagery.providers for a matching id
+      const customEntry = tp?.imagery?.providers?.find(p => p.id === t.type);
+      if (customEntry) {
+        return new UrlTemplateImageryProvider({
+          url: customEntry.url,
+          credit: customEntry.credit,
+          maximumLevel: customEntry.maximumLevel,
+          minimumLevel: customEntry.minimumLevel,
+        });
+      }
+      return presets["open_street_map"](opts);
+    },
     [presets],
   );
 
   const prevCesiumIonAccessToken = useRef(cesiumIonAccessToken);
+  const prevCustomProvider = useRef(customProvider);
   const tileKeys = tiles.map(t => t.id).join(",");
   const prevTileKeys = useRef(tileKeys);
   const prevProviders = useRef<Providers>({});
@@ -123,9 +208,10 @@ export function useImageryProviders({
   );
   const prevZoomLevels = useRef(zoomLevels);
 
-  // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.
+  // Manage CustomProviders so that CustomProvider does not need to be recreated each time tiles are updated.
   const { providers, updated } = useMemo(() => {
     const isCesiumAccessTokenUpdated = prevCesiumIonAccessToken.current !== cesiumIonAccessToken;
+    const isTileProviderUpdated = prevCustomProvider.current !== customProvider;
     const prevProvidersKeys = Object.keys(prevProviders.current);
     const added = tiles.map(t => t.id).filter(t => t && !prevProvidersKeys.includes(t));
 
@@ -137,7 +223,8 @@ export function useImageryProviders({
       added: added.includes(k),
       prevType: v?.[0],
       prevUrl: v?.[1],
-      prevProvider: v?.[2],
+      prevIonAssetId: v?.[2],
+      prevProvider: v?.[3],
       tile: tiles.find(t => t.id === k),
     }));
 
@@ -149,6 +236,7 @@ export function useImageryProviders({
             added,
             prevType,
             prevUrl,
+            prevIonAssetId,
             prevProvider,
             tile,
           }):
@@ -157,6 +245,7 @@ export function useImageryProviders({
                 [
                   string | undefined,
                   string | undefined,
+                  number | undefined,
                   Promise<ImageryProvider> | ImageryProvider | null | undefined,
                 ],
               ]
@@ -168,30 +257,59 @@ export function useImageryProviders({
                   added ||
                   prevType !== tile.type ||
                   prevUrl !== tile.url ||
-                  (isCesiumAccessTokenUpdated && (!tile.type || tile.type === "default"))
-                    ? [tile.type, tile.url, newTile(tile, cesiumIonAccessToken)]
-                    : [prevType, prevUrl, prevProvider],
+                  prevIonAssetId !== tile.cesiumIonAssetId ||
+                  isTileProviderUpdated ||
+                  (isCesiumAccessTokenUpdated &&
+                    (tile.type?.startsWith("cesium_ion") ||
+                      tile.type === "default" ||
+                      tile.type === "default_road" ||
+                      tile.type === "default_label" ||
+                      tile.type === "black_marble"))
+                    ? [
+                        tile.type,
+                        tile.url,
+                        tile.cesiumIonAssetId,
+                        newTile(tile, cesiumIonAccessToken, customProvider),
+                      ]
+                    : [prevType, prevUrl, prevIonAssetId, prevProvider],
                 ],
         )
         .filter(
-          (e): e is [string, [string | undefined, string | undefined, ImageryProvider]] =>
-            !!e?.[1][2],
+          (
+            e,
+          ): e is [
+            string,
+            [
+              string | undefined,
+              string | undefined,
+              number | undefined,
+              Promise<ImageryProvider> | ImageryProvider,
+            ],
+          ] => !!e?.[1][3],
         ),
     );
 
     const updated =
       !!added.length ||
       !!isCesiumAccessTokenUpdated ||
+      !!isTileProviderUpdated ||
       !isEqual(prevTileKeys.current, tileKeys) ||
       !isEqual(prevZoomLevels.current, zoomLevels) ||
-      rawProviders.some(p => p.tile && (p.prevType !== p.tile.type || p.prevUrl !== p.tile.url));
+      rawProviders.some(
+        p =>
+          p.tile &&
+          (p.prevType !== p.tile.type ||
+            p.prevUrl !== p.tile.url ||
+            p.prevIonAssetId !== p.tile.cesiumIonAssetId),
+      );
 
     prevTileKeys.current = tileKeys;
     prevZoomLevels.current = zoomLevels;
     prevCesiumIonAccessToken.current = cesiumIonAccessToken;
+    prevCustomProvider.current = customProvider;
 
     return { providers, updated };
-  }, [cesiumIonAccessToken, tiles, tileKeys, newTile, zoomLevels]);
+  }, [cesiumIonAccessToken, customProvider, tiles, tileKeys, newTile, zoomLevels]);
 
   prevProviders.current = providers;
   return { providers, updated };

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

@@ -11,13 +11,27 @@ import {
 import { JapanGSIOptimalBVmapLabelImageryProvider } from "./labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryProvider";
 
 const PRESET_TILE_TYPES = [
-  "default",
-  "default_label",
-  "default_road",
+  // Dynamic Cesium Ion asset — asset ID supplied per-tile via cesiumIonAssetId field
+  "cesium_ion",
+
+  // Public presets — always available, no auth required
   "open_street_map",
-  "black_marble",
   "japan_gsi_standard",
+  "stamen_watercolor",
+  "carto_light",
   "url",
+
+  // Cesium Ion presets — require user-provided Ion token (scene.default.ion)
+  "cesium_ion_default",
+  "cesium_ion_labelled",
+  "cesium_ion_road",
+  "cesium_ion_earth_at_night",
+
+  // Legacy aliases — kept for backward compatibility with existing apps
+  "default", // → cesium_ion_default
+  "default_road", // → cesium_ion_road
+  "default_label", // → cesium_ion_labelled
+  "black_marble", // → cesium_ion_earth_at_night
 ];
 
 export type PresetTileType = (typeof PRESET_TILE_TYPES)[number];
@@ -26,35 +40,61 @@ export const isValidPresetTileType = (type: string | undefined): type is PresetT
   return PRESET_TILE_TYPES.includes(type as PresetTileType);
 };
 
+export type TileOptions = {
+  url?: string;
+  cesiumIonAccessToken?: string;
+  cesiumIonAssetId?: number | string;
+  heatmap?: boolean;
+  tile_zoomLevel?: number[];
+};
+
 export const tiles = {
-  default: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
-  default_label: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL_WITH_LABELS, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
-  default_road: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(IonWorldImageryStyle.ROAD, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
+  // --- Dynamic Cesium Ion asset ---
+  // Uses per-tile cesiumIonAssetId; requires cesiumIonAccessToken.
+  cesium_ion: (opts?: TileOptions) => {
+    if (!opts?.cesiumIonAssetId) return null;
+    const NumberAssetId = parseInt(String(opts.cesiumIonAssetId), 10);
+    if (isNaN(NumberAssetId)) {
+      console.warn(`Invalid cesiumIonAssetId: ${opts.cesiumIonAssetId}`);
+      return null;
+    }
+    return IonImageryProvider.fromAssetId(NumberAssetId, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    });
+  },
+
+  // --- Public presets ---
   open_street_map: () =>
     new OpenStreetMapImageryProvider({
       url: "https://tile.openstreetmap.org",
       credit: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }),
-  black_marble: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(3812, {
-      accessToken: cesiumIonAccessToken,
-    }).catch(console.error),
+
   japan_gsi_standard: () =>
     new OpenStreetMapImageryProvider({
       url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
       credit:
         "<a href='https://maps.gsi.go.jp/development/ichiran.html'>国土地理院</a>, Shoreline data is derived from: United States. National Imagery and Mapping Agency. \"Vector Map Level 0 (VMAP0).\" Bethesda, MD: Denver, CO: The Agency; USGS Information Services, 1997.",
     }),
-  url: ({ url, heatmap, tile_zoomLevel } = {}) =>
+
+  stamen_watercolor: () =>
+    new UrlTemplateImageryProvider({
+      url: "https://watercolormaps.collection.cooperhewitt.org/tile/watercolor/{z}/{x}/{y}.jpg",
+      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.",
+      maximumLevel: 16,
+    }),
+
+  carto_light: () =>
+    new UrlTemplateImageryProvider({
+      url: "https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
+      credit:
+        "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors, © <a href='https://carto.com/attributions'>CARTO</a>",
+    }),
+
+  url: ({ url, heatmap, tile_zoomLevel }: TileOptions = {}) =>
     url
       ? new UrlTemplateImageryProvider({
           url,
@@ -63,15 +103,53 @@ export const tiles = {
           maximumLevel: tile_zoomLevel?.[1],
         })
       : null,
-} as {
-  [K in PresetTileType]: (opts?: {
-    url?: string;
-    cesiumIonAccessToken?: string;
-    heatmap?: boolean;
-    tile_zoomLevel?: number[];
-  }) => Promise<ImageryProvider> | ImageryProvider | null;
+
+  // --- Cesium Ion presets ---
+  // Require the user to configure a Cesium Ion access token in their scene (scene.default.ion).
+  cesium_ion_default: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+
+  cesium_ion_labelled: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL_WITH_LABELS, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+
+  cesium_ion_road: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(IonWorldImageryStyle.ROAD, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+
+  cesium_ion_earth_at_night: (opts?: TileOptions) =>
+    IonImageryProvider.fromAssetId(3812, {
+      accessToken: opts?.cesiumIonAccessToken,
+    }).catch(err => {
+      console.error(err);
+      return undefined as unknown as ImageryProvider;
+    }),
+  // --- Legacy aliases ---
+} as any as {
+  [K in PresetTileType]: (opts?: TileOptions) => Promise<ImageryProvider> | ImageryProvider | null;
 };
 
+// Populate legacy aliases after object literal to allow forward references.
+Object.assign(tiles, {
+  default: tiles.cesium_ion_default,
+  default_road: tiles.cesium_ion_road,
+  default_label: tiles.cesium_ion_labelled,
+  black_marble: tiles.cesium_ion_earth_at_night,
+});
+
 export const labelTiles = {
   japan_gsi_optimal_bvmap: (params: {
     url: string;

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

@@ -42,23 +42,23 @@ const defaultMatcher = new StringMatcher()
     #endif
     vec4 color = computeDayColor(initialColor`,
   );
-  // Note: Commented out erase() call as it's not needed for Cesium 1.118.x
-  // The replace() above already handles the material code modification
-  // .erase([
-  //   "#ifdef APPLY_MATERIAL",
-  //   "czm_materialInput materialInput;",
-  //   "materialInput.st = v_textureCoordinates.st;",
-  //   "materialInput.normalEC = normalize(v_normalEC);",
-  //   "materialInput.positionToEyeEC = -v_positionEC;",
-  //   "materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_normalEC));",
-  //   "materialInput.slope = v_slope;",
-  //   "materialInput.height = v_height;",
-  //   "materialInput.aspect = v_aspect;",
-  //   "czm_material material = czm_getMaterial(materialInput);",
-  //   "vec4 materialColor = vec4(material.diffuse, material.alpha);",
-  //   "color = alphaBlend(materialColor, color);",
-  //   "#endif",
-  // ]);
+// Note: Commented out erase() call as it's not needed for Cesium 1.118.x
+// The replace() above already handles the material code modification
+// .erase([
+//   "#ifdef APPLY_MATERIAL",
+//   "czm_materialInput materialInput;",
+//   "materialInput.st = v_textureCoordinates.st;",
+//   "materialInput.normalEC = normalize(v_normalEC);",
+//   "materialInput.positionToEyeEC = -v_positionEC;",
+//   "materialInput.tangentToEyeMatrix = czm_eastNorthUpToEyeCoordinates(v_positionMC, normalize(v_normalEC));",
+//   "materialInput.slope = v_slope;",
+//   "materialInput.height = v_height;",
+//   "materialInput.aspect = v_aspect;",
+//   "czm_material material = czm_getMaterial(materialInput);",
+//   "vec4 materialColor = vec4(material.diffuse, material.alpha);",
+//   "color = alphaBlend(materialColor, color);",
+//   "#endif",
+// ]);
 
 function makeGlobeShadersDirty(globe: Globe): void {
   // Invoke the internal makeShadersDirty() by setting a material to globe to

package/src/engines/Cesium/hooks.ts

@@ -1,7 +1,6 @@
 import {
   Entity,
   Cesium3DTileFeature,
-  Ion,
   Cesium3DTileset,
   JulianDate,
   Cesium3DTilePointFeature,
@@ -28,6 +27,7 @@ import { e2eAccessToken, setE2ECesiumViewer } from "../../e2eConfig";
 import { ComputedFeature, DataType, SelectedFeatureInfo, LatLng, Camera } from "../../mantle";
 import {
   Credits,
+  CustomProviderConfig,
   LayerLoadEvent,
   LayerSelectWithRectEnd,
   LayerSelectWithRectMove,
@@ -70,6 +70,7 @@ export default ({
   selectedLayerId,
   selectionReason,
   meta,
+  customProvider,
   layersRef,
   featureFlags,
   timelineManagerRef,
@@ -102,6 +103,7 @@ export default ({
   layersRef?: RefObject<LayersRef | null>;
   selectionReason?: LayerSelectionReason;
   meta?: Record<string, unknown>;
+  customProvider?: CustomProviderConfig;
   featureFlags: number;
   timelineManagerRef?: TimelineManagerRef;
   isLayerDraggable?: boolean;
@@ -137,7 +139,7 @@ export default ({
   const cesiumIonAccessToken =
     typeof meta?.cesiumIonAccessToken === "string" && meta.cesiumIonAccessToken
       ? meta.cesiumIonAccessToken
-      : Ion.defaultAccessToken;
+      : undefined;
 
   // expose ref
   const engineAPI = useEngineRef(ref, cesium);
@@ -674,6 +676,7 @@ export default ({
     () => ({
       selectionReason,
       timelineManagerRef,
+      customProvider,
       flyTo: engineAPI.flyTo,
       getCamera: engineAPI.getCamera,
       onLayerEdit,
@@ -688,11 +691,12 @@ export default ({
     }),
     [
       selectionReason,
+      timelineManagerRef,
+      customProvider,
       engineAPI,
       onLayerEdit,
       onLayerVisibility,
       onLayerLoad,
-      timelineManagerRef,
       updateCredits,
     ],
   );
@@ -730,7 +734,13 @@ export default ({
 
   useLayerDragDrop({ cesium, onLayerDrag, onLayerDrop, isLayerDraggable });
 
-  useExplicitRender({ cesium, requestingRenderMode, isLayerDragging, shouldRender, property });
+  useExplicitRender({
+    cesium,
+    requestingRenderMode,
+    isLayerDragging,
+    shouldRender,
+    property,
+  });
 
   const {
     cameraViewBoundaries,

package/src/engines/Cesium/index.tsx

@@ -47,6 +47,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     shouldRender,
     layerSelectionReason,
     meta,
+    customProvider,
     displayCredits,
     layersRef,
     featureFlags,
@@ -96,6 +97,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
     selectedLayerId,
     selectionReason: layerSelectionReason,
     meta,
+    customProvider,
     layersRef,
     featureFlags,
     timelineManagerRef,
@@ -167,6 +169,7 @@ const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
       <ImageryLayers
         tiles={property?.tiles}
         cesiumIonAccessToken={cesiumIonAccessToken}
+        customProvider={customProvider}
         onTilesChange={handleTilesChange}
       />
       <LabelImageryLayers tileLabels={property?.tileLabels} />
@@ -293,5 +296,14 @@ export const engine: Engine = {
   featureComponent: Feature,
   clusterComponent: Cluster,
   sketchComponent: Sketch,
-  delegatedDataTypes: ["czml", "wms", "mvt", "3dtiles", "osm-buildings", "kml"],
+  delegatedDataTypes: [
+    "czml",
+    "wms",
+    "mvt",
+    "3dtiles",
+    "osm-buildings",
+    "reearth-buildings",
+    "google-photorealistic",
+    "kml",
+  ],
 };

package/src/mantle/types/index.ts

@@ -76,6 +76,7 @@ export type Data = {
   updateInterval?: number; // milliseconds
   parameters?: Record<string, any>;
   idProperty?: string;
+  provider?: string;
   serviceTokens?: {
     googleMapApiKey?: string;
   };
@@ -107,6 +108,7 @@ export type DataType =
   | "geojson"
   | "3dtiles"
   | "osm-buildings"
+  | "reearth-buildings"
   | "google-photorealistic"
   | "czml"
   | "csv"