@reearth/core 0.0.7-alpha.6 → 0.0.7-alpha.61

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

@@ -0,0 +1,73 @@
+import { useEffect, useMemo, useRef, type JSX } from "react";
+import { Globe as CesiumGlobe } from "resium";
+
+import type { ViewerProperty } from "../../..";
+import { toColor } from "../../common";
+
+import useTerrainProviderPromise from "./useTerrainProviderPromise";
+
+export type Props = {
+  property?: ViewerProperty;
+  cesiumIonAccessToken?: string;
+  onTerrainProviderChange?: () => void;
+};
+
+export default function Globe({
+  property,
+  cesiumIonAccessToken,
+  onTerrainProviderChange,
+}: Props): JSX.Element | null {
+  const providerPromise = useTerrainProviderPromise({
+    terrain: property?.terrain?.enabled,
+    terrainType: property?.terrain?.type,
+    normal: property?.terrain?.normal,
+    ionAccessToken: property?.assets?.cesium?.terrain?.ionAccessToken || cesiumIonAccessToken,
+    ionAsset: property?.assets?.cesium?.terrain?.ionAsset,
+    ionUrl: property?.assets?.cesium?.terrain?.ionUrl,
+  });
+
+  const baseColor = useMemo(
+    () => toColor(property?.globe?.baseColor),
+    [property?.globe?.baseColor],
+  );
+
+  const lastResolvedProviderRef = useRef<any>(null);
+
+  useEffect(() => {
+    let isCancelled = false;
+
+    providerPromise
+      .then(resolvedProvider => {
+        if (isCancelled) return;
+
+        // Only trigger callback if the resolved provider is actually different
+        if (lastResolvedProviderRef.current !== resolvedProvider) {
+          lastResolvedProviderRef.current = resolvedProvider;
+          onTerrainProviderChange?.();
+        }
+      })
+      .catch(error => {
+        if (!isCancelled) {
+          console.warn("Terrain provider failed to load:", error);
+        }
+      });
+
+    return () => {
+      isCancelled = true;
+    };
+  }, [providerPromise, onTerrainProviderChange]);
+
+  return (
+    <CesiumGlobe
+      baseColor={baseColor}
+      enableLighting={!!property?.globe?.enableLighting}
+      showGroundAtmosphere={property?.globe?.atmosphere?.enabled ?? true}
+      atmosphereLightIntensity={property?.globe?.atmosphere?.lightIntensity}
+      atmosphereSaturationShift={property?.globe?.atmosphere?.saturationShift}
+      atmosphereHueShift={property?.globe?.atmosphere?.hueShift}
+      atmosphereBrightnessShift={property?.globe?.atmosphere?.brightnessShift}
+      terrainProvider={providerPromise}
+      depthTestAgainstTerrain={!!property?.globe?.depthTestAgainstTerrain}
+    />
+  );
+}

package/src/engines/Cesium/core/Globe/useTerrainProviderPromise.ts

