@map-colonies/react-components 3.10.4 → 3.12.0

package/dist/cesium-map/map-legend/MapLegendToggle.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapLegendToggle = void 0;
+var react_1 = __importDefault(require("react"));
+var react_core_1 = require("@map-colonies/react-core");
+var box_1 = require("../../box");
+require("./MapLegend.css");
+var legendIcon = (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", height: "24", width: "24", viewBox: "0 0 612 612" },
+    react_1.default.createElement("g", { xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M322.4,173.9l-129,16.2l-4.6,21.4l25.3,4.7c16.5,3.9,19.8,9.9,16.2,26.4l-41.5,195.3c-10.9,50.5,5.9,74.3,45.5,74.3   c30.7,0,66.3-14.2,82.5-33.6l4.9-23.4c-11.3,9.9-27.7,13.9-38.6,13.9c-15.5,0-21.1-10.9-17.1-30L322.4,173.9z" }),
+        react_1.default.createElement("circle", { cx: "270.1", cy: "56.3", r: "56.3" }))));
+var MapLegendToggle = function (_a) {
+    var onClick = _a.onClick;
+    return (react_1.default.createElement(box_1.Box, { onClick: onClick, className: "mapLegendToggleContainer" },
+        react_1.default.createElement(react_core_1.Icon, { icon: legendIcon, className: "mapLegendIcon" })));
+};
+exports.MapLegendToggle = MapLegendToggle;

package/dist/cesium-map/map-legend/index.d.ts

@@ -0,0 +1,3 @@
+export * from './MapLegendToggle';
+export * from './MapLegendSidebar';
+export type { IMapLegend } from './MapLegend';

package/dist/cesium-map/map-legend/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MapLegendToggle"), exports);
+__exportStar(require("./MapLegendSidebar"), exports);

package/dist/cesium-map/map.css

