@map-colonies/react-components 3.10.4 → 3.12.0

package/CHANGELOG.md

@@ -3,6 +3,77 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.12.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.11.0...@map-colonies/react-components@3.12.0) (2022-08-04)
+
+
+### Bug Fixes
+
+* legend sidebar ([cdca0cc](https://github.com/MapColonies/shared-components/commit/cdca0ccd1f8ee21a575557cc6c13903beaed8ca2))
+* legends style tweaks ([eec1f08](https://github.com/MapColonies/shared-components/commit/eec1f083fa22c818cb55ab3e4d947b61e428f215))
+* lint and prettier ([68bf8f6](https://github.com/MapColonies/shared-components/commit/68bf8f64321043ee1d00d46c08f834698bf18276))
+* map legends final tweaks ([9b00733](https://github.com/MapColonies/shared-components/commit/9b00733594716a0d19eff17249cd2280ca8704a3))
+* map legends fine tuning ([de59b02](https://github.com/MapColonies/shared-components/commit/de59b02a657000e24f962dfc0c405a73f8d4ba11))
+* map legends props to single prop ([5fafca0](https://github.com/MapColonies/shared-components/commit/5fafca0705d1bbee29e80121c09c19fd9c2a959f))
+* map legends styles ([1355962](https://github.com/MapColonies/shared-components/commit/135596209224f52c11d28a2b85f2b470c1980936))
+* pr rejects and prettier ([2fbeb20](https://github.com/MapColonies/shared-components/commit/2fbeb206e2f86589128d21e2ac14e5a57090d7f2))
+* prettier ([f12096a](https://github.com/MapColonies/shared-components/commit/f12096a9839beddad1553ade17c338a07414d882))
+* X btn wrong place ([9ff0ca0](https://github.com/MapColonies/shared-components/commit/9ff0ca0ef928db12d47b1bd428967feadb411d10))
+
+
+### Features
+
+* add sidebar for the cesium viewer ([81dfe0b](https://github.com/MapColonies/shared-components/commit/81dfe0bdd38d7dcaa131e7b5e24000767b794d81))
+* implement legends sidebar and create story ([60e9b58](https://github.com/MapColonies/shared-components/commit/60e9b587aadb866a9ce14d6508c39239fdfd03fb))
+
+
+
+
+
+# [3.11.0](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.10.5...@map-colonies/react-components@3.11.0) (2022-05-02)
+
+
+### Bug Fixes
+
+* 3d story ([ee59db0](https://github.com/MapColonies/shared-components/commit/ee59db00f627b709368f830a3c7cf30dc2cf0525))
+* 3d with update ([86fd98b](https://github.com/MapColonies/shared-components/commit/86fd98b59d137f3bfddc351a98cefcef7b6fc19a))
+* 3d with update ([c554c57](https://github.com/MapColonies/shared-components/commit/c554c57ba85c68e3a5e53c128714d86733db10d0))
+* bounding volume minimum height ([87e0e81](https://github.com/MapColonies/shared-components/commit/87e0e8114f088a4997723f91760f80250e67f629))
+* build errors ([57bc0fa](https://github.com/MapColonies/shared-components/commit/57bc0fac22aebf865112d3c26d1bf46ee57d4dad))
+* fix ([6999626](https://github.com/MapColonies/shared-components/commit/69996260b96379813b051104204568b190d46eaa))
+* fix ([d958564](https://github.com/MapColonies/shared-components/commit/d958564cf178e7258fcdf2c21a1915b0e442c52c))
+* fix ([db76412](https://github.com/MapColonies/shared-components/commit/db7641201cde062e360131a73081867b4db854ba))
+* fix ([16c4499](https://github.com/MapColonies/shared-components/commit/16c4499a33c1c5d0bd34cd33958d5381e05ac3b6))
+* linting ([ca5f578](https://github.com/MapColonies/shared-components/commit/ca5f578f0e2f3422213e4f7e4cfa1abdd05576b8))
+* prettier ([f516da2](https://github.com/MapColonies/shared-components/commit/f516da2ce8f1b59d18ace5cafe6e12642046e19a))
+* prettier ([226ca71](https://github.com/MapColonies/shared-components/commit/226ca71c110abf50c89a36125c33f3e66cf195dc))
+* prettier ([6b1c751](https://github.com/MapColonies/shared-components/commit/6b1c7511355e35b199a5b127668df93e9c393c3b))
+* prettier ([c4e6c13](https://github.com/MapColonies/shared-components/commit/c4e6c13ebc77774b8764f582f710777e316b586b))
+* prettier ([a6613d7](https://github.com/MapColonies/shared-components/commit/a6613d7292aa8eb0b00f83d0885e61dfa4860ca0))
+* revert ([44c6a9b](https://github.com/MapColonies/shared-components/commit/44c6a9b6a34f2f8a6281f26c90ddfe3583832100))
+* story ([c348df4](https://github.com/MapColonies/shared-components/commit/c348df4cdf771483e5e5ade78bac3e734dd4965d))
+* unused ([bf696fe](https://github.com/MapColonies/shared-components/commit/bf696fe20b7e20223ef9f05962d9eecbb2760d06))
+* zoom to ([e78def4](https://github.com/MapColonies/shared-components/commit/e78def47940ab569691677ee71f6ac41a4c3f1bd))
+
+
+### Features
+
+* update tileset ([17ed73c](https://github.com/MapColonies/shared-components/commit/17ed73c43ba41ad54e70e6c17d152eeb38887009))
+
+
+
+
+
+## [3.10.5](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.10.4...@map-colonies/react-components@3.10.5) (2022-03-29)
+
+
+### Bug Fixes
+
+* folderchain alignment ([#125](https://github.com/MapColonies/shared-components/issues/125)) ([01c3670](https://github.com/MapColonies/shared-components/commit/01c3670567b67b81ad98a10705eb1a8a0bc74206))
+
+
+
+
+
 ## [3.10.4](https://github.com/MapColonies/shared-components/compare/@map-colonies/react-components@3.10.3...@map-colonies/react-components@3.10.4) (2022-03-02)
 
 

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

@@ -15,22 +15,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cesium3DTileset = void 0;
-var cesium_1 = require("cesium");
 var react_1 = __importDefault(require("react"));
+var cesium_1 = require("cesium");
 var resium_1 = require("resium");
 var map_1 = require("../map");
+var GROUND_LEVEL = 0.0;
 var Cesium3DTileset = function (props) {
     var mapViewer = map_1.useCesiumMap();
     return (react_1.default.createElement(resium_1.Cesium3DTileset, __assign({}, props, { onReady: function (tileset) {
-            var _a;
+            var _a, _b;
             (_a = props.onReady) === null || _a === void 0 ? void 0 : _a.call(props, tileset);
-            if (props.isZoomTo) {
+            if (props.isZoomTo === true) {
                 void mapViewer.zoomTo(tileset);
             }
-            if (props.heightFromGround) {
-                var cartographic = cesium_1.Cartographic.fromCartesian(tileset.boundingSphere.center);
-                var surface = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
-                var offset = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, props.heightFromGround);
+            var scene = mapViewer.scene;
+            scene.globe.depthTestAgainstTerrain = true;
+            var cartographic = cesium_1.Cartographic.fromCartesian(tileset.boundingSphere.center);
+            var heightFromGround = (_b = props.heightFromGround) !== null && _b !== void 0 ? _b : GROUND_LEVEL;
+            if (heightFromGround) {
+                var surface = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
+                var offset = cesium_1.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + heightFromGround);
                 var translation = cesium_1.Cartesian3.subtract(offset, surface, new cesium_1.Cartesian3());
                 tileset.modelMatrix = cesium_1.Matrix4.fromTranslation(translation);
             }

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface Cesium3DTilesetWithUpdateProps {
+    url: string;
+    withUpdate?: boolean;
+}
+export declare const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps>;

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

@@ -0,0 +1,115 @@
+"use strict";
+/* 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
+*/
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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.Cesium3DTilesetWithUpdate = void 0;
+var react_1 = __importStar(require("react"));
+var cesium_1 = require("cesium");
+var map_1 = require("../map");
+var Cesium3DTilesetWithUpdate = function (_a) {
+    var url = _a.url, withUpdate = _a.withUpdate;
+    var mapViewer = map_1.useCesiumMap();
+    var scene = mapViewer.scene;
+    var cesium3DTileset = react_1.useState(new cesium_1.Cesium3DTileset({
+        url: url,
+    }))[0];
+    var tileset = react_1.useState(scene.primitives.add(cesium3DTileset))[0];
+    react_1.useEffect(function () {
+        scene.globe.depthTestAgainstTerrain = true;
+        void mapViewer.zoomTo(tileset);
+        if (withUpdate === true) {
+            updateTileset(tileset);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var updateContent = function (model, boundingVolume) {
+        var _a;
+        var height = boundingVolume.minimumHeight
+            ? boundingVolume.minimumHeight
+            : boundingVolume.center.z - boundingVolume.radius;
+        // @ts-ignore
+        var center = (_a = model._rtcCenter) !== null && _a !== void 0 ? _a : boundingVolume.center;
+        var normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new cesium_1.Cartesian3());
+        var offset = cesium_1.Cartesian3.multiplyByScalar(normal, height, new cesium_1.Cartesian3());
+        var carto = cesium_1.Cartographic.fromCartesian(center);
+        void new Promise(function (resolve, reject) {
+            // @ts-ignore
+            if (scene.terrainProvider._ready !== true) {
+                var result = __assign({}, carto);
+                result.height = 0;
+                resolve(result);
+            }
+            else {
+                void cesium_1.sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then(function (results) {
+                    var result = results[0];
+                    if (!cesium_1.defined(result)) {
+                        resolve(carto);
+                    }
+                    resolve(result);
+                });
+            }
+        }).then(function (result) {
+            var resultCartesian = cesium_1.Cartographic.toCartesian(result);
+            var position = cesium_1.Cartesian3.subtract(resultCartesian, offset, new cesium_1.Cartesian3());
+            // @ts-ignore
+            model._rtcCenter = cesium_1.Cartesian3.clone(position, model._rtcCenter);
+        });
+    };
+    var updateTile = function (tile) {
+        if (tile.content !== undefined) {
+            // @ts-ignore
+            updateContent(tile.content, tile.boundingVolume.boundingVolume);
+        }
+        else {
+            var listener_1 = tileset.tileLoad.addEventListener(function (t) {
+                if (t === tile) {
+                    updateContent(t.content, t.boundingVolume.boundingVolume);
+                    listener_1();
+                }
+            });
+        }
+        tile.children.forEach(function (child) { return updateTile(child); });
+    };
+    var updateTileset = function (tileset) {
+        void tileset.readyPromise.then(function () {
+            updateTile(tileset.root);
+        });
+    };
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.Cesium3DTilesetWithUpdate = Cesium3DTilesetWithUpdate;

package/dist/cesium-map/layers/imagery.layer.js

@@ -50,14 +50,18 @@ var CesiumImageryLayer = function (props) {
     var meta = props.meta, restProps = __rest(props, ["meta"]);
     var mapViewer = map_1.useCesiumMap();
     react_1.useLayoutEffect(function () {
-        var _a;
-        (_a = mapViewer.layersManager) === null || _a === void 0 ? void 0 : _a.addMetaToLayer(meta, function (layer, idx) {
+        var _a, _b;
+        (_a = mapViewer.layersManager) === null || _a === void 0 ? void 0 : _a.addMetaToLayer(meta, 
+        /* eslint-disable */
+        (_b = meta.searchLayerPredicate) !== null && _b !== void 0 ? _b : (function (layer, idx) {
             if (meta !== undefined) {
-                // eslint-disable-next-line
-                return layer._imageryProvider._resource._url === meta.url;
+                return (layer._imageryProvider._resource._url ===
+                    meta.options.url);
             }
             return false;
-        });
+        })
+        /* eslint-enable */
+        );
     }, [meta, mapViewer]);
     return react_1.default.createElement(resium_1.ImageryLayer, __assign({}, restProps));
 };

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

@@ -1,7 +1,8 @@
-import { ImageryLayer } from 'cesium';
+import { ImageryLayer, Event } from 'cesium';
 import { RCesiumOSMLayerOptions, RCesiumWMSLayerOptions, RCesiumWMTSLayerOptions, RCesiumXYZLayerOptions } from './layers';
 import { CesiumViewer } from './map';
 import { IBaseMap } from './settings/settings';
+import { IMapLegend } from './map-legend';
 export interface ICesiumImageryLayer extends InstanceType<typeof ImageryLayer> {
     meta?: Record<string, unknown>;
 }
@@ -21,10 +22,16 @@ export interface IVectorLayer {
     zIndex: number;
     url: string;
 }
+export declare type LegendExtractor = (layers: (any & {
+    meta: any;
+})[]) => IMapLegend[];
 declare class LayerManager {
     mapViewer: CesiumViewer;
     private readonly layers;
-    constructor(mapViewer: CesiumViewer);
+    legendsList: IMapLegend[];
+    layerUpdated: Event;
+    private readonly legendsExtractor?;
+    constructor(mapViewer: CesiumViewer, legendsExtractor?: LegendExtractor, onLayersUpdate?: () => void);
     addMetaToLayer(meta: any, layerPredicate: (layer: ImageryLayer, idx: number) => boolean): void;
     setBaseMapLayers(baseMap: IBaseMap): void;
     addRasterLayer(layer: IRasterLayer, index: number, parentId: string): void;
@@ -40,6 +47,7 @@ declare class LayerManager {
     showAllNotBase(isShow: boolean): void;
     get(layerId: string): ICesiumImageryLayer | undefined;
     findLayerByPOI(x: number, y: number): ICesiumImageryLayer[] | undefined;
+    private setLegends;
     private getBaseLayersCount;
     private findLayerById;
     private updateLayersOrder;

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_core_1 = require("@map-colonies/react-core");
+var react_1 = __importStar(require("react"));
+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", referrerPolicy: "noreferrer" }, imgText)),
+            typeof legendDoc === 'string' && (react_1.default.createElement("a", { className: "legendAction", href: legendDoc, target: "_blank", referrerPolicy: "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;
+    legends?: IMapLegend[];
+    actionsTexts?: {
+        docText: string;
+        imgText: string;
+    };
+}
+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_core_1 = require("@map-colonies/react-core");
+var react_1 = __importDefault(require("react"));
+require("./MapLegend.css");
+var MapLegendList_1 = require("./MapLegendList");
+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.legends, legends = _d === void 0 ? [] : _d, _e = _a.actionsTexts, actionsTexts = _e === void 0 ? { docText: 'Docs', imgText: 'View Image' } : _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 {};