@@ -0,0 +1,79 @@
+import {
+  ArcGISTiledElevationTerrainProvider,
+  CesiumTerrainProvider,
+  EllipsoidTerrainProvider,
+  IonResource,
+  TerrainProvider,
+} from "cesium";
+import { useMemo, useRef } from "react";
+
+import { TerrainProperty } from "../../..";
+import { AssetsCesiumProperty } from "../../../../Map";
+
+type TerrainType = NonNullable<TerrainProperty["type"]>;
+
+type ProviderOpts = Pick<TerrainProperty, "normal"> &
+  AssetsCesiumProperty["terrain"] & {
+    terrain?: boolean;
+    terrainType?: TerrainType | null | undefined;
+    ionAccessToken?: string | undefined;
+  };
+
+export default function useTerrainProviderPromise(opts: ProviderOpts) {
+  // Cache promises so we don’t recreate providers on every toggle
+  const cacheRef = useRef(new Map<string, Promise<TerrainProvider>>());
+  const ellipsoidRef = useRef<TerrainProvider>(undefined);
+
+  return useMemo<Promise<TerrainProvider>>(() => {
+    if (!opts.terrain) {
+      // single shared ellipsoid provider
+      if (!ellipsoidRef.current) ellipsoidRef.current = new EllipsoidTerrainProvider();
+      return Promise.resolve(ellipsoidRef.current);
+    }
+
+    const kind = (opts.terrainType ?? "cesium") as TerrainType;
+    const key = makeKey(kind, opts);
+    let p = cacheRef.current.get(key);
+    if (!p) {
+      p = createProvider(kind, opts);
+      cacheRef.current.set(key, p);
+    }
+    return p;
+  }, [opts]);
+}
+
+function makeKey(type: TerrainType, opts: ProviderOpts) {
+  // Key should change when output provider would differ
+  const asset = opts.ionAsset ?? "";
+  const url = opts.ionUrl ?? "";
+  const normal = String(!!opts.normal);
+  return `${type}|asset:${asset}|url:${url}|normal:${normal}`;
+}
+
+function createProvider(type: TerrainType, opts: ProviderOpts): Promise<TerrainProvider> {
+  switch (type) {
+    case "cesium":
+      return CesiumTerrainProvider.fromUrl(
+        IonResource.fromAssetId(1, { accessToken: opts.ionAccessToken }),
+        { requestVertexNormals: !!opts.normal, requestWaterMask: false },
+      ) as Promise<TerrainProvider>;
+
+    case "arcgis":
+      return ArcGISTiledElevationTerrainProvider.fromUrl(
+        "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+      ) as Promise<TerrainProvider>;
+
+    case "cesiumion":
+      if (!opts.ionAsset && !opts.ionUrl) {
+        // Fallback to ellipsoid when misconfigured
+        return Promise.resolve(new EllipsoidTerrainProvider());
+      }
+      return CesiumTerrainProvider.fromUrl(
+        opts.ionUrl ??
+          IonResource.fromAssetId(parseInt(String(opts.ionAsset), 10), {
+            accessToken: opts.ionAccessToken,
+          }),
+        { requestVertexNormals: !!opts.normal },
+      ) as Promise<TerrainProvider>;
+  }
+}

package/src/engines/Cesium/core/Imagery.test.ts

@@ -6,7 +6,7 @@ import { type Tile, useImageryProviders } from "./Imagery";
 test("useImageryProviders", () => {
   const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
   const provider2 = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge2: url }));