@@ -40,7 +40,7 @@ body[dir='rtl'] .toolsContainer {
 
 .sideToolsContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 8px;
   z-index: 2000;
   position: absolute;
@@ -52,3 +52,8 @@ body[dir='rtl'] .sideToolsContainer {
   left: 40px;
   right: unset;
 }
+
+.viewer {
+  display: flex;
+  flex-direction: row;
+}

package/dist/cesium-map/map.d.ts

@@ -3,7 +3,8 @@ import { ViewerProps } from 'resium/dist/types/src/Viewer/Viewer';
 import { Viewer as CesiumViewerCls, TerrainProvider } from 'cesium';
 import { Proj } from '../utils/projections';
 import { IBaseMaps } from './settings/settings';
-import LayerManager from './layers-manager';
+import { IMapLegend } from './map-legend';
+import LayerManager, { LegendExtractor } from './layers-manager';
 import { CesiumSceneModeEnum } from './map.types';
 import './map.css';
 export declare class CesiumViewer extends CesiumViewerCls {
@@ -23,6 +24,16 @@ 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;
@@ -41,6 +52,10 @@ export interface CesiumMapProps extends ViewerProps {
         width: number;
         dynamicHeightIncrement?: number;
     };
+    legendSidebarTitle?: string;
+    noLegendsText?: string;
+    legends?: ILegends;
 }
 export declare const useCesiumMap: () => CesiumViewer;
 export declare const CesiumMap: React.FC<CesiumMapProps>;
+export {};

package/dist/cesium-map/map.js

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CesiumMap = exports.useCesiumMap = exports.CesiumViewer = void 0;
 var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
 var resium_1 = require("resium");
 var cesium_1 = require("cesium");
 var lodash_1 = require("lodash");
@@ -59,6 +60,7 @@ var projections_1 = require("../utils/projections");
 var coordinates_tracker_tool_1 = require("./tools/coordinates-tracker.tool");
 var scale_tracker_tool_1 = require("./tools/scale-tracker.tool");
 var settings_1 = require("./settings/settings");
+var map_legend_1 = require("./map-legend");
 var layers_manager_1 = __importDefault(require("./layers-manager"));
 var map_types_1 = require("./map.types");
 require("./map.css");
@@ -85,18 +87,20 @@ var useCesiumMap = function () {
 };
 exports.useCesiumMap = useCesiumMap;
 var CesiumMap = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var ref = react_1.useRef(null);
-    var _j = react_1.useState(), mapViewRef = _j[0], setMapViewRef = _j[1];
-    var _k = react_1.useState(), projection = _k[0], setProjection = _k[1];
-    var _l = react_1.useState(), showMousePosition = _l[0], setShowMousePosition = _l[1];
-    var _m = react_1.useState(), showScale = _m[0], setShowScale = _m[1];
-    var _o = react_1.useState(), locale = _o[0], setLocale = _o[1];
-    var _p = react_1.useState(), cameraState = _p[0], setCameraState = _p[1];
-    var _q = react_1.useState(), sceneModes = _q[0], setSceneModes = _q[1];
-    var _r = react_1.useState(), baseMaps = _r[0], setBaseMaps = _r[1];
-    var _s = react_1.useState(false), showImageryMenu = _s[0], setShowImageryMenu = _s[1];
-    var _t = react_1.useState(undefined), imageryMenuPosition = _t[0], setImageryMenuPosition = _t[1];
+    var _p = react_1.useState(), mapViewRef = _p[0], setMapViewRef = _p[1];
+    var _q = react_1.useState(), projection = _q[0], setProjection = _q[1];
+    var _r = react_1.useState(), showMousePosition = _r[0], setShowMousePosition = _r[1];
+    var _s = react_1.useState(), showScale = _s[0], setShowScale = _s[1];
+    var _t = react_1.useState(), locale = _t[0], setLocale = _t[1];
+    var _u = react_1.useState(), cameraState = _u[0], setCameraState = _u[1];
+    var _v = react_1.useState(), sceneModes = _v[0], setSceneModes = _v[1];
+    var _w = react_1.useState([]), legendsList = _w[0], setLegendsList = _w[1];
+    var _x = react_1.useState(), baseMaps = _x[0], setBaseMaps = _x[1];
+    var _y = react_1.useState(false), showImageryMenu = _y[0], setShowImageryMenu = _y[1];
+    var _z = react_1.useState(undefined), imageryMenuPosition = _z[0], setImageryMenuPosition = _z[1];
+    var _0 = react_1.useState(false), isLegendsSidebarOpen = _0[0], setIsLegendsSidebarOpen = _0[1];
     var viewerProps = __assign({ fullscreenButton: true, timeline: false, animation: false, baseLayerPicker: false, geocoder: false, navigationHelpButton: false, homeButton: false, sceneModePicker: false }, props);
     var getImageryMenuStyle = function (x, y, menuWidth, menuHeight, menuDynamicHeightIncrement) {
         var container = mapViewRef.container;
@@ -114,7 +118,6 @@ var CesiumMap = function (props) {
         var _a;
         if (ref.current) {
             var viewer = ref.current.cesiumElement;
-            viewer.layersManager = new layers_manager_1.default(viewer);
             if (props.imageryContextMenu) {
                 viewer.screenSpaceEventHandler.setInputAction(function (evt) {
                     // console.log('RIGHT click', evt.position);
@@ -126,6 +129,15 @@ var CesiumMap = function (props) {
         }
         setMapViewRef((_a = ref.current) === null || _a === void 0 ? void 0 : _a.cesiumElement);
     }, [ref, props.imageryContextMenu]);
+    react_1.useEffect(function () {
+        var _a;
+        if (mapViewRef) {
+            mapViewRef.layersManager = new layers_manager_1.default(mapViewRef, (_a = props.legends) === null || _a === void 0 ? void 0 : _a.mapLegendsExtractor, function () {
+                var _a;
+                setLegendsList((_a = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _a === void 0 ? void 0 : _a.legendsList);
+            });
+        }
+    }, [mapViewRef]);
     react_1.useEffect(function () {
         var _a;
         setSceneModes((_a = props.sceneModes) !== null && _a !== void 0 ? _a : [
@@ -243,25 +255,43 @@ var CesiumMap = function (props) {
             });
         }
     }, [props.zoom, props.center, mapViewRef]);
-    return (react_1.default.createElement(resium_1.Viewer, __assign({ full: true, ref: ref }, viewerProps),
+    var bindCustomToolsToViewer = react_1.useCallback(function () {
+        return (mapViewRef &&
+            react_dom_1.createPortal(react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(box_1.Box, { className: "sideToolsContainer" },
+                    react_1.default.createElement(settings_1.CesiumSettings, { sceneModes: sceneModes, baseMaps: baseMaps, locale: locale }),
+                    react_1.default.createElement(map_legend_1.MapLegendToggle, { onClick: function () { return setIsLegendsSidebarOpen(!isLegendsSidebarOpen); } })),
+                react_1.default.createElement(box_1.Box, { className: "toolsContainer" },
+                    showMousePosition === true ? (react_1.default.createElement(coordinates_tracker_tool_1.CoordinatesTrackerTool, { projection: projection })) : (react_1.default.createElement(react_1.default.Fragment, null)),
+                    showScale === true ? react_1.default.createElement(scale_tracker_tool_1.ScaleTrackerTool, { locale: locale }) : react_1.default.createElement(react_1.default.Fragment, null))), document.querySelector('.cesium-viewer')));
+    }, [
+        baseMaps,
+        locale,
+        mapViewRef,
+        projection,
+        sceneModes,
+        showMousePosition,
+        showScale,
+        isLegendsSidebarOpen,
+    ]);
+    return (react_1.default.createElement(resium_1.Viewer, __assign({ className: "viewer", full: true, ref: ref }, viewerProps),
         react_1.default.createElement(MapViewProvider, { value: mapViewRef },
+            react_1.default.createElement(map_legend_1.MapLegendSidebar, { title: (_a = props.legends) === null || _a === void 0 ? void 0 : _a.title, isOpen: isLegendsSidebarOpen, toggleSidebar: function () {
+                    return setIsLegendsSidebarOpen(!isLegendsSidebarOpen);
+                }, noLegendsText: (_b = props.legends) === null || _b === void 0 ? void 0 : _b.emptyText, legends: (_d = (_c = props.legends) === null || _c === void 0 ? void 0 : _c.legendsList) !== null && _d !== void 0 ? _d : legendsList, actionsTexts: (_e = props.legends) === null || _e === void 0 ? void 0 : _e.actionsTexts }),
             props.children,
-            react_1.default.createElement(box_1.Box, { className: "sideToolsContainer" },
-                react_1.default.createElement(settings_1.CesiumSettings, { sceneModes: sceneModes, baseMaps: baseMaps, locale: locale })),
-            react_1.default.createElement(box_1.Box, { className: "toolsContainer" },
-                showMousePosition === true ? (react_1.default.createElement(coordinates_tracker_tool_1.CoordinatesTrackerTool, { projection: projection })) : (react_1.default.createElement(react_1.default.Fragment, null)),
-                showScale === true ? react_1.default.createElement(scale_tracker_tool_1.ScaleTrackerTool, { locale: locale }) : react_1.default.createElement(react_1.default.Fragment, null)),
+            bindCustomToolsToViewer(),
             props.imageryContextMenu &&
                 showImageryMenu &&
                 imageryMenuPosition &&
                 react_1.default.cloneElement(props.imageryContextMenu, {
-                    data: (_a = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _a === void 0 ? void 0 : _a.findLayerByPOI(imageryMenuPosition.x, imageryMenuPosition.y),
+                    data: (_f = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _f === void 0 ? void 0 : _f.findLayerByPOI(imageryMenuPosition.x, imageryMenuPosition.y),
                     position: {
                         x: imageryMenuPosition.x,
                         y: imageryMenuPosition.y,
                     },
-                    style: getImageryMenuStyle(imageryMenuPosition.x, imageryMenuPosition.y, (_c = (_b = props.imageryContextMenuSize) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : DEFAULT_WIDTH, (_e = (_d = props.imageryContextMenuSize) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : DEFAULT_HEIGHT, (_g = (_f = props.imageryContextMenuSize) === null || _f === void 0 ? void 0 : _f.dynamicHeightIncrement) !== null && _g !== void 0 ? _g : DEFAULT_DYNAMIC_HEIGHT_INCREMENT),
-                    size: (_h = props.imageryContextMenuSize) !== null && _h !== void 0 ? _h : {
+                    style: getImageryMenuStyle(imageryMenuPosition.x, imageryMenuPosition.y, (_h = (_g = props.imageryContextMenuSize) === null || _g === void 0 ? void 0 : _g.width) !== null && _h !== void 0 ? _h : DEFAULT_WIDTH, (_k = (_j = props.imageryContextMenuSize) === null || _j === void 0 ? void 0 : _j.height) !== null && _k !== void 0 ? _k : DEFAULT_HEIGHT, (_m = (_l = props.imageryContextMenuSize) === null || _l === void 0 ? void 0 : _l.dynamicHeightIncrement) !== null && _m !== void 0 ? _m : DEFAULT_DYNAMIC_HEIGHT_INCREMENT),
+                    size: (_o = props.imageryContextMenuSize) !== null && _o !== void 0 ? _o : {
                         height: DEFAULT_HEIGHT,
                         width: DEFAULT_WIDTH,
                     },

package/dist/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/dist/cesium-map/tools/terranian-height.tool.js

@@ -44,6 +44,7 @@ var TerrainianHeightTool = function (props) {
             console.log('Loaded CSV content:\n', text);
             void cesium_1.sampleTerrainMostDetailed(mapViewer.terrainProvider, parsed.map(function (item) { return item.cartographic; })).then(function (updatedPositions) {
                 console.log(updatedPositions);
+                updatedPositions = updatedPositions.slice(0, updatedPositions.length - 1); // UNIX brake line
                 mapViewer.scene.globe.depthTestAgainstTerrain = true;
                 mapViewer.entities.suspendEvents();
                 mapViewer.entities.removeAll();

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.10.4",
+  "version": "3.12.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
     "@here/quantized-mesh-decoder": "^1.2.8",
-    "@map-colonies/react-core": "^3.3.2",
+    "@map-colonies/react-core": "^3.3.3",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/pickers": "^3.2.10",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "77edacc668fbc4fbdae5e5fb68630f79fb5250fd",
+  "gitHead": "fc727564af113a9fbfc599f1c7720dce840e8e83",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/layers/3d.tileset.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { ArcGISTiledElevationTerrainProvider } from 'cesium';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
 import { CesiumMap } from '../map';
+import { LayerType } from '../layers-manager';
 import { Cesium3DTileset } from './3d.tileset';
 
 export default {
@@ -18,12 +20,43 @@ const mapDivStyle = {
   position: 'absolute' as const,
 };
 
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '1st',
+      title: '1st Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
+      baseRasteLayers: [
+        {
+          id: 'GOOGLE_TERRAIN',
+          type: 'XYZ_LAYER' as LayerType,
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
+            layers: '',
+            credit: 'GOOGLE',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
+  url:
+    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
+});
+
 export const Cesium3DTilesetLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
       <Cesium3DTileset
         isZoomTo={true}
-        url="/mock/tileset/tileset.json"
+        url="/mock/tileset_1/tileset.json"
         onAllTilesLoad={action('onAllTilesLoad')}
         onInitialTilesLoad={action('onInitialTilesLoad')}
         onTileFailed={action('onTileFailed')}
@@ -39,6 +72,9 @@ export const Cesium3DTilesetLayer: Story = (args: unknown) => (
 );
 
 Cesium3DTilesetLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
   zoom: {
     defaultValue: 3,
     control: {
@@ -49,13 +85,17 @@ Cesium3DTilesetLayer.argTypes = {
   },
 };
 
-export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
+Cesium3DTilesetLayer.storyName = '3D Layer';
+
+export const Cesium3DTilesetWithHeightCorrectionLayer: Story = (
+  args: unknown
+) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
       <Cesium3DTileset
         isZoomTo={false}
-        heightFromGround={-170}
-        url="/mock/tileset/tileset.json"
+        heightFromGround={-10}
+        url="/mock/tileset_1/tileset.json"
         onAllTilesLoad={action('onAllTilesLoad')}
         onInitialTilesLoad={action('onInitialTilesLoad')}
         onTileFailed={action('onTileFailed')}
@@ -70,9 +110,12 @@ export const Cesium3DTilesetOnHeightLayer: Story = (args: unknown) => (
   </div>
 );
 
-Cesium3DTilesetOnHeightLayer.argTypes = {
+Cesium3DTilesetWithHeightCorrectionLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
   zoom: {
-    defaultValue: 18,
+    defaultValue: 17,
     control: {
       type: 'range',
       min: 0,
@@ -84,6 +127,9 @@ Cesium3DTilesetOnHeightLayer.argTypes = {
   },
 };
 
+Cesium3DTilesetWithHeightCorrectionLayer.storyName =
+  '3D with Height Correction Layer';
+
 export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
@@ -96,6 +142,12 @@ export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
 );
 
 CesiumSolar3DTilesetLayer.argTypes = {
+  baseMaps: {
+    defaultValue: BASE_MAPS,
+  },
+  terrainProvider: {
+    defaultValue: ArcGisProvider,
+  },
   center: {
     defaultValue: [34.811, 31.908],
   },
@@ -108,3 +160,5 @@ CesiumSolar3DTilesetLayer.argTypes = {
     },
   },
 };
+
+CesiumSolar3DTilesetLayer.storyName = 'Solar 3D Layer with Terrain Provider';

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

@@ -1,10 +1,11 @@
-import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
 import React from 'react';
-
+import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
 import { Cesium3DTileset as Resium3DTileset } from 'resium';
 import { Cesium3DTilesetProps } from 'resium/dist/types/src/Cesium3DTileset/Cesium3DTileset';
 import { CesiumViewer, useCesiumMap } from '../map';
 
+const GROUND_LEVEL = 0.0;
+
 export interface RCesium3DTilesetProps extends Cesium3DTilesetProps {
   isZoomTo?: boolean;
   heightFromGround?: number;
@@ -17,22 +18,25 @@ export const Cesium3DTileset: React.FC<RCesium3DTilesetProps> = (props) => {
       {...props}
       onReady={(tileset): void => {
         props.onReady?.(tileset);
-        if (props.isZoomTo) {
+        if (props.isZoomTo === true) {
           void mapViewer.zoomTo(tileset);
         }
-        if (props.heightFromGround) {
-          const cartographic = Cartographic.fromCartesian(
-            tileset.boundingSphere.center
-          );
+        const scene = mapViewer.scene;
+        scene.globe.depthTestAgainstTerrain = true;
+        const cartographic = Cartographic.fromCartesian(
+          tileset.boundingSphere.center
+        );
+        const heightFromGround = props.heightFromGround ?? GROUND_LEVEL;
+        if (heightFromGround) {
           const surface = Cartesian3.fromRadians(
             cartographic.longitude,
             cartographic.latitude,
-            0.0
+            cartographic.height
           );
           const offset = Cartesian3.fromRadians(
             cartographic.longitude,
             cartographic.latitude,
-            props.heightFromGround
+            cartographic.height + heightFromGround
           );
           const translation = Cartesian3.subtract(
             offset,

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

@@ -0,0 +1,120 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/*
+   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 React, { useEffect, useState } from 'react';
+import {
+  Cesium3DTileset,
+  Cesium3DTile,
+  Cartographic,
+  Cartesian3,
+  defined,
+  sampleTerrainMostDetailed,
+  Cesium3DTileContent,
+} from 'cesium';
+import { CesiumViewer, useCesiumMap } from '../map';
+
+export interface Cesium3DTilesetWithUpdateProps {
+  url: string;
+  withUpdate?: boolean;
+}
+
+export const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps> = ({
+  url,
+  withUpdate,
+}) => {
+  const mapViewer: CesiumViewer = useCesiumMap();
+  const scene = mapViewer.scene;
+  const [cesium3DTileset] = useState<Cesium3DTileset>(
+    new Cesium3DTileset({
+      url: url,
+    })
+  );
+  const [tileset] = useState<Cesium3DTileset>(
+    scene.primitives.add(cesium3DTileset)
+  );
+
+  useEffect(() => {
+    scene.globe.depthTestAgainstTerrain = true;
+    void mapViewer.zoomTo(tileset);
+    if (withUpdate === true) {
+      updateTileset(tileset);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const updateContent = (
+    model: Cesium3DTileContent,
+    boundingVolume: any
+  ): void => {
+    const height = boundingVolume.minimumHeight
+      ? boundingVolume.minimumHeight
+      : boundingVolume.center.z - boundingVolume.radius;
+    // @ts-ignore
+    const center = model._rtcCenter ?? boundingVolume.center;
+    const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(
+      center,
+      new Cartesian3()
+    );
+    const offset = Cartesian3.multiplyByScalar(
+      normal,
+      height,
+      new Cartesian3()
+    );
+    const carto = Cartographic.fromCartesian(center);
+    void new Promise((resolve, reject) => {
+      // @ts-ignore
+      if (scene.terrainProvider._ready !== true) {
+        const result = { ...carto };
+        result.height = 0;
+        resolve(result);
+      } else {
+        void sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then(
+          (results) => {
+            const result = results[0];
+            if (!defined(result)) {
+              resolve(carto);
+            }
+            resolve(result);
+          }
+        );
+      }
+    }).then((result) => {
+      const resultCartesian = Cartographic.toCartesian(result as Cartographic);
+      const position = Cartesian3.subtract(
+        resultCartesian,
+        offset,
+        new Cartesian3()
+      );
+      // @ts-ignore
+      model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
+    });
+  };
+
+  const updateTile = (tile: Cesium3DTile): void => {
+    if (tile.content !== undefined) {
+      // @ts-ignore
+      updateContent(tile.content, tile.boundingVolume.boundingVolume);
+    } else {
+      const listener = tileset.tileLoad.addEventListener((t) => {
+        if (t === tile) {
+          updateContent(t.content, t.boundingVolume.boundingVolume);
+          listener();
+        }
+      });
+    }
+    tile.children.forEach((child) => updateTile(child));
+  };
+
+  const updateTileset = (tileset: Cesium3DTileset): void => {
+    void tileset.readyPromise.then(() => {
+      updateTile(tileset.root);
+    });
+  };
+
+  return <></>;
+};

package/src/lib/cesium-map/layers/imagery.layer.tsx

@@ -18,13 +18,18 @@ export const CesiumImageryLayer: React.FC<RCesiumImageryLayerProps> = (
   useLayoutEffect(() => {
     mapViewer.layersManager?.addMetaToLayer(
       meta,
-      (layer: ImageryLayer, idx: number): boolean => {
-        if (meta !== undefined) {
-          // eslint-disable-next-line
-          return (layer as any)._imageryProvider._resource._url === meta.url;
-        }
-        return false;
-      }
+      /* eslint-disable */
+      meta.searchLayerPredicate ??
+        ((layer: ImageryLayer, idx: number): boolean => {
+          if (meta !== undefined) {
+            return (
+              (layer as any)._imageryProvider._resource._url ===
+              meta.options.url
+            );
+          }
+          return false;
+        })
+      /* eslint-enable */
     );
   }, [meta, mapViewer]);