@reearth/core 0.0.7-alpha.2 → 0.0.7-alpha.21

package/src/engines/Cesium/Sketch/SurfaceControlPoints.tsx

@@ -1,62 +1,152 @@
-import { Cartesian3, type Color } from "@cesium/engine";
+import { Cartesian3, Color } from "@cesium/engine";
 import { memo, type FC } from "react";
 
+import { DEFAULT_EDIT_COLOR } from "./constants";
 import { ControlPoint } from "./ControlPoint";
 import { type GeometryOptions } from "./createGeometry";
 import { SurfaceMeasurement } from "./SurfaceMeasurement";
 
+import { ControlPointMouseEventHandler } from ".";
+
 export interface SurfaceControlPointsProps {
   geometryOptions: GeometryOptions;
   color?: Color;
+  isEditing?: boolean;
+  selectedControlPointIndex?: number;
+  catchedControlPointIndex?: number;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
 }
 
 const cartesianScratch1 = new Cartesian3();
-const cartesianScratch2 = new Cartesian3();
 
 const SurfaceControlPoints: FC<SurfaceControlPointsProps> = memo(
-  ({ geometryOptions: { type, controlPoints: controlPointsProp }, color }) => {
-    let controlPoints = [...controlPointsProp];
-    let measurementPoints: [Cartesian3, Cartesian3] | undefined;
-    let showLine = false;
+  ({
+    geometryOptions: { type, controlPoints },
+    color,
+    isEditing,
+    catchedControlPointIndex,
+    selectedControlPointIndex,
+    handleControlPointMouseEvent,
+  }) => {
+    const measurements: { points: [Cartesian3, Cartesian3]; showLine: boolean }[] = [];
 
-    if (type === "rectangle" && controlPoints.length === 3) {
-      const [p1, p2, p3] = controlPoints;
-      const projection = Cartesian3.projectVector(
-        Cartesian3.subtract(p3, p1, cartesianScratch1),
-        Cartesian3.subtract(p2, p1, cartesianScratch2),
-        cartesianScratch1,
-      );
-      const offset = Cartesian3.subtract(
-        p3,
-        Cartesian3.add(p1, projection, cartesianScratch1),
-        cartesianScratch2,
-      );
-      const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
-      const p5 = Cartesian3.add(p4, offset, cartesianScratch2);
-      controlPoints = [p1, p2, p5];
-      measurementPoints = [p4, p5];
-      showLine = true;
-    } else if (type === "marker") {
-      measurementPoints = undefined;
-      controlPoints = [];
-    } else if (controlPoints.length >= 2) {
-      measurementPoints = controlPoints.slice(-2) as [Cartesian3, Cartesian3];
-      showLine = type === "circle";
+    if (controlPoints.length >= 2) {
+      if (isEditing) {
+        if (catchedControlPointIndex !== undefined && catchedControlPointIndex !== -1) {
+          switch (type) {
+            case "polyline":
+              if (catchedControlPointIndex > 0) {
+                measurements.push({
+                  points: [
+                    controlPoints[catchedControlPointIndex - 1],
+                    controlPoints[catchedControlPointIndex],
+                  ],
+                  showLine: false,
+                });
+              }
+              if (catchedControlPointIndex < controlPoints.length - 1) {
+                measurements.push({
+                  points: [
+                    controlPoints[catchedControlPointIndex],
+                    controlPoints[catchedControlPointIndex + 1],
+                  ],
+                  showLine: false,
+                });
+              }
+              break;
+            case "circle":
+            case "extrudedCircle":
+              if (catchedControlPointIndex !== 2) {
+                measurements.push({
+                  points: [controlPoints[0], controlPoints[1]],
+                  showLine: true,
+                });
+              }
+              break;
+            case "rectangle":
+            case "extrudedRectangle":
+              if (catchedControlPointIndex <= 1) {
+                measurements.push({
+                  points: [controlPoints[0], controlPoints[1]],
+                  showLine: false,
+                });
+              } else if (catchedControlPointIndex === 2) {
+                const [p1, p2, p3] = controlPoints;
+                const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
+                measurements.push({ points: [p4, p3], showLine: true });
+              }
+              break;
+            case "polygon":
+            case "extrudedPolygon":
+              measurements.push({
+                points: [
+                  controlPoints[catchedControlPointIndex],
+                  catchedControlPointIndex === 0
+                    ? controlPoints[controlPoints.length - 1]
+                    : controlPoints[catchedControlPointIndex - 1],
+                ],
+                showLine: false,
+              });
+              measurements.push({
+                points: [
+                  controlPoints[catchedControlPointIndex],
+                  catchedControlPointIndex === controlPoints.length - 1
+                    ? controlPoints[0]
+                    : controlPoints[catchedControlPointIndex + 1],
+                ],
+                showLine: false,
+              });
+              break;
+            default:
+              break;
+          }
+        }
+      } else {
+        switch (type) {
+          case "rectangle" || "extrudedRectangle":
+            if (controlPoints.length === 2) {
+              measurements.push({
+                points: controlPoints as [Cartesian3, Cartesian3],
+                showLine: true,
+              });
+            } else if (controlPoints.length === 3) {
+              const [p1, p2, p3] = controlPoints;
+              const p4 = Cartesian3.midpoint(p1, p2, cartesianScratch1);
+              measurements.push({ points: [p4, p3], showLine: true });
+            }
+            break;
+          default:
+            measurements.push({
+              points: controlPoints.slice(-2) as [Cartesian3, Cartesian3],
+              showLine: type === "circle",
+            });
+            break;
+        }
+      }
     }
 
     return (
       <>
         {controlPoints.map((controlPoint, index) => (
-          <ControlPoint key={index} position={controlPoint} clampToGround />
+          <ControlPoint
+            key={index}
+            position={controlPoint}
+            index={index}
+            isSelected={selectedControlPointIndex === index}
+            clampToGround
+            isEditing={isEditing}
+            handleControlPointMouseEvent={handleControlPointMouseEvent}
+          />
         ))}
-        {measurementPoints != undefined && (
+        {measurements.map(({ points, showLine }, index) => (
           <SurfaceMeasurement
-            a={measurementPoints[0]}
-            b={measurementPoints[1]}
-            color={color}
+            key={index}
+            a={points[0]}
+            b={points[1]}
+            color={isEditing ? Color.fromCssColorString(DEFAULT_EDIT_COLOR) : color}
             showLine={showLine}
           />
-        )}
+        ))}
       </>
     );
   },

package/src/engines/Cesium/Sketch/constants.ts

@@ -0,0 +1,5 @@
+export const DEFAULT_SKETCH_COLOR = "#00bebe";
+
+export const DEFAULT_EDIT_COLOR = "#3B3CD0";
+export const SELECTED_EDIT_COLOR = "#FF9900";
+export const ADDING_POINT_COLOR = "#3B3CD0";

package/src/engines/Cesium/Sketch/index.tsx

@@ -2,46 +2,61 @@
 
 import { Color } from "@cesium/engine";
 import { Cartesian3 } from "cesium";
-import { type LineString, type MultiPolygon, type Polygon } from "geojson";
 import { memo, useMemo, type FC } from "react";
-import { type RequireExactlyOne } from "type-fest";
 
 import { SketchType } from "../../../Map/Sketch/types";
 import { Position3d } from "../../../types";
 import { convertGeometryToPositionsArray, convertPolygonToHierarchyArray } from "../utils/polygon";
 
+import { DEFAULT_SKETCH_COLOR } from "./constants";
 import { createGeometry, GeometryOptions } from "./createGeometry";
 import ExtrudedControlPoints from "./ExtrudedControlPoints";
 import { ExtrudedPolygonEntity } from "./ExtrudedPolygonEntity";
 import { PolygonEntity } from "./PolygonEntity";
 import { PolylineEntity } from "./PolylineEntity";
+import SurfaceAddingPoints from "./SurfaceAddingPoints";
 import SurfaceControlPoints from "./SurfaceControlPoints";
 
-export type SketchComponentProps = RequireExactlyOne<
-  {
-    geometry?: LineString | Polygon | MultiPolygon | null;
-    geometryOptions?: {
-      type: SketchType;
-      controlPoints: readonly Position3d[];
-    } | null;
-    extrudedHeight?: number;
-    disableShadow?: boolean;
-    color?: string;
-    enableRelativeHeight?: boolean;
-  },
-  "geometry" | "geometryOptions"
->;
+export type SketchComponentProps = {
+  geometryOptions?: {
+    type: SketchType;
+    controlPoints: readonly Position3d[];
+  } | null;
+  extrudedHeight?: number;
+  extrudedPoint?: Position3d;
+  centroidBasePoint?: Position3d;
+  centroidExtrudedPoint?: Position3d;
+  disableShadow?: boolean;
+  color?: string;
+  isEditing?: boolean;
+  catchedControlPointIndex?: number;
+  catchedExtrudedPoint?: boolean;
+  selectedControlPointIndex?: number;
+  handleControlPointMouseEvent?: ControlPointMouseEventHandler;
+  handleAddControlPoint?: (position: Position3d, index: number) => void;
+};
 
-const DEFAULT_SKETCH_COLOR = "#00bebe";
+export type ControlPointMouseEventHandler = (
+  index: number,
+  isExtrudedPoint: boolean,
+  type: "mousedown" | "click",
+) => void;
 
 const SketchComponent: FC<SketchComponentProps> = memo(
   ({
-    geometry,
     geometryOptions,
     extrudedHeight,
     disableShadow,
     color: stringColor,
-    enableRelativeHeight,
+    isEditing,
+    extrudedPoint,
+    centroidBasePoint,
+    centroidExtrudedPoint,
+    catchedControlPointIndex,
+    catchedExtrudedPoint,
+    selectedControlPointIndex,
+    handleControlPointMouseEvent,
+    handleAddControlPoint,
   }) => {
     const cartesianGeometryOptions: GeometryOptions | null = useMemo(
       () =>
@@ -55,9 +70,8 @@ const SketchComponent: FC<SketchComponentProps> = memo(
     );
 
     const g = useMemo(
-      () =>
-        geometry ?? (cartesianGeometryOptions ? createGeometry(cartesianGeometryOptions) : null),
-      [geometry, cartesianGeometryOptions],
+      () => (cartesianGeometryOptions ? createGeometry(cartesianGeometryOptions) : null),
+      [cartesianGeometryOptions],
     );
 
     const { positionsArray, hierarchyArray } = useMemo(() => {
@@ -82,31 +96,56 @@ const SketchComponent: FC<SketchComponentProps> = memo(
     return (
       <>
         {positionsArray?.map((positions, index) => (
-          <PolylineEntity key={index} dynamic positions={positions} color={color} />
+          <PolylineEntity
+            key={index}
+            dynamic
+            positions={positions}
+            color={color}
+            isEditing={isEditing}
+          />
         ))}
         {hierarchyArray?.map((hierarchy, index) => (
           <PolygonEntity key={index} dynamic hierarchy={hierarchy} color={color} />
         ))}
-        {cartesianGeometryOptions != null && extrudedHeight == null && (
-          <SurfaceControlPoints geometryOptions={cartesianGeometryOptions} color={color} />
+        {cartesianGeometryOptions != null && (!extrudedHeight || isEditing) && (
+          <SurfaceControlPoints
+            geometryOptions={cartesianGeometryOptions}
+            color={color}
+            isEditing={isEditing}
+            catchedControlPointIndex={catchedControlPointIndex}
+            selectedControlPointIndex={selectedControlPointIndex}
+            handleControlPointMouseEvent={handleControlPointMouseEvent}
+          />
+        )}
+        {cartesianGeometryOptions != null && isEditing && (
+          <SurfaceAddingPoints
+            geometryOptions={cartesianGeometryOptions}
+            isEditing={isEditing}
+            handleAddControlPoint={handleAddControlPoint}
+          />
         )}
-        {cartesianGeometryOptions != null && extrudedHeight != null && (
+        {cartesianGeometryOptions != null && extrudedHeight && (
           <ExtrudedControlPoints
             geometryOptions={cartesianGeometryOptions}
             extrudedHeight={extrudedHeight}
+            extrudedPoint={extrudedPoint}
+            centroidBasePoint={centroidBasePoint}
+            centroidExtrudedPoint={centroidExtrudedPoint}
+            catchedExtrudedPoint={catchedExtrudedPoint}
             color={color}
+            isEditing={isEditing}
+            handleControlPointMouseEvent={handleControlPointMouseEvent}
           />
         )}
-        {extrudedHeight != null &&
+        {extrudedHeight &&
           hierarchyArray?.map((hierarchy, index) => (
             <ExtrudedPolygonEntity
               key={index}
-              dynamic
               hierarchy={hierarchy}
               extrudedHeight={extrudedHeight}
               disableShadow={disableShadow}
               color={color}
-              enableRelativeHeight={enableRelativeHeight}
+              isEditing={isEditing}
             />
           ))}
       </>

package/src/engines/Cesium/common.ts

@@ -35,8 +35,10 @@ 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";
@@ -48,7 +50,7 @@ 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";
 
@@ -56,8 +58,7 @@ export const layerIdField = `__reearth_layer_id`;
 
 const defaultImageSize = 50;
 
-export const drawIcon = (
-  c: HTMLCanvasElement,
+const drawIcon = (
   image: HTMLImageElement | undefined,
   w: number,
   h: number,
@@ -68,6 +69,7 @@ export const drawIcon = (
   shadowOffsetX = 0,
   shadowOffsetY = 0,
 ) => {
+  const c = document.createElement("canvas");
   const ctx = c.getContext("2d");
   if (!image || !ctx) return;
 
@@ -104,6 +106,7 @@ export const drawIcon = (
   }
 
   ctx.restore();
+  return c.toDataURL();
 };
 
 export const useIcon = ({
@@ -138,13 +141,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 +546,7 @@ export const colorBlendMode = (colorBlendMode?: "highlight" | "replace" | "mix"
   )[colorBlendMode || ""];
 
 export const colorBlendModeFor3DTile = (
-  colorBlendMode?: "highlight" | "replace" | "mix" | "default",
+  colorBlendMode: "highlight" | "replace" | "mix" = "highlight",
 ) =>
   (
     ({
@@ -553,7 +554,7 @@ export const colorBlendModeFor3DTile = (
       replace: Cesium3DTileColorBlendMode.REPLACE,
       mix: Cesium3DTileColorBlendMode.MIX,
     }) as { [key in string]?: Cesium3DTileColorBlendMode }
-  )[colorBlendMode || ""];
+  )[colorBlendMode]
 
 export const heightReference = (
   heightReference?: "none" | "clamp" | "relative",
@@ -899,3 +900,35 @@ export function getExtrudedHeight(
   }
   return;
 }
+
+export function getCredits(viewer: Viewer) {
+  if (!viewer) return;
+  const creditDisplay = viewer.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: {
+    html?: string;
+  }[] = [
+    ...(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,
+    })),
+  ];
+
+  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

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/",