-  const presets = { default: provider, foobar: provider2 };
+  const presets = { default: provider, default_label: provider2 };
   const { result, rerender } = renderHook(
     ({ tiles, cesiumIonAccessToken }: { tiles: Tile[]; cesiumIonAccessToken?: string }) =>
       useImageryProviders({
@@ -14,23 +14,28 @@ test("useImageryProviders", () => {
         presets,
         cesiumIonAccessToken,
       }),
-    { initialProps: { tiles: [{ id: "1", type: "default" }] } },
+    { initialProps: { tiles: [{ id: "1", type: "default" }], cesiumIonAccessToken: undefined } },
   );
 
+  const typedRerender = rerender as (props: {
+    tiles: Tile[];
+    cesiumIonAccessToken?: string;
+  }) => void;
+
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.updated).toBe(true);
   expect(provider).toBeCalledTimes(1);
   const prevImageryProvider = result.current.providers["1"][2];
 
   // re-render with same tiles
-  rerender({ tiles: [{ id: "1", type: "default" }] });
+  typedRerender({ tiles: [{ id: "1", type: "default" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
   expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
   expect(provider).toBeCalledTimes(1);
 
   // update a tile URL
-  rerender({ tiles: [{ id: "1", type: "default", url: "a" }] });
+  typedRerender({ tiles: [{ id: "1", type: "default", url: "a" }] });
 
   expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
   expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
@@ -40,7 +45,7 @@ test("useImageryProviders", () => {
   const prevImageryProvider2 = result.current.providers["1"][2];
 
   // add a tile with URL
-  rerender({
+  typedRerender({
     tiles: [
       { id: "2", type: "default" },
       { id: "1", type: "default", url: "a" },
@@ -56,7 +61,7 @@ test("useImageryProviders", () => {
   expect(provider).toBeCalledTimes(3);
 
   // sort tiles
-  rerender({
+  typedRerender({
     tiles: [
       { id: "1", type: "default", url: "a" },
       { id: "2", type: "default" },
@@ -72,7 +77,7 @@ test("useImageryProviders", () => {
   expect(provider).toBeCalledTimes(3);
 
   // delete a tile
-  rerender({
+  typedRerender({
     tiles: [{ id: "1", type: "default", url: "a" }],
     cesiumIonAccessToken: "a",
   });
@@ -85,18 +90,31 @@ test("useImageryProviders", () => {
   expect(provider).toBeCalledTimes(4);
 
   // update a tile type
-  rerender({
-    tiles: [{ id: "1", type: "foobar", url: "u" }],
+  typedRerender({
+    tiles: [{ id: "1", type: "default_label", url: "u" }],
     cesiumIonAccessToken: "a",
   });
 
   expect(result.current.providers).toEqual({
-    "1": ["foobar", "u", { hoge2: "u" }],
+    "1": ["default_label", "u", { hoge2: "u" }],
   });
   expect(result.current.updated).toBe(true);
   expect(provider).toBeCalledTimes(4);
   expect(provider2).toBeCalledTimes(1);
 
-  rerender({ tiles: [] });
+  // update a tile type to unexpected type
+  typedRerender({
+    tiles: [{ id: "1", type: "unexpected_type", url: "u" }],
+  });
+
+  expect(result.current.providers).toEqual({
+    // unexpected type is treated as "default"
+    "1": ["unexpected_type", "u", { hoge: "u" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(5);
+  expect(provider2).toBeCalledTimes(1);
+
+  typedRerender({ tiles: [] });
   expect(result.current.providers).toEqual({});
 });

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

@@ -5,10 +5,10 @@ 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";
+import { isValidPresetTileType, PresetTileType, tiles as tilePresets } from "./presets";
 
 export type ImageryLayerData = {
   id: string;
@@ -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
@@ -85,7 +90,7 @@ export function useImageryProviders({
   tiles?: Tile[];
   cesiumIonAccessToken?: string;
   presets: {
-    [key: string]: (opts?: {
+    [K in PresetTileType]: (opts?: {
       url?: string;
       cesiumIonAccessToken?: string;
       heatmap?: boolean;
@@ -95,7 +100,7 @@ export function useImageryProviders({
 }): { providers: Providers; updated: boolean } {
   const newTile = useCallback(
     (t: Tile, ciat?: string) =>
-      presets[t.type || "default"]({
+      presets[isValidPresetTileType(t.type) ? t.type : "default"]({
         url: t.url,
         cesiumIonAccessToken: ciat,
         heatmap: t.heatmap,
@@ -108,6 +113,15 @@ 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 +183,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/Indicator/Indicator.tsx

@@ -1,7 +1,7 @@
 /// <reference types="vite-plugin-svgr/client" />
 import useTransition from "@rot1024/use-transition";
 import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2, JulianDate } from "cesium";
-import { useEffect, useState } from "react";
+import { useEffect, useState, type JSX } from "react";
 import { useCesium } from "resium";
 
 import type { ViewerProperty } from "../../..";
@@ -74,7 +74,7 @@ export default function Indicator({
       }
 
       if (position) {
-        const pos = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
+        const pos = SceneTransforms.worldToWindowCoordinates(viewer.scene, position);
         setPos(pos);
         setIsVisible(true);
       } else {

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

@@ -12,8 +12,9 @@ import {
   type Ellipsoid,
   type Label,
 } from "@cesium/engine";
+import { DistanceDisplayCondition } from "cesium";
 import { merge, omit } from "lodash-es";
-import { type Feature } from "protomaps";
+import { type Feature } from "protomaps-leaflet";
 import { memo, useCallback, useEffect, useMemo, useRef, type FC } from "react";
 import { useCesium } from "resium";
 import { suspend } from "suspend-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();
 
@@ -211,7 +216,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
         return [];
       }
       return features.filter(
-        (feature): feature is AnnotationFeature =>
+        (feature: Feature): feature is AnnotationFeature =>
           typeof feature.props.vt_code === "number" &&
           // Look for annotations with 3-digits code only.
           // https://maps.gsi.go.jp/help/pdf/vector/optbv_featurecodes.pdf
@@ -228,7 +233,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
       );
     }, [tile, imagery]);
 
-    const labelsRef = useRef<Array<[AnnotationFeature, Label]>>();
+    const labelsRef = useRef<Array<[AnnotationFeature, Label]>>(undefined);
     const scene = cesiumContext?.scene;
 
     const updateVisibility = useCallback(() => {
@@ -266,7 +271,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
       }
       const texts: string[] = [];
       const labels = annotations
-        .map((feature): [AnnotationFeature, Label] | undefined => {
+        .map((feature: AnnotationFeature): [AnnotationFeature, Label] | undefined => {
           const styleOptions = resolveStyle(feature.props.vt_code, style);
           if (styleOptions == null) {
             return undefined;
@@ -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,
           };
@@ -294,7 +301,7 @@ export const JapanGSIOptimalBVmapLabelImagery: FC<JapanGSIOptimalBVmapLabelImage
 
       const removeLabels = (): void => {
         if (!labelCollection.isDestroyed()) {
-          labels.forEach(([, label]) => {
+          labels.forEach(([, label]: [AnnotationFeature, Label]) => {
             labelCollection.remove(label);
           });
         }
@@ -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/JapanGSIOptimalBVmapLabelImageryLayer.tsx

@@ -11,7 +11,8 @@ import {
 import { ImageryLayerProps } from "./types";
 
 export interface LabelImageryLayerProps
-  extends Omit<ImageryLayerProps, "imageryProvider">,
+  extends
+    Omit<ImageryLayerProps, "imageryProvider">,
     JapanGSIOptimalBVmapLabelImageryProviderOptions {
   minimumLevel?: number;
   maximumLevel?: number;

package/src/engines/Cesium/core/labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryProvider.ts

@@ -11,7 +11,7 @@ import {
   type TileDiscardPolicy,
   type TilingScheme,
 } from "@cesium/engine";
-import { TileCache, ZxySource } from "protomaps";
+import { TileCache, ZxySource } from "protomaps-leaflet";
 
 import { getTileCoords, makeKey } from "./helpers";
 
@@ -93,8 +93,7 @@ export abstract class JapanGSIOptimalBVmapImageryProviderBase implements Imagery
   }
 }
 
-export interface JapanGSIOptimalBVmapLabelImageryProviderOptions
-  extends JapanGSIOptimalBVmapImageryProviderBaseOptions {
+export interface JapanGSIOptimalBVmapLabelImageryProviderOptions extends JapanGSIOptimalBVmapImageryProviderBaseOptions {
   url: string;
   minimumDataLevel: number;
   maximumDataLevel: number;
@@ -115,7 +114,7 @@ export class JapanGSIOptimalBVmapLabelImageryProvider extends JapanGSIOptimalBVm
     this.maximumDataLevel = options.maximumDataLevel;
 
     const source = new ZxySource(options.url, false);
-    this.tileCache = new TileCache(source, 1024);
+    this.tileCache = new TileCache(source, 256);
 
     this.image = document.createElement("canvas");
     this.image.width = 1;

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

@@ -1,4 +1,4 @@
-import { type Zxy } from "protomaps";
+import { type Zxy } from "protomaps-leaflet";
 
 import { type ImageryCoords } from "./types";
 

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

@@ -1,7 +1,6 @@
 import { WebMercatorTilingScheme } from "@cesium/engine";
 import {
   ImageryProvider,
-  ArcGisMapServerImageryProvider,
   IonImageryProvider,
   OpenStreetMapImageryProvider,
   IonWorldImageryStyle,
@@ -11,6 +10,22 @@ import {
 
 import { JapanGSIOptimalBVmapLabelImageryProvider } from "./labels/JapanGSIOptimalBVmapVectorMapLabel/JapanGSIOptimalBVmapLabelImageryProvider";
 
+const PRESET_TILE_TYPES = [
+  "default",
+  "default_label",
+  "default_road",
+  "open_street_map",
+  "black_marble",
+  "japan_gsi_standard",
+  "url",
+];
+
+export type PresetTileType = (typeof PRESET_TILE_TYPES)[number];
+
+export const isValidPresetTileType = (type: string | undefined): type is PresetTileType => {
+  return PRESET_TILE_TYPES.includes(type as PresetTileType);
+};
+
 export const tiles = {
   default: ({ cesiumIonAccessToken } = {}) =>
     IonImageryProvider.fromAssetId(IonWorldImageryStyle.AERIAL, {
@@ -24,39 +39,20 @@ 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/",
-      credit:
-        "Copyright: Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
+      url: "https://tile.openstreetmap.org",
+      credit: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
     }),
-  esri_world_topo: () =>
-    ArcGisMapServerImageryProvider.fromUrl(
-      "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-      {
-        credit:
-          "Copyright: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Communit",
-        enablePickFeatures: false,
-      },
-    ).catch(console.error),
   black_marble: ({ cesiumIonAccessToken } = {}) =>
-    IonImageryProvider.fromAssetId(3812, { accessToken: cesiumIonAccessToken }).catch(
-      console.error,
-    ),
+    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 } = {}) =>
     url
@@ -68,7 +64,7 @@ export const tiles = {
         })
       : null,
 } as {
-  [key: string]: (opts?: {
+  [K in PresetTileType]: (opts?: {
     url?: string;
     cesiumIonAccessToken?: string;
     heatmap?: boolean;