@reearth/core 0.0.7-alpha.22 → 0.0.7-alpha.24

package/dist/index.d.ts

@@ -548,7 +548,7 @@ export declare type EngineRef = {
     isPositionVisible: (position: [x: number, y: number, z: number]) => boolean;
     setView: (camera: CameraPosition) => void;
     toWindowPosition: (position: [x: number, y: number, z: number]) => [x: number, y: number] | undefined;
-    getExtrudedHeight: (position: [x: number, y: number, z: number], windowPosition: [x: number, y: number]) => number | undefined;
+    getExtrudedHeight: (position: [x: number, y: number, z: number], windowPosition: [x: number, y: number], allowNegative?: boolean) => number | undefined;
     getExtrudedPoint: (position: [x: number, y: number, z: number], extrutedHeight: number) => Position3d | undefined;
     getSurfaceDistance: (point1: Cartesian3, point2: Cartesian3) => number | undefined;
     equalsEpsilon2d: (point1: Position2d, point2: Position2d, relativeEpsilon: number | undefined, absoluteEpsilon: number | undefined) => boolean;
@@ -859,7 +859,7 @@ declare type InfoboxProperty = {
 
 export declare const INTERACTION_MODES: Record<InteractionModeType, number>;
 
-export declare type InteractionModeType = "default" | "move" | "selection" | "sketch";
+export declare type InteractionModeType = "default" | "move" | "selection" | "sketch" | "spatialId";
 
 export declare function isSketchType(value: unknown): value is SketchType;
 
@@ -1102,6 +1102,7 @@ export declare type MapRef = {
     engine: WrappedRef<EngineRef>;
     layers: WrappedRef<LayersRef>;
     sketch: WrappedRef<SketchRef>;
+    spatialId?: WrappedRef<SpatialIdRef>;
     timeline?: TimelineManagerRef;
 };
 
@@ -1291,6 +1292,7 @@ export declare type PolygonAppearance = {
     stroke?: boolean;
     strokeColor?: string;
     strokeWidth?: number;
+    height?: number;
     heightReference?: "none" | "clamp" | "relative";
     shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
     lineJoin?: CanvasLineJoin;
@@ -1595,6 +1597,42 @@ export declare type Spacing = {
     top: number;
 };
 
+declare type SpatialIdPickSpaceOptions = {
+    zoom?: number;
+    maxHeight?: number;
+    color?: string;
+    dataOnly?: boolean;
+    rightClickToExit?: boolean;
+};
+
+declare type SpatialIdRef = {
+    pickSpace: (options?: SpatialIdPickSpaceOptions) => void;
+    exitPickSpace: () => void;
+    onSpacePick: (cb: (space: SpatialIdSpaceData) => void) => void;
+};
+
+declare type SpatialIdSpaceData = {
+    id: string;
+    center: {
+        lat: number;
+        lng: number;
+        alt?: number;
+    };
+    alt: number;
+    zoom: number;
+    zfxy: {
+        z: number;
+        f: number;
+        x: number;
+        y: number;
+    };
+    zfxyStr: string;
+    tilehash: string;
+    hilbertTilehash: string;
+    hilbertIndex: string;
+    vertices: [number, number, number][];
+};
+
 export declare type StyleExpression = ConditionsExpression | string;
 
 export declare type SunProperty = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.22",
+  "version": "0.0.7-alpha.24",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",
@@ -38,12 +38,14 @@
     "@radix-ui/react-icons": "1.3.0",
     "@radix-ui/react-select": "2.1.1",
     "@radix-ui/react-separator": "1.1.0",
+    "@radix-ui/react-slider": "1.2.2",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-switch": "1.1.0",
     "@radix-ui/react-toggle": "1.1.0",
     "@reearth/cesium-mvt-imagery-provider": "1.5.4",
     "@rot1024/use-transition": "1.0.0",
     "@seznam/compose-react-refs": "1.0.6",
+    "@spatial-id/javascript-sdk": "https://github.com/spatial-id/javascript-sdk",
     "@turf/invariant": "6.5.0",
     "@turf/turf": "6.5.0",
     "@types/proj4": "2.5.5",

package/src/Map/Sketch/hooks.ts

@@ -71,6 +71,7 @@ export default function ({
   ref,
   engineRef,
   layersRef,
+  interactionMode,
   selectedFeature,
   overrideInteractionMode,
   onSketchTypeChange,
@@ -333,6 +334,7 @@ export default function ({
   useWindowEvent("keydown", event => {
     if (type === undefined) return;
     if (event.code === "Space") {
+      tempSwitchToMoveMode.current = true;
       setDisableInteraction(true);
       overrideInteractionMode?.("move");
     } else {
@@ -360,6 +362,9 @@ export default function ({
     if (event.code === "Space") {
       overrideInteractionMode?.("sketch");
       setDisableInteraction(false);
+      if (tempSwitchToMoveMode.current) {
+        tempSwitchToMoveMode.current = false;
+      }
     }
   });
 
@@ -376,9 +381,17 @@ export default function ({
   overrideInteractionModeRef.current = overrideInteractionMode;
   const onSketchTypeChangeRef = useRef(onSketchTypeChange);
   onSketchTypeChangeRef.current = onSketchTypeChange;
+  const interactionModeRef = useRef(interactionMode);
+  interactionModeRef.current = interactionMode;
 
   useEffect(() => {
-    overrideInteractionModeRef.current?.(type || sketchEditingFeature ? "sketch" : "default");
+    overrideInteractionModeRef.current?.(
+      type || sketchEditingFeature
+        ? "sketch"
+        : interactionModeRef.current === "sketch"
+          ? "default"
+          : interactionModeRef.current,
+    );
   }, [type, sketchEditingFeature]);
 
   const isEditingRef = useRef(isEditing);
@@ -393,6 +406,19 @@ export default function ({
     }
   }, [type]);
 
+  const typeRef = useRef(type);
+  typeRef.current = type;
+  useEffect(() => {
+    if (tempSwitchToMoveMode.current) return;
+    if (interactionMode !== "sketch") {
+      if (isEditingRef.current) {
+        cancelEditRef.current();
+      } else if (typeRef.current !== undefined) {
+        updateType(undefined);
+      }
+    }
+  }, [interactionMode, updateType]);
+
   // Edit
   const onEditFeatureChangeCbs = useRef<SketchEditFeatureChangeCb[]>([]);
   const onEditFeatureChange = useCallback((cb: SketchEditFeatureChangeCb) => {
@@ -569,8 +595,8 @@ export default function ({
   useEffect(() => {
     return window.addEventListener("keydown", event => {
       if (event.code === "Space" && stateRef.current.matches("editing")) {
-        overrideInteractionMode?.("move");
         tempSwitchToMoveMode.current = true;
+        overrideInteractionMode?.("move");
       } else if (event.code === "Delete" && stateRef.current.matches("editing")) {
         handleDeleteControlPointRef.current();
       }

package/src/Map/SpatialId/hooks.ts

@@ -0,0 +1,293 @@
+import {
+  ForwardedRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { RefObject } from "use-callback-ref/dist/es5/types";
+
+import { InteractionModeType } from "../../Visualizer";
+import { EngineRef, MouseEventProps } from "../types";
+
+import {
+  SpatialIdRef,
+  SpatialIdSpacePickingState,
+  SpatialIdSpaceType,
+  SpatialIdSpaceData,
+  SpatialIdPickSpaceOptions,
+} from "./types";
+import { createSpatialIdFloorSpaces, createSpatialIdSpace, getSpaceData } from "./utils";
+
+type Props = {
+  ref: ForwardedRef<SpatialIdRef>;
+  engineRef: RefObject<EngineRef>;
+  terrainEnabled?: boolean;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onMount?: () => void;
+};
+
+export const SPATIALID_DEFAULT_ZOOM = 20;
+export const SPATIALID_DEFAULT_MAX_HEIGHT = 1000;
+export const SPATIALID_DEFAULT_COLOR = "#00bebe";
+export const SPATIALID_DEFAULT_DATA_ONLY = false;
+export const SPATIALID_DEFAULT_RIGHT_CLICK_TO_EXIT = true;
+
+export default ({
+  ref,
+  engineRef,
+  terrainEnabled,
+  interactionMode,
+  overrideInteractionMode,
+  onMount,
+}: Props) => {
+  const [state, setState] = useState<SpatialIdSpacePickingState>("idle");
+
+  const [spatialIdSpaces, setSpatialIdSpaces] = useState<SpatialIdSpaceType[]>([]);
+  const [floorSpaces, setFloorSpaces] = useState<SpatialIdSpaceType[]>([]);
+  const [selectorSpace, setSelectorSpace] = useState<SpatialIdSpaceType | null>(null);
+
+  const spaces = useMemo(() => {
+    return [...spatialIdSpaces, ...floorSpaces, ...(selectorSpace ? [selectorSpace] : [])];
+  }, [spatialIdSpaces, floorSpaces, selectorSpace]);
+
+  const [basePosition, setBasePosition] = useState<[number, number, number] | null>(null);
+  const [baseCoordinate, setBaseCoordinate] = useState<[number, number, number] | null>(null);
+
+  const [pickOptions, setPickOptions] = useState<Required<SpatialIdPickSpaceOptions>>({
+    zoom: SPATIALID_DEFAULT_ZOOM,
+    maxHeight: SPATIALID_DEFAULT_MAX_HEIGHT,
+    color: SPATIALID_DEFAULT_COLOR,
+    dataOnly: SPATIALID_DEFAULT_DATA_ONLY,
+    rightClickToExit: SPATIALID_DEFAULT_RIGHT_CLICK_TO_EXIT,
+  });
+
+  const pickSpace = useCallback(
+    (options?: SpatialIdPickSpaceOptions) => {
+      setState("coordinate");
+      setPickOptions(prev => ({ ...prev, ...options }));
+      overrideInteractionMode?.("spatialId");
+    },
+    [overrideInteractionMode],
+  );
+
+  const interactionModeRef = useRef(interactionMode);
+  interactionModeRef.current = interactionMode;
+
+  const finishPicking = useCallback(() => {
+    setState("idle");
+    setSelectorSpace(null);
+    setBasePosition(null);
+    setBaseCoordinate(null);
+    setFloorSpaces([]);
+    overrideInteractionMode?.(
+      interactionModeRef.current === "spatialId"
+        ? "default"
+        : interactionModeRef.current ?? "default",
+    );
+    engineRef.current?.requestRender();
+  }, [overrideInteractionMode, engineRef]);
+
+  // handle events
+  const handleMouseUp = useCallback(
+    (props: MouseEventProps) => {
+      if (state === "idle") return;
+      if (tempSwitchToMoveMode.current) return;
+
+      if (state === "coordinate") {
+        if (!selectorSpace || props.lat === undefined || props.lng === undefined) return;
+        setState("floor");
+        setBaseCoordinate([props.lng, props.lat, terrainEnabled ? props.height ?? 0 : 0]);
+        setBasePosition(
+          engineRef.current?.toXYZ(props.lng, props.lat, props.height ?? 0, {
+            useGlobeEllipsoid: !terrainEnabled,
+          }) ?? null,
+        );
+
+        setSelectorSpace(prev =>
+          prev ? { ...prev, type: "selector", color: pickOptions.color } : null,
+        );
+
+        const floorSpaces = createSpatialIdFloorSpaces(
+          selectorSpace.space,
+          pickOptions.maxHeight,
+          pickOptions.color,
+        );
+        setFloorSpaces(floorSpaces);
+      } else if (state === "floor") {
+        if (!selectorSpace) return;
+
+        const confirmedSpace: SpatialIdSpaceType = {
+          ...selectorSpace,
+          type: "confirmed",
+          color: pickOptions.color,
+        };
+
+        if (!pickOptions.dataOnly) {
+          setSpatialIdSpaces(prev => [...prev, confirmedSpace]);
+        }
+
+        finishPicking();
+
+        const spaceData = getSpaceData(confirmedSpace.space);
+        onSpacePickEvents.current.forEach(cb => cb(spaceData));
+      }
+    },
+    [state, terrainEnabled, engineRef, selectorSpace, pickOptions, finishPicking],
+  );
+
+  const handleMouseMove = useCallback(
+    (props: MouseEventProps) => {
+      if (state === "idle") return;
+      if (tempSwitchToMoveMode.current) return;
+
+      if (state === "coordinate") {
+        if (props.lat === undefined || props.lng === undefined) return;
+
+        const newSpace = createSpatialIdSpace(
+          props.lng,
+          props.lat,
+          terrainEnabled ? props.height ?? 0 : 0,
+          pickOptions.zoom,
+        );
+
+        if (newSpace.space.id === selectorSpace?.space.id) return;
+
+        setSelectorSpace({ ...newSpace, type: "coordinate", color: pickOptions.color });
+      } else if (state === "floor") {
+        if (
+          props.x === undefined ||
+          props.y === undefined ||
+          basePosition === null ||
+          baseCoordinate === null
+        )
+          return;
+
+        const height =
+          engineRef.current?.getExtrudedHeight(basePosition, [props.x, props.y], true) ?? 0;
+
+        if (baseCoordinate[2] + height > pickOptions.maxHeight) return;
+
+        const newSpace = createSpatialIdSpace(
+          baseCoordinate[0],
+          baseCoordinate[1],
+          baseCoordinate[2] + height,
+          pickOptions.zoom,
+        );
+
+        if (newSpace.space.id === selectorSpace?.space.id || newSpace.space.zfxy.f < 0) return;
+
+        setSelectorSpace({ ...newSpace, type: "selector", color: pickOptions.color });
+      }
+    },
+    [state, selectorSpace, basePosition, baseCoordinate, engineRef, terrainEnabled, pickOptions],
+  );
+
+  const handleMouseRightClick = useCallback(() => {
+    if (state === "idle") return;
+    if (state === "coordinate" && pickOptions.rightClickToExit) {
+      finishPicking();
+    } else if (state === "floor") {
+      setSelectorSpace(null);
+      setBasePosition(null);
+      setBaseCoordinate(null);
+      setFloorSpaces([]);
+      setState("coordinate");
+    }
+    engineRef.current?.requestRender();
+  }, [state, pickOptions, engineRef, finishPicking]);
+
+  // bind mouse events
+  const eventsBinded = useRef(false);
+
+  const handleMouseUpRef = useRef(handleMouseUp);
+  handleMouseUpRef.current = handleMouseUp;
+  const handleMouseUpForRef = useCallback((props: MouseEventProps) => {
+    handleMouseUpRef.current(props);
+  }, []);
+
+  const handleMouseMoveRef = useRef(handleMouseMove);
+  handleMouseMoveRef.current = handleMouseMove;
+  const handleMouseMoveForRef = useCallback((props: MouseEventProps) => {
+    handleMouseMoveRef.current(props);
+  }, []);
+
+  const handleMouseRightClickRef = useRef(handleMouseRightClick);
+  handleMouseRightClickRef.current = handleMouseRightClick;
+  const handleMouseRightClickForRef = useCallback(() => {
+    handleMouseRightClickRef.current();
+  }, []);
+
+  useEffect(() => {
+    if (eventsBinded.current || !engineRef.current) return;
+    eventsBinded.current = true;
+    engineRef.current.onMouseUp(handleMouseUpForRef);
+    engineRef.current.onMouseMove(handleMouseMoveForRef);
+    engineRef.current.onRightClick(handleMouseRightClickForRef);
+  }, [engineRef, handleMouseUpForRef, handleMouseMoveForRef, handleMouseRightClickForRef]);
+
+  // cancel picking when interaction mode changes
+  const stateRef = useRef(state);
+  stateRef.current = state;
+  const finishPickingRef = useRef(finishPicking);
+  finishPickingRef.current = finishPicking;
+  useEffect(() => {
+    if (tempSwitchToMoveMode.current) return;
+    if (interactionMode !== "spatialId" && stateRef.current !== "idle") {
+      finishPickingRef.current();
+    }
+  }, [interactionMode]);
+
+  // events
+  const onSpacePickEvents = useRef<((space: SpatialIdSpaceData) => void)[]>([]);
+
+  const bindEventOnSpacePick = useCallback((cb: (space: SpatialIdSpaceData) => void) => {
+    onSpacePickEvents.current.push(cb);
+  }, []);
+
+  // ref
+  useImperativeHandle(
+    ref,
+    () => ({
+      pickSpace,
+      onSpacePick: bindEventOnSpacePick,
+      exitPickSpace: finishPicking,
+    }),
+    [pickSpace, bindEventOnSpacePick, finishPicking],
+  );
+
+  // press space to move
+  const tempSwitchToMoveMode = useRef(false);
+  useEffect(() => {
+    const handleKeydown = (e: KeyboardEvent) => {
+      if (e.code === "Space" && stateRef.current !== "idle") {
+        tempSwitchToMoveMode.current = true;
+        overrideInteractionMode?.("move");
+      }
+    };
+    window.addEventListener("keydown", handleKeydown);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+    };
+  }, [overrideInteractionMode]);
+
+  useEffect(() => {
+    return window.addEventListener("keyup", e => {
+      if (e.code === "Space" && tempSwitchToMoveMode.current) {
+        tempSwitchToMoveMode.current = false;
+        overrideInteractionMode?.("spatialId");
+      }
+    });
+  }, [overrideInteractionMode]);
+
+  useEffect(() => {
+    onMount?.();
+  }, [onMount]);
+
+  return {
+    spaces,
+  };
+};

package/src/Map/SpatialId/index.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, ForwardRefRenderFunction } from "react";
+import { RefObject } from "use-callback-ref/dist/es5/types";
+
+import SpatialIdSpace from "../../engines/Cesium/SpatialId";
+import { InteractionModeType } from "../../Visualizer";
+import { EngineRef } from "../types";
+
+import useHooks from "./hooks";
+import { SpatialIdRef } from "./types";
+
+type SpatialIdProps = {
+  engineRef: RefObject<EngineRef>;
+  terrainEnabled?: boolean;
+  interactionMode?: InteractionModeType;
+  overrideInteractionMode?: (mode: InteractionModeType) => void;
+  onMount?: () => void;
+};
+
+const SpatialId: ForwardRefRenderFunction<SpatialIdRef, SpatialIdProps> = (
+  { engineRef, terrainEnabled, interactionMode, overrideInteractionMode, onMount },
+  ref,
+) => {
+  const { spaces } = useHooks({
+    ref,
+    engineRef,
+    terrainEnabled,
+    interactionMode,
+    overrideInteractionMode,
+    onMount,
+  });
+  return spaces.length > 0
+    ? spaces.map(space => <SpatialIdSpace key={space.id} space={space} />)
+    : null;
+};
+
+export default forwardRef(SpatialId);

package/src/Map/SpatialId/types.ts

@@ -0,0 +1,45 @@
+import { Space } from "@spatial-id/javascript-sdk";
+
+export type SpatialIdSpaceType = {
+  id: string;
+  space: Space;
+  wsen: [number, number, number, number];
+  height: number;
+  extrudedHeight: number;
+  type?: "selector" | "floor" | "coordinate" | "confirmed";
+  color?: string;
+};
+
+export type SpatialIdPickSpaceOptions = {
+  zoom?: number;
+  maxHeight?: number;
+  color?: string;
+  dataOnly?: boolean;
+  rightClickToExit?: boolean;
+};
+
+export type SpatialIdRef = {
+  pickSpace: (options?: SpatialIdPickSpaceOptions) => void;
+  exitPickSpace: () => void;
+  onSpacePick: (cb: (space: SpatialIdSpaceData) => void) => void;
+};
+
+export type SpatialIdSpacePickingState = "idle" | "coordinate" | "floor";
+
+export type SpatialIdSpaceData = {
+  id: string;
+  center: { lat: number; lng: number; alt?: number };
+  alt: number;
+  zoom: number;
+  zfxy: {
+    z: number;
+    f: number;
+    x: number;
+    y: number;
+  };
+  zfxyStr: string;
+  tilehash: string;
+  hilbertTilehash: string;
+  hilbertIndex: string;
+  vertices: [number, number, number][];
+};

package/src/Map/SpatialId/utils.ts

@@ -0,0 +1,79 @@
+import { Space } from "@spatial-id/javascript-sdk";
+import { v4 as uuid } from "uuid";
+
+import { SPATIALID_DEFAULT_COLOR, SPATIALID_DEFAULT_MAX_HEIGHT } from "./hooks";
+import { SpatialIdSpaceType, SpatialIdSpaceData } from "./types";
+
+const getRectangeParamsFromSpace = (space: Space) => {
+  const vertices = space.vertices3d();
+  const wsen: [number, number, number, number] = [
+    vertices[0][0],
+    vertices[1][1],
+    vertices[2][0],
+    vertices[3][1],
+  ];
+  const height = vertices[0][2];
+  const extrudedHeight = vertices[4][2];
+  return { wsen, height, extrudedHeight };
+};
+
+export const createSpatialIdSpace = (
+  lng: number,
+  lat: number,
+  alt: number,
+  zoom: number,
+): SpatialIdSpaceType => {
+  const space = new Space({ lat, lng, alt }, zoom);
+  const { wsen, height, extrudedHeight } = getRectangeParamsFromSpace(space);
+
+  return {
+    id: uuid(),
+    space,
+    wsen,
+    height,
+    extrudedHeight,
+  };
+};
+
+export const createSpatialIdFloorSpaces = (
+  space: Space,
+  maxHeight = SPATIALID_DEFAULT_MAX_HEIGHT,
+  color = SPATIALID_DEFAULT_COLOR,
+) => {
+  const floorSpaces: SpatialIdSpaceType[] = [];
+  const { height, extrudedHeight } = getRectangeParamsFromSpace(space);
+  const heightStep = extrudedHeight - height;
+  for (let h = 0; h < maxHeight; h += heightStep) {
+    const fSpace = new Space({ lat: space.center.lat, lng: space.center.lng, alt: h }, space.zoom);
+    const {
+      wsen: fWsen,
+      height: fHeight,
+      extrudedHeight: fExtrudedHeight,
+    } = getRectangeParamsFromSpace(fSpace);
+    floorSpaces.push({
+      id: uuid(),
+      space: fSpace,
+      wsen: fWsen,
+      height: fHeight,
+      extrudedHeight: fExtrudedHeight,
+      type: "floor",
+      color,
+    });
+  }
+  return floorSpaces;
+};
+
+export const getSpaceData = (space: Space): SpatialIdSpaceData => {
+  return {
+    id: space.id,
+    center: space.center,
+    alt: space.alt,
+    zoom: space.zoom,
+    zfxy: space.zfxy,
+    zfxyStr: space.zfxyStr,
+    tilehash: space.tilehash,
+    hilbertTilehash: space.hilbertTilehash,
+    hilbertIndex: space.hilbertIndex.toString(),
+    vertices: space.vertices3d(),
+  };
+};

package/src/Map/hooks.ts

@@ -3,6 +3,7 @@ import { useImperativeHandle, useRef, type Ref, useState, useCallback, useEffect
 import { SelectedFeatureInfo } from "../mantle";
 
 import { type MapRef, mapRef } from "./ref";
+import { SpatialIdRef } from "./SpatialId/types";
 import type {
   EngineRef,
   LayersRef,
@@ -42,10 +43,16 @@ export default function ({
   onMount?: () => void;
   onAPIReady?: () => void;
 }) {
-  const [mapAPIReady, setMapAPIReady] = useState({ engine: false, layers: false, sketch: false });
+  const [mapAPIReady, setMapAPIReady] = useState({
+    engine: false,
+    layers: false,
+    sketch: false,
+    spatialId: false,
+  });
   const engineRef = useRef<EngineRef>(null);
   const layersRef = useRef<LayersRef>(null);
   const sketchRef = useRef<SketchRef>(null);
+  const spatialIdRef = useRef<SpatialIdRef>(null);
   const requestingRenderMode = useRef<RequestingRenderMode>(NO_REQUEST_RENDER);
 
   useImperativeHandle(
@@ -55,13 +62,20 @@ export default function ({
         engineRef,
         layersRef,
         sketchRef,
+        spatialIdRef,
         timelineManagerRef,
       }),
     [timelineManagerRef],
   );
 
   useEffect(() => {
-    if (onAPIReady && mapAPIReady.engine && mapAPIReady.layers && mapAPIReady.sketch) {
+    if (
+      onAPIReady &&
+      mapAPIReady.engine &&
+      mapAPIReady.layers &&
+      mapAPIReady.sketch &&
+      mapAPIReady.spatialId
+    ) {
       onAPIReady?.();
     }
   }, [onAPIReady, mapAPIReady]);
@@ -136,11 +150,15 @@ export default function ({
   const handleSketchMount = useCallback(() => {
     setMapAPIReady(s => ({ ...s, sketch: true }));
   }, []);
+  const handleSpatialIdMount = useCallback(() => {
+    setMapAPIReady(s => ({ ...s, spatialId: true }));
+  }, []);
 
   return {
     engineRef,
     layersRef,
     sketchRef,
+    spatialIdRef,
     selectedLayer,
     requestingRenderMode,
     handleLayerSelect,
@@ -150,5 +168,6 @@ export default function ({
     handleEngineMount,
     handleLayersMount,
     handleSketchMount,
+    handleSpatialIdMount,
   };
 }