@map-colonies/react-components 3.11.0 → 3.12.3

package/dist/cesium-map/layers-manager.js

@@ -22,16 +22,29 @@ var point_geojson_1 = require("./tools/geojson/point.geojson");
 var INC = 1;
 var DEC = -1;
 var LayerManager = /** @class */ (function () {
-    function LayerManager(mapViewer) {
+    function LayerManager(mapViewer, legendsExtractor, onLayersUpdate) {
+        var _this = this;
         this.mapViewer = mapViewer;
         // eslint-disable-next-line
         this.layers = this.mapViewer.imageryLayers._layers;
+        this.legendsList = [];
+        this.legendsExtractor = legendsExtractor;
+        this.layerUpdated = new cesium_1.Event();
+        if (onLayersUpdate) {
+            this.layerUpdated.addEventListener(onLayersUpdate, this);
+        }
+        this.mapViewer.imageryLayers.layerRemoved.addEventListener(function () {
+            _this.setLegends();
+            _this.layerUpdated.raiseEvent();
+        });
     }
     /* eslint-disable */
     LayerManager.prototype.addMetaToLayer = function (meta, layerPredicate) {
         var layer = this.layers.find(layerPredicate);
         if (layer) {
             layer.meta = meta;
+            this.setLegends();
+            this.layerUpdated.raiseEvent();
         }
     };
     /* eslint-enable */
@@ -192,6 +205,11 @@ var LayerManager = /** @class */ (function () {
             return ((_a = layer2.meta) === null || _a === void 0 ? void 0 : _a.zIndex) - ((_b = layer1.meta) === null || _b === void 0 ? void 0 : _b.zIndex);
         });
     };
+    LayerManager.prototype.setLegends = function () {
+        if (typeof this.legendsExtractor !== 'undefined') {
+            this.legendsList = this.legendsExtractor(this.layers);
+        }
+    };
     LayerManager.prototype.getBaseLayersCount = function () {
         var baseLayers = this.layers.filter(function (layer) {
             var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');

package/dist/cesium-map/map-legend/MapLegend.css

@@ -0,0 +1,135 @@
+.mapLegendSidebarContainer {
+  width: 340px;
+  height: 100%;
+  position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-size: 16px;
+}
+
+/* Disable drawer animation */
+
+.mapLegendSidebarContainer.mdc-drawer--animate {
+  transform: translateX(0) !important;
+  transition: none !important;
+}
+
+.mapLegendSidebarContainer.mdc-drawer--dismissible {
+  position: relative;
+}
+
+div.MuiPaper-root {
+  transition: none !important;
+}
+
+.mapLegendCloseBtn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+  padding: 20px;
+  font-size: 24px;
+}
+
+body[dir='rtl'] .mapLegendCloseBtn {
+  right: unset;
+  left: 0;
+}
+
+.mapLegendToggleContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mapLegendIcon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.sidebarHeaderContainer {
+  text-align: center;
+  margin-top: 40px;
+}
+
+.sidebarTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.mapLegend {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  padding: 10px 14px;
+}
+
+.layerNameContainer {
+  width: 90%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.layerName {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.legendImg {
+  width: 90%;
+  height: 150px;
+  border: 1px solid black;
+  border-radius: 5px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.legendActionsContainer {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+}
+
+.legendAction:not(:last-child)::after {
+  content: '|';
+  margin: 0px 4px;
+}
+
+.mapLegendsList {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 0px;
+  width: 100%;
+  height: 90%;
+}
+
+.legendAction {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 1.1rem;
+  transition: all 0.1s ease-in-out;
+  width: max-content;
+}
+
+.legendAction:hover {
+  filter: brightness(1.2);
+}
+
+.noLegendsContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.noLegendsMsg {
+  text-align: center;
+}

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './MapLegend.css';
+export interface IMapLegend {
+    layer?: string;
+    legendDoc?: string;
+    legendImg?: string;
+    legend?: Record<string, unknown>[];
+}
+interface MapLegendProps {
+    legend: IMapLegend;
+    docText?: string;
+    imgText?: string;
+}
+export declare const MapLegend: React.FC<MapLegendProps>;
+export {};

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

@@ -0,0 +1,57 @@
+"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 (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapLegend = void 0;
+var react_1 = __importStar(require("react"));
+var react_core_1 = require("@map-colonies/react-core");
+var box_1 = require("../../box");
+require("./MapLegend.css");
+var MapLegend = function (_a) {
+    var _b = _a.legend, legendImg = _b.legendImg, legendDoc = _b.legendDoc, layer = _b.layer, docText = _a.docText, imgText = _a.imgText;
+    var handleLegendImgOpen = react_1.useCallback(function () {
+        // Open image in a new tab.
+        window.open(legendImg, '_blank');
+    }, [legendImg]);
+    var handleLegendDocOpen = react_1.useCallback(function () {
+        // Open doc in a new tab.
+        window.open(legendDoc, '_blank');
+    }, [legendDoc]);
+    var renderLayerName = react_1.useCallback(function () {
+        var MAX_LAYER_NAME_LENGTH = 15;
+        var layerNameContainer = (react_1.default.createElement(box_1.Box, { className: "layerNameContainer" },
+            react_1.default.createElement("h3", { style: { maxWidth: MAX_LAYER_NAME_LENGTH + "ch" }, className: "layerName" }, layer)));
+        if ((layer !== null && layer !== void 0 ? layer : '').length > MAX_LAYER_NAME_LENGTH) {
+            return react_1.default.createElement(react_core_1.Tooltip, { content: layer }, layerNameContainer);
+        }
+        return layerNameContainer;
+    }, [layer]);
+    var renderLinks = react_1.useCallback(function () {
+        return [
+            typeof legendImg === 'string' && (react_1.default.createElement("a", { className: "legendAction", href: legendImg, target: "_blank", rel: "noreferrer" }, imgText)),
+            typeof legendDoc === 'string' && (react_1.default.createElement("a", { className: "legendAction", href: legendDoc, target: "_blank", rel: "noreferrer" }, docText)),
+        ];
+    }, [legendImg, imgText, legendDoc, docText]);
+    return (react_1.default.createElement(box_1.Box, { className: "mapLegend" },
+        renderLayerName(),
+        react_1.default.createElement("img", { alt: "Map Legend", className: "legendImg", src: legendImg, onClick: handleLegendImgOpen }),
+        react_1.default.createElement(box_1.Box, { className: "legendActionsContainer" }, renderLinks())));
+};
+exports.MapLegend = MapLegend;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { IMapLegend } from './MapLegend';
+import './MapLegend.css';
+interface MapLegendListProps {
+    legends: IMapLegend[];
+    actionsTexts: {
+        docText: string;
+        imgText: string;
+    };
+    noLegendsText: string;
+}
+export declare const MapLegendList: React.FC<MapLegendListProps>;
+export {};

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

@@ -0,0 +1,43 @@
+"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 (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MapLegendList = void 0;
+var react_1 = __importStar(require("react"));
+var box_1 = require("../../box");
+var MapLegend_1 = require("./MapLegend");
+require("./MapLegend.css");
+var MapLegendList = function (_a) {
+    var legends = _a.legends, _b = _a.actionsTexts, docText = _b.docText, imgText = _b.imgText, noLegendsText = _a.noLegendsText;
+    var handleNoLegends = react_1.useCallback(function () {
+        return (react_1.default.createElement(box_1.Box, { className: "noLegendsContainer" },
+            react_1.default.createElement("h2", { className: "noLegendsMsg" }, noLegendsText)));
+    }, [noLegendsText]);
+    var renderList = react_1.useCallback(function () {
+        if (!legends.length) {
+            return handleNoLegends();
+        }
+        return legends.map(function (legend, i) {
+            return (react_1.default.createElement(MapLegend_1.MapLegend, { key: legend.layer + "_" + i, legend: legend, docText: docText, imgText: imgText }));
+        });
+    }, [legends]);
+    return react_1.default.createElement(box_1.Box, { className: "mapLegendsList" }, renderList());
+};
+exports.MapLegendList = MapLegendList;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { IMapLegend } from './MapLegend';
+import './MapLegend.css';
+interface MapLegendSidebarProps {
+    isOpen: boolean;
+    toggleSidebar: () => void;
+    title?: string;
+    noLegendsText?: string;
+    actionsTexts?: {
+        docText: string;
+        imgText: string;
+    };
+    legends?: IMapLegend[];
+}
+export declare const MapLegendSidebar: React.FC<MapLegendSidebarProps>;
+export {};

package/dist/cesium-map/map-legend/MapLegendSidebar.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.MapLegendSidebar = void 0;
+var react_1 = __importDefault(require("react"));
+var react_core_1 = require("@map-colonies/react-core");
+var MapLegendList_1 = require("./MapLegendList");
+require("./MapLegend.css");
+var MapLegendSidebar = function (_a) {
+    var isOpen = _a.isOpen, toggleSidebar = _a.toggleSidebar, _b = _a.title, title = _b === void 0 ? 'Map Legends' : _b, _c = _a.noLegendsText, noLegendsText = _c === void 0 ? 'No legends to display...' : _c, _d = _a.actionsTexts, actionsTexts = _d === void 0 ? { docText: 'Docs', imgText: 'View Image' } : _d, _e = _a.legends, legends = _e === void 0 ? [] : _e;
+    return isOpen ? (react_1.default.createElement(react_core_1.Drawer, { className: "mapLegendSidebarContainer", modal: false, dismissible: true, open: isOpen },
+        react_1.default.createElement(react_core_1.DrawerHeader, { className: "sidebarHeaderContainer" },
+            react_1.default.createElement(react_core_1.DrawerTitle, { className: "sidebarTitle" }, title)),
+        react_1.default.createElement(react_core_1.DrawerContent, { className: "sidebarContent" },
+            react_1.default.createElement(react_core_1.Icon, { onClick: toggleSidebar, className: "mapLegendCloseBtn", icon: { icon: 'close', size: 'small' } }),
+            react_1.default.createElement(MapLegendList_1.MapLegendList, { noLegendsText: noLegendsText, legends: legends, actionsTexts: actionsTexts })))) : null;
+};
+exports.MapLegendSidebar = MapLegendSidebar;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import './MapLegend.css';
+interface MapLegendProps {
+    onClick: () => void;
+}
+export declare const MapLegendToggle: React.FC<MapLegendProps>;
+export {};

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,8 @@ export interface CesiumMapProps extends ViewerProps {
         width: number;
         dynamicHeightIncrement?: number;
     };
+    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,45 @@ 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/proxied.types.d.ts

@@ -1,4 +1,4 @@
-import { PolylineDashMaterialProperty, ConstantProperty, VerticalOrigin, LabelStyle, Cartesian2, Cartesian3, BoundingSphere, Ellipsoid, ConstantPositionProperty, GeographicTilingScheme, Cartographic } from 'cesium';
+import { BoundingSphere, Cartesian2, Cartesian3, Cartographic, CesiumTerrainProvider, ConstantPositionProperty, ConstantProperty, Ellipsoid, EllipsoidTerrainProvider, GeographicTilingScheme, LabelStyle, PolylineDashMaterialProperty, Rectangle, Resource, VerticalOrigin } from 'cesium';
 export declare class CesiumPolylineDashMaterialProperty extends PolylineDashMaterialProperty {
 }
 export declare class CesiumConstantProperty extends ConstantProperty {
@@ -17,6 +17,14 @@ export declare class CesiumEllipsoid extends Ellipsoid {
 }
 export declare class CesiumGeographicTilingScheme extends GeographicTilingScheme {
 }
+export declare class CesiumRectangle extends Rectangle {
+}
+export declare class CesiumResource extends Resource {
+}
+export declare class CesiumEllipsoidTerrainProvider extends EllipsoidTerrainProvider {
+}
+export declare class CesiumCesiumTerrainProvider extends CesiumTerrainProvider {
+}
 export declare const CesiumVerticalOrigin: typeof VerticalOrigin;
 export declare const CesiumLabelStyle: typeof LabelStyle;
 export { sampleTerrainMostDetailed as cesiumSampleTerrainMostDetailed } from 'cesium';

package/dist/cesium-map/proxied.types.js

@@ -15,7 +15,7 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.cesiumSampleTerrainMostDetailed = exports.CesiumLabelStyle = exports.CesiumVerticalOrigin = exports.CesiumGeographicTilingScheme = exports.CesiumEllipsoid = exports.CesiumBoundingSphere = exports.CesiumCartographic = exports.CesiumCartesian3 = exports.CesiumCartesian2 = exports.CesiumConstantPositionProperty = exports.CesiumConstantProperty = exports.CesiumPolylineDashMaterialProperty = void 0;
+exports.cesiumSampleTerrainMostDetailed = exports.CesiumLabelStyle = exports.CesiumVerticalOrigin = exports.CesiumCesiumTerrainProvider = exports.CesiumEllipsoidTerrainProvider = exports.CesiumResource = exports.CesiumRectangle = exports.CesiumGeographicTilingScheme = exports.CesiumEllipsoid = exports.CesiumBoundingSphere = exports.CesiumCartographic = exports.CesiumCartesian3 = exports.CesiumCartesian2 = exports.CesiumConstantPositionProperty = exports.CesiumConstantProperty = exports.CesiumPolylineDashMaterialProperty = void 0;
 var cesium_1 = require("cesium");
 // PROXIED CLASSES
 var CesiumPolylineDashMaterialProperty = /** @class */ (function (_super) {
@@ -90,6 +90,38 @@ var CesiumGeographicTilingScheme = /** @class */ (function (_super) {
     return CesiumGeographicTilingScheme;
 }(cesium_1.GeographicTilingScheme));
 exports.CesiumGeographicTilingScheme = CesiumGeographicTilingScheme;
+var CesiumRectangle = /** @class */ (function (_super) {
+    __extends(CesiumRectangle, _super);
+    function CesiumRectangle() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumRectangle;
+}(cesium_1.Rectangle));
+exports.CesiumRectangle = CesiumRectangle;
+var CesiumResource = /** @class */ (function (_super) {
+    __extends(CesiumResource, _super);
+    function CesiumResource() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumResource;
+}(cesium_1.Resource));
+exports.CesiumResource = CesiumResource;
+var CesiumEllipsoidTerrainProvider = /** @class */ (function (_super) {
+    __extends(CesiumEllipsoidTerrainProvider, _super);
+    function CesiumEllipsoidTerrainProvider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumEllipsoidTerrainProvider;
+}(cesium_1.EllipsoidTerrainProvider));
+exports.CesiumEllipsoidTerrainProvider = CesiumEllipsoidTerrainProvider;
+var CesiumCesiumTerrainProvider = /** @class */ (function (_super) {
+    __extends(CesiumCesiumTerrainProvider, _super);
+    function CesiumCesiumTerrainProvider() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumCesiumTerrainProvider;
+}(cesium_1.CesiumTerrainProvider));
+exports.CesiumCesiumTerrainProvider = CesiumCesiumTerrainProvider;
 // PROXIED ENUMS
 // eslint-disable-next-line @typescript-eslint/naming-convention
 exports.CesiumVerticalOrigin = cesium_1.VerticalOrigin;