@map-colonies/react-components 3.7.4 → 3.10.0

package/dist/smart-table/smart-table-row.js

@@ -1,24 +1,35 @@
 "use strict";
 /* eslint-disable */
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartTableRow = void 0;
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
 var icons_1 = require("@material-ui/icons");
 function SmartTableRow(props) {
-    var _a;
     var cellsMetadata = props.cellsMetadata, isRowSelected = props.isRowSelected, item = props.item, onRowSelected = props.onRowSelected, rowIndex = props.rowIndex, isCollapseable = props.isCollapseable, collapsedElement = props.collapsedElement;
-    var _b = react_1.useState(false), open = _b[0], setOpen = _b[1];
+    var _a = react_1.useState(false), open = _a[0], setOpen = _a[1];
     var cellCount = cellsMetadata.length;
     var handleClick = function () {
-        var _a;
-        (_a = onRowSelected) === null || _a === void 0 ? void 0 : _a(rowIndex);
+        onRowSelected === null || onRowSelected === void 0 ? void 0 : onRowSelected(rowIndex);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.TableRow, { hover: true, selected: isRowSelected, onClick: handleClick },
@@ -30,7 +41,6 @@ function SmartTableRow(props) {
             cellsMetadata.map(function (cell) { return (react_1.default.createElement(core_1.TableCell, { key: cell.id + rowIndex.toString(), align: cell.numeric ? 'right' : 'left', padding: cell.disablePadding ? 'none' : 'default' }, cell.transform ? cell.transform(item[cell.id]) : item[cell.id])); })),
         isCollapseable && (react_1.default.createElement(core_1.TableRow, null,
             react_1.default.createElement(core_1.TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: cellCount + 1 },
-                react_1.default.createElement(core_1.Collapse, { in: open, unmountOnExit: true, timeout: "auto" }, (_a = collapsedElement) === null || _a === void 0 ? void 0 : _a(item)))))));
+                react_1.default.createElement(core_1.Collapse, { in: open, unmountOnExit: true, timeout: "auto" }, collapsedElement === null || collapsedElement === void 0 ? void 0 : collapsedElement(item)))))));
 }
 exports.SmartTableRow = SmartTableRow;
-//# sourceMappingURL=smart-table-row.js.map

package/dist/smart-table/smart-table-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type Order = 'asc' | 'desc';
 export declare type ElementFunction<T> = (item: T) => JSX.Element;
 export interface CellMetadata<T> {
@@ -8,4 +7,3 @@ export interface CellMetadata<T> {
     numeric: boolean;
     transform?: (value: T[keyof T]) => string;
 }
-//# sourceMappingURL=smart-table-types.d.ts.map

package/dist/smart-table/smart-table-types.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=smart-table-types.js.map

package/dist/smart-table/smart-table.d.ts

@@ -15,4 +15,3 @@ export interface SmartTableProps<T> {
     handleChangeRowsPerPage: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare function SmartTable<T>(props: SmartTableProps<T>): JSX.Element;
-//# sourceMappingURL=smart-table.d.ts.map

package/dist/smart-table/smart-table.js

@@ -1,12 +1,25 @@
 "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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
 var __importStar = (this && this.__importStar) || function (mod) {
     if (mod && mod.__esModule) return mod;
     var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.SmartTable = void 0;
 /* eslint-disable */
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
@@ -36,4 +49,3 @@ function SmartTable(props) {
         react_1.default.createElement(core_1.TablePagination, { rowsPerPage: rowsPerPage, rowsPerPageOptions: [5, 10], component: "div", count: count, page: page, onChangePage: handleChangePage, onChangeRowsPerPage: handleChangeRowsPerPage })));
 }
 exports.SmartTable = SmartTable;
-//# sourceMappingURL=smart-table.js.map

package/dist/theme/index.d.ts

@@ -1,2 +1 @@
 export * from './theme';
-//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -1,7 +1,13 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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 });
-__export(require("./theme"));
-//# sourceMappingURL=index.js.map
+__exportStar(require("./theme"), exports);

package/dist/theme/theme.d.ts

@@ -6,4 +6,3 @@ declare const mapMcToMuiTheme: (mcTheme: {
     [key: string]: string;
 }, prefersDarkMode?: boolean) => import("@material-ui/core").Theme;
 export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme };
