@map-colonies/react-components 3.10.4 → 3.12.0

package/src/lib/cesium-map/map.tsx

@@ -4,7 +4,9 @@ import React, {
   useEffect,
   useState,
   useRef,
+  useCallback,
 } from 'react';
+import { createPortal } from 'react-dom';
 import { Viewer, CesiumComponentRef } from 'resium';
 import { ViewerProps } from 'resium/dist/types/src/Viewer/Viewer';
 import {
@@ -26,7 +28,8 @@ import { Proj } from '../utils/projections';
 import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
 import { ScaleTrackerTool } from './tools/scale-tracker.tool';
 import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
-import LayerManager from './layers-manager';
+import { IMapLegend, MapLegendSidebar, MapLegendToggle } from './map-legend';
+import LayerManager, { LegendExtractor } from './layers-manager';
 import { CesiumSceneMode, CesiumSceneModeEnum } from './map.types';
 
 import './map.css';
@@ -80,6 +83,14 @@ export interface IContextMenuData {
   handleClose: () => void;
 }
 
+interface ILegends {
+  legendsList?: IMapLegend[];
+  emptyText?: string;
+  title?: string;
+  actionsTexts?: { docText: string; imgText: string };
+  mapLegendsExtractor?: LegendExtractor;
+}
+
 export interface CesiumMapProps extends ViewerProps {
   showMousePosition?: boolean;
   showScale?: boolean;
@@ -96,6 +107,9 @@ export interface CesiumMapProps extends ViewerProps {
     width: number;
     dynamicHeightIncrement?: number;
   };
+  legendSidebarTitle?: string;
+  noLegendsText?: string;
+  legends?: ILegends;
 }
 
 export const useCesiumMap = (): CesiumViewer => {
@@ -119,11 +133,15 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   const [sceneModes, setSceneModes] = useState<
     CesiumSceneModeEnum[] | undefined
   >();
+  const [legendsList, setLegendsList] = useState<IMapLegend[]>([]);
   const [baseMaps, setBaseMaps] = useState<IBaseMaps | undefined>();
   const [showImageryMenu, setShowImageryMenu] = useState<boolean>(false);
   const [imageryMenuPosition, setImageryMenuPosition] = useState<
     Record<string, unknown> | undefined
   >(undefined);
+  const [isLegendsSidebarOpen, setIsLegendsSidebarOpen] = useState<boolean>(
+    false
+  );
 
   const viewerProps = {
     fullscreenButton: true,
@@ -163,7 +181,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   useEffect(() => {
     if (ref.current) {
       const viewer = ref.current.cesiumElement as CesiumViewer;
-      viewer.layersManager = new LayerManager(viewer);
+
       if (props.imageryContextMenu) {
         viewer.screenSpaceEventHandler.setInputAction(
           (evt: Record<string, unknown>) => {
@@ -179,6 +197,20 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     setMapViewRef(ref.current?.cesiumElement);
   }, [ref, props.imageryContextMenu]);
 
+  useEffect(() => {
+    if (mapViewRef) {
+      mapViewRef.layersManager = new LayerManager(
+        mapViewRef,
+        props.legends?.mapLegendsExtractor,
+        () => {
+          setLegendsList(
+            mapViewRef?.layersManager?.legendsList as IMapLegend[]
+          );
+        }
+      );
+    }
+  }, [mapViewRef]);
+
   useEffect(() => {
     setSceneModes(
       props.sceneModes ?? [
@@ -326,27 +358,61 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     }
   }, [props.zoom, props.center, mapViewRef]);
 
+  const bindCustomToolsToViewer = useCallback((): JSX.Element | undefined => {
+    return (
+      mapViewRef &&
+      createPortal(
+        <>
+          <Box className="sideToolsContainer">
+            <CesiumSettings
+              sceneModes={sceneModes as CesiumSceneModeEnum[]}
+              baseMaps={baseMaps}
+              locale={locale}
+            />
+            <MapLegendToggle
+              onClick={() => setIsLegendsSidebarOpen(!isLegendsSidebarOpen)}
+            />
+          </Box>
+          <Box className="toolsContainer">
+            {showMousePosition === true ? (
+              <CoordinatesTrackerTool
+                projection={projection}
+              ></CoordinatesTrackerTool>
+            ) : (
+              <></>
+            )}
+            {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
+          </Box>
+        </>,
+        document.querySelector('.cesium-viewer') as Element
+      )
+    );
+  }, [
+    baseMaps,
+    locale,
+    mapViewRef,
+    projection,
+    sceneModes,
+    showMousePosition,
+    showScale,
+    isLegendsSidebarOpen,
+  ]);
+
   return (
-    <Viewer full ref={ref} {...viewerProps}>
+    <Viewer className="viewer" full ref={ref} {...viewerProps}>
       <MapViewProvider value={mapViewRef as CesiumViewer}>
+        <MapLegendSidebar
+          title={props.legends?.title}
+          isOpen={isLegendsSidebarOpen}
+          toggleSidebar={(): void =>
+            setIsLegendsSidebarOpen(!isLegendsSidebarOpen)
+          }
+          noLegendsText={props.legends?.emptyText}
+          legends={props.legends?.legendsList ?? legendsList}
+          actionsTexts={props.legends?.actionsTexts}
+        />
         {props.children}
-        <Box className="sideToolsContainer">
-          <CesiumSettings
-            sceneModes={sceneModes as CesiumSceneModeEnum[]}
-            baseMaps={baseMaps}
-            locale={locale}
-          />
-        </Box>
-        <Box className="toolsContainer">
-          {showMousePosition === true ? (
-            <CoordinatesTrackerTool
-              projection={projection}
-            ></CoordinatesTrackerTool>
-          ) : (
-            <></>
-          )}
-          {showScale === true ? <ScaleTrackerTool locale={locale} /> : <></>}
-        </Box>
+        {bindCustomToolsToViewer()}
         {props.imageryContextMenu &&
           showImageryMenu &&
           imageryMenuPosition &&

package/src/lib/cesium-map/settings/settings.css

@@ -3,7 +3,8 @@
   gap: 8px;
 }
 
-.settingsIconContainer {
+.settingsIconContainer,
+.mapLegendToggleContainer {
   fill: #fff;
   width: 40px;
   height: 40px;
@@ -12,7 +13,8 @@
   border-radius: 4px;
 }
 
-.settingsIconContainer:hover {
+.settingsIconContainer:hover,
+.mapLegendToggleContainer:hover {
   background: #48b;
   border-color: #aef;
 }
@@ -35,6 +37,7 @@
 .settingsDialogPortal .mdc-dialog__container {
   align-items: unset;
 }
+
 .settingsDialogPortal .mdc-dialog .mdc-dialog__surface {
   max-height: unset;
 }

package/src/lib/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx

@@ -1,17 +1,18 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 import React, { useState } from 'react';
 import {
   ArcGISTiledElevationTerrainProvider,
   EllipsoidTerrainProvider,
-  TerrainProvider,
   CesiumTerrainProvider,
   Resource,
+  TerrainProvider,
 } from 'cesium';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap, useCesiumMap } from '../map';
+import { CesiumMap, CesiumViewer, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
-import { Cesium3DTileset } from '../layers';
 import { InspectorTool } from '../tools/inspector.tool';
 import { TerrainianHeightTool } from '../tools/terranian-height.tool';
+import { Cesium3DTileset } from '../layers';
 import { LayerType } from '../layers-manager';
 
 export default {
@@ -56,19 +57,41 @@ const BASE_MAPS = {
 
 const EllipsoidProvider = new EllipsoidTerrainProvider({});
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const MCCesiumProviderMercator = new CesiumTerrainProvider({
-  url: new Resource({
-    url: 'http://localhost:3000/terrain_mercator_crop',
-  }),
-});
+//#region TILER MATERIALS
+// const TTCesiumProviderSrtm30 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:8002/srtm30',
+//   }),
+// });
+// const TTCesiumProviderSrtm100 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:8002/srtm100',
+//   }),
+// });
+// const TTCesiumProviderMergedDescending = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:8002/mergedDescending',
+//   }),
+// });
+//#endregion
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const MCCesiumProviderW84 = new CesiumTerrainProvider({
-  url: new Resource({
-    url: 'http://localhost:3000/terrain_w84_geo_crop',
-  }),
-});
+//#region CTBD MATERIALS
+// const CTBDCesiumProviderSrtm30 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:3000/srtm30',
+//   }),
+// });
+// const CTBDCesiumProviderSrtm100 = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:3000/srtm100',
+//   }),
+// });
+// const CTBDCesiumProviderMergedAscending = new CesiumTerrainProvider({
+//   url: new Resource({
+//     url: 'http://localhost:3000/mergedAscending',
+//   }),
+// });
+//#endregion
 
 const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
   url:
@@ -80,14 +103,6 @@ const terrainProviderListQmesh = [
     id: 'NONE',
     value: EllipsoidProvider,
   },
-  {
-    id: 'MC Mercator - Cesium Terrain Provider',
-    value: MCCesiumProviderMercator,
-  },
-  {
-    id: 'MC W84 - Cesium Terrain Provider',
-    value: MCCesiumProviderW84,
-  },
   {
     id: 'Arc Gis Terrain Provider',
     value: ArcGisProvider,
@@ -106,7 +121,7 @@ interface ITerrainProviderSelectorProps {
 const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   terrainProviderList,
 }) => {
-  const mapViewer = useCesiumMap();
+  const mapViewer: CesiumViewer = useCesiumMap();
 
   return (
     <>
@@ -129,7 +144,7 @@ const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
 };
 
 export const QuantizedMeshHeightsTool: Story = () => {
-  const [center] = useState<[number, number]>([-122, 43]);
+  const [center] = useState<[number, number]>([34.817, 31.911]);
   return (
     <div style={mapDivStyle}>
       <CesiumMap
@@ -140,8 +155,8 @@ export const QuantizedMeshHeightsTool: Story = () => {
         baseMaps={BASE_MAPS}
       >
         <Cesium3DTileset
-          isZoomTo={true}
           url="https://3d.ofek-air.com/3d/Jeru_Old_City_Cesium/ACT/Jeru_Old_City_Cesium_ACT.json"
+          isZoomTo={true}
         />
         <TerrainProviderSelector
           terrainProviderList={terrainProviderListQmesh}

package/src/lib/cesium-map/terrain-providers/terrain-provider.stories.tsx

@@ -14,6 +14,7 @@ import { CesiumMap, useCesiumMap } from '../map';
 import { CesiumSceneMode } from '../map.types';
 import { Cesium3DTileset } from '../layers';
 import { LayerType } from '../layers-manager';
+import { InspectorTool } from '../tools/inspector.tool';
 import QuantizedMeshTerrainProvider from './custom/quantized-mesh-terrain-provider';
 
 export default {
@@ -122,8 +123,8 @@ interface ITerrainProviderSelectorProps {
 const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({
   terrainProviderList,
 }) => {
-  const mapViewer = useCesiumMap();
   const [depthTest, setDepthTest] = useState<boolean>(false);
+  const mapViewer = useCesiumMap();
 
   const scene = mapViewer.scene;
 
@@ -178,6 +179,7 @@ export const QuantizedMeshProviders: Story = () => {
           url="/mock/tileset_2/L16_31023/L16_31023.json"
         />
         <TerrainProviderSelector terrainProviderList={terrainProviderList} />
+        <InspectorTool />
       </CesiumMap>
     </div>
   );

package/src/lib/cesium-map/tools/terranian-height.tool.tsx

@@ -69,6 +69,10 @@ export const TerrainianHeightTool: React.FC<TerrainianHeightProps> = (
       ).then(
         (updatedPositions) => {
           console.log(updatedPositions);
+          updatedPositions = updatedPositions.slice(
+            0,
+            updatedPositions.length - 1
+          ); // UNIX brake line
 
           mapViewer.scene.globe.depthTestAgainstTerrain = true;
           mapViewer.entities.suspendEvents();

package/src/lib/file-picker/file-picker.css

@@ -4,7 +4,8 @@ body[dir='rtl'] .chonky-fileListWrapper [class^='listContainer-'] {
 
 body[dir='rtl']
   .chonky-fileEntryClickableWrapper
-  [class^='listFileEntryProperty-'] {
+  [class^='listFileEntryProperty-'],
+body[dir='rtl'] .chonky-navbarContainer {
   direction: ltr !important;
 }
 

package/dist/cesium-map/layers/3d.tileset.update.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cesium-map/layers/3d.tileset.update.js

@@ -1,5 +0,0 @@
-"use strict";
-/*
-   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
-*/
-Object.defineProperty(exports, "__esModule", { value: true });

package/src/lib/cesium-map/layers/3d.tileset.update.ts

@@ -1,72 +0,0 @@
-/*
-   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
-*/
-
-/*
-import {
-  Cesium3DTileset,
-  Cesium3DTile,
-  Cartographic,
-  Cartesian3,
-  defined,
-  sampleTerrainMostDetailed,
-} from 'cesium';
-
-const updateTile = (tile: Cesium3DTile): void => {
-  const boundingVolume = tile.boundingVolume;
-  if (defined(tile.contentBoundingVolume)) {
-    boundingVolume = tile.contentBoundingVolume;
-  }
-  const content = tile.content;
-  const model = content._model;
-  const height = boundingVolume.minimumHeight;
-  const center = model._rtcCenter;
-  const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new Cartesian3());
-  const offset = Cartesian3.multiplyByScalar(normal, height, new Cartesian3());
-  const carto = Cartographic.fromCartesian(center);
-  const promise = when.defer();
-  if (scene.terrainProvider === ellipsoidTerrainProvider) {
-    const result = carto;
-    result.height = 0;
-    promise.resolve(result);
-  } else {
-    promise = sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then((results) => {
-      const result = results[0];
-      if (!defined(result)) {
-        return carto;
-      }
-      return result;
-    });
-  }
-  promise.then((result) => {
-    result = Cartographic.toCartesian(result);
-    const position = Cartesian3.subtract(result, offset, new Cartesian3());
-    model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
-  });
-};
-
-const updateTileset = (root: Cesium3DTile): void => {
-  if (root.contentReady) {
-    updateTile(root);
-  } else {
-    const listener = (tileset as Cesium3DTileset).tileLoad.addEventListener(
-      (tile: Cesium3DTile) => {
-        if (tile === root) {
-          updateTile(tile);
-          listener();
-        }
-      }
-    );
-  }
-  const children = root.children;
-  const length = children.length;
-  for (let i = 0; i < length; ++i) {
-    updateTileset(children[i]);
-  }
-};
-
-export const update = (tileset: Cesium3DTileset): void => {
-  updateTileset(tileset.root);
-};
-*/
-export {};

package/storybook-static/mock/tileset_1/tileset.json

@@ -1,124 +0,0 @@
-{
-    "asset": {
-      "version": "1.0",
-      "tilesetVersion": "1.2.3"
-    },
-    "extras": {
-      "name": "Sample Tileset"
-    },
-    "properties": {
-      "id": {
-        "minimum": 0,
-        "maximum": 9
-      },
-      "Longitude": {
-        "minimum": -1.3197192952275933,
-        "maximum": -1.319644104024109
-      },
-      "Latitude": {
-        "minimum": 0.698848878034009,
-        "maximum": 0.6989046192460953
-      },
-      "Height": {
-        "minimum": 6.161747192963958,
-        "maximum": 85.41026367992163
-      }
-    },
-    "geometricError": 240,
-    "root": {
-      "boundingVolume": {
-        "region": [
-          -1.3197209591796106,
-          0.6988424218,
-          -1.3196390408203893,
-          0.6989055782,
-          0,
-          88
-        ]
-      },
-      "geometricError": 70,
-      "refine": "ADD",
-      "content": {
-        "uri": "parent.b3dm",
-        "boundingVolume": {
-          "region": [
-            -1.3197004795898053,
-            0.6988582109,
-            -1.3196595204101946,
-            0.6988897891,
-            0,
-            88
-          ]
-        }
-      },
-      "children": [
-        {
-          "boundingVolume": {
-            "region": [
-              -1.3197209591796106,
-              0.6988424218,
-              -1.31968,
-              0.698874,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "ll.b3dm"
-          }
-        },
-        {
-          "boundingVolume": {
-            "region": [
-              -1.31968,
-              0.6988424218,
-              -1.3196390408203893,
-              0.698874,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "lr.b3dm"
-          },
-          "extras": {
-            "id": "Special Tile"
-          }
-        },
-        {
-          "boundingVolume": {
-            "region": [
-              -1.31968,
-              0.698874,
-              -1.3196390408203893,
-              0.6989055782,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "ur.b3dm"
-          }
-        },
-        {
-          "boundingVolume": {
-            "region": [
-              -1.3197209591796106,
-              0.698874,
-              -1.31968,
-              0.6989055782,
-              0,
-              20
-            ]
-          },
-          "geometricError": 0,
-          "content": {
-            "uri": "ul.b3dm"
-          }
-        }
-      ]
-    }
-  }