-//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapMcToMuiTheme = exports.useMappedMuiTheme = exports.useMediaQuery = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("@material-ui/core");
 var useMediaQuery_1 = __importDefault(require("@material-ui/core/useMediaQuery"));
@@ -121,4 +122,3 @@ textIconOnDark: 'rgba(255, 255, 255, 0.5)', */
 --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
 --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); */
-//# sourceMappingURL=theme.js.map

package/dist/utils/map.d.ts

@@ -1,4 +1,3 @@
 export declare const toRadian: (num: number) => number;
 export declare const toDegrees: (num: number) => number;
 export declare const getAltitude: (mapzoom: number) => number;
-//# sourceMappingURL=map.d.ts.map

package/dist/utils/map.js

@@ -1,13 +1,16 @@
 "use strict";
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toRadian = function (num) {
+exports.getAltitude = exports.toDegrees = exports.toRadian = void 0;
+var toRadian = function (num) {
     return (num * Math.PI) / 180;
 };
-exports.toDegrees = function (num) {
+exports.toRadian = toRadian;
+var toDegrees = function (num) {
     return num * (180 / Math.PI);
 };
-exports.getAltitude = function (mapzoom) {
+exports.toDegrees = toDegrees;
+var getAltitude = function (mapzoom) {
     //this equation is a transformation of the angular size equation solving for D. See: http://en.wikipedia.org/wiki/Forced_perspective
     var firstPartOfEq = 0.05 * (591657550.5 / Math.pow(2, mapzoom - 1) / 2); //amount displayed is .05 meters and map scale =591657550.5/(Math.pow(2,(mapzoom-1))))
     //this bit ^ essentially gets the h value in the angular size eq then divides it by 2
@@ -15,4 +18,4 @@ exports.getAltitude = function (mapzoom) {
         (Math.cos(exports.toRadian(85.362 / 2)) / Math.sin(exports.toRadian(85.362 / 2))); //85.362 is angle which google maps displays on a 5cm wide screen
     return googleearthaltitude;
 };
-//# sourceMappingURL=map.js.map
+exports.getAltitude = getAltitude;

package/dist/utils/projections.d.ts

@@ -4,4 +4,3 @@ export declare enum Proj {
 }
 export declare const COORDINATES_WGS_FRACTION_DIGITS = 5;
 export declare const COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
-//# sourceMappingURL=projections.d.ts.map

package/dist/utils/projections.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.COORDINATES_MERCATOR_FRACTION_DIGITS = exports.COORDINATES_WGS_FRACTION_DIGITS = exports.Proj = void 0;
 var Proj;
 (function (Proj) {
     Proj["WGS84"] = "EPSG:4326";
@@ -7,4 +8,3 @@ var Proj;
 })(Proj = exports.Proj || (exports.Proj = {}));
 exports.COORDINATES_WGS_FRACTION_DIGITS = 5;
 exports.COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
-//# sourceMappingURL=projections.js.map

package/dist/utils/story.d.ts

@@ -10,4 +10,3 @@ export interface CSFStory<StoryFnReturnType = unknown> {
     argTypes?: ArgTypes;
     (): StoryFnReturnType;
 }
-//# sourceMappingURL=story.d.ts.map

package/dist/utils/story.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=story.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.7.4",
+  "version": "3.10.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,6 +17,7 @@
   "license": "MIT",
   "dependencies": {
     "@date-io/date-fns": "^1.3.13",
+    "@here/quantized-mesh-decoder": "^1.2.8",
     "@map-colonies/react-core": "^3.3.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
@@ -36,7 +37,9 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "@types/textarea-caret": "^3.0.1",
-    "cesium": "^1.82.0",
+    "cesium": "1.84.0",
+    "chonky": "^2.3.2",
+    "chonky-icon-fontawesome": "^2.3.2",
     "copy-webpack-plugin": "^6.3.1",
     "copyfiles": "2.3.0",
     "cross-env": "7.0.2",
@@ -50,7 +53,7 @@
     "resium": "^1.13.1",
     "rimraf": "3.0.2",
     "textarea-caret": "^3.1.0",
-    "typescript": "~3.7.2"
+    "typescript": "4.2.2"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -63,6 +66,7 @@
     "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
     "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
     "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
+    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
     "build-storybook": "build-storybook -s public",
     "eslint-check": "npx eslint . --ext .ts,.tsx"
   },
@@ -88,7 +92,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "934b818b3fa901cdf23aecacf23cc6909b8b2a9d",
+  "gitHead": "ea9027bfc301f8c3931a3eca8b33d3985b0a2bda",
   "jest": {
     "coverageReporters": [
       "text",

package/src/lib/cesium-map/context-menu.stories.tsx

@@ -7,7 +7,7 @@ import { CesiumSceneMode } from './map.types';
 import { IRasterLayer } from './layers-manager';
 
 export default {
-  title: 'Cesium Map/Context Menu',
+  title: 'Cesium Map',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -442,4 +442,3 @@ export const MapWithContextMenu: Story = () => {
     </div>
   );
 };
-MapWithContextMenu.storyName = 'Map Context Menu';

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

@@ -87,10 +87,9 @@ Cesium3DTilesetOnHeightLayer.argTypes = {
 export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
-      <Cesium3DTileset url="/mock/Rehovot_solar_tileset/L16_31232/L16_31232.json" />
       <Cesium3DTileset
         isZoomTo={true}
-        url="/mock/Rehovot_solar_tileset/L16_31023/L16_31023.json"
+        url="/mock/tileset_2/L16_31023/L16_31023.json"
       />
     </CesiumMap>
   </div>

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

@@ -0,0 +1,72 @@
+/*
+   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/src/lib/cesium-map/layers/layers.rect.stories.tsx

@@ -0,0 +1,171 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { Rectangle, Color } from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import bbox from '@turf/bbox';
+import { CesiumMap, CesiumMapProps, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { IRasterLayer, LayerType } from '../layers-manager';
+import { IBaseMaps } from '../settings/settings';
+import { CesiumXYZLayer } from './xyz.layer';
+
+export default {
+  title: 'Cesium Map/Layers/LayersRect',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '3rd',
+      title: '3rd Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/d8b97d3e38a0d43e5a06dea9aae17a3e.png',
+      baseRasteLayers: [
+        {
+          id: 'VECTOR_TILES',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url:
+              'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38',
+            layers: '',
+            credit: 'thunderforest',
+          },
+        },
+        {
+          id: 'VECTOR_TILES_GPS',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 1,
+          options: {
+            url: 'https://gps.tile.openstreetmap.org/lines/{z}/{x}/{y}.png',
+            layers: '',
+            credit: 'openstreetmap',
+          },
+        },
+        {
+          id: 'WMTS_POPULATION_TILES',
+          type: 'WMTS_LAYER',
+          opacity: 0.4,
+          zIndex: 2,
+          options: {
+            url:
+              'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
+            layer: 'USGSShadedReliefOnly',
+            style: 'default',
+            format: 'image/jpeg',
+            tileMatrixSetID: 'default028mm',
+            maximumLevel: 19,
+            credit: 'U. S. Geological Survey',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const mapViewProps: CesiumMapProps = {
+  center: [34.811, 31.908],
+  zoom: 14,
+  imageryProvider: false,
+  sceneModes: [CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW],
+  baseMaps: BASE_MAPS as IBaseMaps,
+};
+
+const optionsRectXYZ = {
+  url:
+    'https://tiles.openaerialmap.org/5a831b4a2553e6000ce5ac80/0/d02ddc76-9c2e-4994-97d4-a623eb371456/{z}/{x}/{y}.png',
+  footprint: {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [34.8043847068541, 31.9023297972932],
+        [34.8142791322292, 31.9023297972932],
+        [34.8142791322292, 31.9108796531516],
+        [34.8043847068541, 31.9108796531516],
+        [34.8043847068541, 31.9023297972932],
+      ],
+    ],
+  },
+};
+
+// Use Turf.js/bbox to calculate the bounding box from the supplied footprint.
+
+const childLayerRect = Rectangle.fromDegrees(...bbox(optionsRectXYZ.footprint));
+
+export const MapWithXYZLayersAndRect: Story = () => (
+  <div style={mapDivStyle}>
+    <CesiumMap {...mapViewProps}>
+      <CesiumXYZLayer rectangle={childLayerRect} options={optionsRectXYZ} />
+    </CesiumMap>
+  </div>
+);
+
+MapWithXYZLayersAndRect.storyName = 'XYZ child layer with rect';
+
+export const MapWithSettings: Story = () => {
+  const layer = {
+    id: '2_raster_ext',
+    type: 'XYZ_LAYER' as LayerType,
+    opacity: 1,
+    zIndex: 0,
+    show: true,
+    options: {
+      url:
+        'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
+    },
+  };
+
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap {...mapViewProps}>
+        <LayerViewer layer={layer as IRasterLayer} />
+      </CesiumMap>
+    </div>
+  );
+};
+MapWithSettings.storyName = 'Layer manager rect';
+
+interface ILayerViewerProps {
+  layer: IRasterLayer;
+}
+
+const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
+  const mapViewer = useCesiumMap();
+  const { layer } = props;
+
+  // Mockin footprint data on layer meta
+  const layerFootprint = {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [34.8099445223518, 31.9061345394902],
+        [34.8200994167574, 31.9061345394902],
+        [34.8200994167574, 31.9106311613979],
+        [34.8099445223518, 31.9106311613979],
+        [34.8099445223518, 31.9061345394902],
+      ],
+    ],
+  };
+
+  useLayoutEffect(() => {
+    const layerManagerRect = Rectangle.fromDegrees(...bbox(layerFootprint));
+
+    layer.options.rectangle = layerManagerRect;
+
+    mapViewer.layersManager?.addRasterLayer(layer, 0, '');
+  }, [mapViewer, layerFootprint, layer]);
+  return <></>;
+};

package/src/lib/cesium-map/layers-manager.stories.tsx

@@ -5,7 +5,7 @@ import { CesiumSceneMode } from './map.types';
 import { IRasterLayer } from './layers-manager';
 
 export default {
-  title: 'Cesium Map/Layers Manager',
+  title: 'Cesium Map',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -191,7 +191,7 @@ const layers = [
   },
 ];
 
-export const MapWithSettings: Story = () => {
+export const LayersManager: Story = () => {
   const [center] = useState<[number, number]>([34.811, 31.908]);
   return (
     <div style={mapDivStyle}>
@@ -207,7 +207,6 @@ export const MapWithSettings: Story = () => {
     </div>
   );
 };
-MapWithSettings.storyName = 'Map Layer Manager';
 
 interface ILayersMozaikProps {
   layers: IRasterLayer[];

package/src/lib/cesium-map/layers-manager.ts

@@ -25,9 +25,11 @@ export interface ICesiumImageryLayer extends InstanceType<typeof ImageryLayer> {
   meta?: Record<string, unknown>;
 }
 
+export type LayerType = 'OSM_LAYER' | 'WMTS_LAYER' | 'WMS_LAYER' | 'XYZ_LAYER';
+
 export interface IRasterLayer {
   id: string;
-  type: 'OSM_LAYER' | 'WMTS_LAYER' | 'WMS_LAYER' | 'XYZ_LAYER';
+  type: LayerType;
   opacity: number;
   zIndex: number;
   show?: boolean;

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

@@ -24,13 +24,13 @@ export const BaseMap: Story = (args: CesiumMapProps) => (
   </div>
 );
 
-export const ZommedMap: Story = (args: CesiumMapProps) => (
+export const ZoomedMap: Story = (args: CesiumMapProps) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}></CesiumMap>
   </div>
 );
 
-ZommedMap.argTypes = {
+ZoomedMap.argTypes = {
   center: {
     defaultValue: [34.9578094, 32.8178637],
   },
@@ -100,7 +100,7 @@ Map2DWithProjection.argTypes = {
     },
   },
 };
-Map2DWithProjection.storyName = '2D Map with projection';
+Map2DWithProjection.storyName = '2D Map With Projection';
 
 export const LocalizedMap: Story = (args: CesiumMapProps) => (
   <div style={mapDivStyle}>