@map-colonies/react-components 3.10.5 → 3.12.2

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

@@ -1,228 +1,246 @@
-"use strict";
-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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-var cesium_1 = require("cesium");
-var lodash_1 = require("lodash");
-var boolean_point_in_polygon_1 = __importDefault(require("@turf/boolean-point-in-polygon"));
-var point_geojson_1 = require("./tools/geojson/point.geojson");
-var INC = 1;
-var DEC = -1;
-var LayerManager = /** @class */ (function () {
-    function LayerManager(mapViewer) {
-        this.mapViewer = mapViewer;
-        // eslint-disable-next-line
-        this.layers = this.mapViewer.imageryLayers._layers;
-    }
-    /* eslint-disable */
-    LayerManager.prototype.addMetaToLayer = function (meta, layerPredicate) {
-        var layer = this.layers.find(layerPredicate);
-        if (layer) {
-            layer.meta = meta;
-        }
-    };
-    /* eslint-enable */
-    LayerManager.prototype.setBaseMapLayers = function (baseMap) {
-        var _this = this;
-        var sortedBaseMapLayers = baseMap.baseRasteLayers.sort(function (layer1, layer2) { return layer1.zIndex - layer2.zIndex; });
-        sortedBaseMapLayers.forEach(function (layer, idx) {
-            _this.addRasterLayer(layer, idx, baseMap.id);
-        });
-    };
-    LayerManager.prototype.addRasterLayer = function (layer, index, parentId) {
-        var cesiumLayer;
-        switch (layer.type) {
-            case 'XYZ_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.UrlTemplateImageryProvider(layer.options), index);
-                break;
-            case 'WMS_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapServiceImageryProvider(layer.options), index);
-                break;
-            case 'WMTS_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapTileServiceImageryProvider(layer.options), index);
-                break;
-            case 'OSM_LAYER':
-                break;
-        }
-        if (cesiumLayer) {
-            cesiumLayer.alpha = layer.opacity;
-            cesiumLayer.meta = __assign({ parentBasetMapId: parentId }, layer);
-            if (layer.show !== undefined) {
-                cesiumLayer.show = layer.show;
-            }
-        }
-    };
-    LayerManager.prototype.removeLayer = function (layerId) {
-        var layer = this.findLayerById(layerId);
-        if (layer) {
-            this.mapViewer.imageryLayers.remove(layer, true);
-        }
-    };
-    LayerManager.prototype.removeBaseMapLayers = function () {
-        var _this = this;
-        var layerToDelete = this.layers.filter(function (layer) {
-            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
-            return parentId ? true : false;
-        });
-        layerToDelete.forEach(function (layer) {
-            _this.mapViewer.imageryLayers.remove(layer, true);
-        });
-        // TODO: remove vector layers
-    };
-    // Remove all non base layers
-    LayerManager.prototype.removeNotBaseMapLayers = function () {
-        var _this = this;
-        var layerToDelete = this.layers.filter(function (layer) {
-            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
-            return parentId ? false : true;
-        });
-        layerToDelete.forEach(function (layer) {
-            _this.mapViewer.imageryLayers.remove(layer, true);
-        });
-        // TODO: remove vector layers
-    };
-    LayerManager.prototype.raise = function (layerId, positions) {
-        if (positions === void 0) { positions = 1; }
-        var layer = this.findLayerById(layerId);
-        var order = (layer === null || layer === void 0 ? void 0 : layer.meta).zIndex;
-        if (layer) {
-            for (var position = 0; position < positions; position++) {
-                this.mapViewer.imageryLayers.raise(layer);
-            }
-        }
-        this.updateLayersOrder(layerId, order, order + positions);
-    };
-    LayerManager.prototype.lower = function (layerId, positions) {
-        if (positions === void 0) { positions = 1; }
-        var layer = this.findLayerById(layerId);
-        var order = (layer === null || layer === void 0 ? void 0 : layer.meta).zIndex;
-        var lowerLimit = this.getBaseLayersCount();
-        var layerIdx = this.mapViewer.imageryLayers.indexOf(layer);
-        if (layerIdx - positions <= lowerLimit) {
-            positions = layerIdx - lowerLimit;
-        }
-        if (layer) {
-            for (var position = 0; position < positions; position++) {
-                this.mapViewer.imageryLayers.lower(layer);
-            }
-        }
-        this.updateLayersOrder(layerId, order, order - positions);
-    };
-    LayerManager.prototype.raiseToTop = function (layerId) {
-        var layer = this.findLayerById(layerId);
-        var order = (layer === null || layer === void 0 ? void 0 : layer.meta).zIndex;
-        if (layer) {
-            this.mapViewer.imageryLayers.raiseToTop(layer);
-        }
-        this.updateLayersOrder(layerId, order, this.mapViewer.imageryLayers.length - this.getBaseLayersCount() - 1);
-    };
-    LayerManager.prototype.lowerToBottom = function (layerId) {
-        var layer = this.findLayerById(layerId);
-        // const order = (layer?.meta as Record<string, unknown>).zIndex as number;
-        var lowerLimit = this.getBaseLayersCount();
-        var layerIdx = this.mapViewer.imageryLayers.indexOf(layer);
-        this.lower(layerId, layerIdx - lowerLimit);
-        // if (layer) {
-        //   this.mapViewer.imageryLayers.lowerToBottom(layer);
-        // }
-        // this.updateLayersOrder(layerId, order, 0);
-    };
-    LayerManager.prototype.length = function () {
-        return this.mapViewer.imageryLayers.length;
-    };
-    LayerManager.prototype.show = function (layerId, isShow) {
-        var layer = this.get(layerId);
-        if (layer !== undefined) {
-            layer.show = isShow;
-        }
-    };
-    LayerManager.prototype.showAllNotBase = function (isShow) {
-        var _this = this;
-        var nonBaseLayers = this.layers.filter(function (layer) {
-            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
-            return parentId ? false : true;
-        });
-        nonBaseLayers.forEach(function (layer) {
-            var _a;
-            _this.show((_a = layer.meta) === null || _a === void 0 ? void 0 : _a.id, isShow);
-        });
-    };
-    LayerManager.prototype.get = function (layerId) {
-        var layerInt = this.findLayerById(layerId);
-        var layerIdx = this.mapViewer.imageryLayers.indexOf(layerInt);
-        return layerIdx ? this.mapViewer.imageryLayers.get(layerIdx) : undefined;
-    };
-    LayerManager.prototype.findLayerByPOI = function (x, y) {
-        var position = point_geojson_1.pointToGeoJSON(this.mapViewer, x, y);
-        var nonBaseLayers = this.layers.filter(function (layer) {
-            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
-            return parentId ? false : true;
-        });
-        var selectedVisibleLayers = nonBaseLayers.filter(function (layer) {
-            var layerFootprint = lodash_1.get(layer.meta, 'details.footprint');
-            if (layerFootprint !== undefined) {
-                var isInLayer = boolean_point_in_polygon_1.default(position.geometry, {
-                    type: 'Feature',
-                    properties: {},
-                    geometry: layerFootprint,
-                });
-                return isInLayer && layer.show;
-            }
-            else {
-                console.warn('CesiumImageryLayer has no defined footprint', layer.meta);
-                return false;
-            }
-        });
-        return selectedVisibleLayers.sort(function (layer1, layer2) {
-            var _a, _b;
-            // @ts-ignore
-            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.getBaseLayersCount = function () {
-        var baseLayers = this.layers.filter(function (layer) {
-            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
-            return parentId ? true : false;
-        });
-        return baseLayers.length;
-    };
-    LayerManager.prototype.findLayerById = function (layerId) {
-        return this.layers.find(function (layer) {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            return layer.meta !== undefined ? layer.meta.id === layerId : false;
-        });
-    };
-    LayerManager.prototype.updateLayersOrder = function (id, from, to) {
-        var move = from > to ? INC : DEC;
-        var min = from < to ? from : to;
-        var max = from < to ? to : from;
-        this.layers.forEach(function (layer) {
-            var _a;
-            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
-            if (!parentId) {
-                var layerOrder = (_a = layer.meta) === null || _a === void 0 ? void 0 : _a.zIndex;
-                layer.meta.zIndex =
-                    layerOrder >= min && layerOrder <= max && layerOrder !== from
-                        ? layerOrder + move
-                        : layerOrder === from
-                            ? to
-                            : layerOrder;
-            }
-        });
-    };
-    return LayerManager;
-}());
-exports.default = LayerManager;
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+var cesium_1 = require("cesium");
+var lodash_1 = require("lodash");
+var boolean_point_in_polygon_1 = __importDefault(require("@turf/boolean-point-in-polygon"));
+var point_geojson_1 = require("./tools/geojson/point.geojson");
+var INC = 1;
+var DEC = -1;
+var LayerManager = /** @class */ (function () {
+    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 */
+    LayerManager.prototype.setBaseMapLayers = function (baseMap) {
+        var _this = this;
+        var sortedBaseMapLayers = baseMap.baseRasteLayers.sort(function (layer1, layer2) { return layer1.zIndex - layer2.zIndex; });
+        sortedBaseMapLayers.forEach(function (layer, idx) {
+            _this.addRasterLayer(layer, idx, baseMap.id);
+        });
+    };
+    LayerManager.prototype.addRasterLayer = function (layer, index, parentId) {
+        var cesiumLayer;
+        switch (layer.type) {
+            case 'XYZ_LAYER':
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.UrlTemplateImageryProvider(layer.options), index);
+                break;
+            case 'WMS_LAYER':
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapServiceImageryProvider(layer.options), index);
+                break;
+            case 'WMTS_LAYER':
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapTileServiceImageryProvider(layer.options), index);
+                break;
+            case 'OSM_LAYER':
+                break;
+        }
+        if (cesiumLayer) {
+            cesiumLayer.alpha = layer.opacity;
+            cesiumLayer.meta = __assign({ parentBasetMapId: parentId }, layer);
+            if (layer.show !== undefined) {
+                cesiumLayer.show = layer.show;
+            }
+        }
+    };
+    LayerManager.prototype.removeLayer = function (layerId) {
+        var layer = this.findLayerById(layerId);
+        if (layer) {
+            this.mapViewer.imageryLayers.remove(layer, true);
+        }
+    };
+    LayerManager.prototype.removeBaseMapLayers = function () {
+        var _this = this;
+        var layerToDelete = this.layers.filter(function (layer) {
+            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
+            return parentId ? true : false;
+        });
+        layerToDelete.forEach(function (layer) {
+            _this.mapViewer.imageryLayers.remove(layer, true);
+        });
+        // TODO: remove vector layers
+    };
+    // Remove all non base layers
+    LayerManager.prototype.removeNotBaseMapLayers = function () {
+        var _this = this;
+        var layerToDelete = this.layers.filter(function (layer) {
+            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
+            return parentId ? false : true;
+        });
+        layerToDelete.forEach(function (layer) {
+            _this.mapViewer.imageryLayers.remove(layer, true);
+        });
+        // TODO: remove vector layers
+    };
+    LayerManager.prototype.raise = function (layerId, positions) {
+        if (positions === void 0) { positions = 1; }
+        var layer = this.findLayerById(layerId);
+        var order = (layer === null || layer === void 0 ? void 0 : layer.meta).zIndex;
+        if (layer) {
+            for (var position = 0; position < positions; position++) {
+                this.mapViewer.imageryLayers.raise(layer);
+            }
+        }
+        this.updateLayersOrder(layerId, order, order + positions);
+    };
+    LayerManager.prototype.lower = function (layerId, positions) {
+        if (positions === void 0) { positions = 1; }
+        var layer = this.findLayerById(layerId);
+        var order = (layer === null || layer === void 0 ? void 0 : layer.meta).zIndex;
+        var lowerLimit = this.getBaseLayersCount();
+        var layerIdx = this.mapViewer.imageryLayers.indexOf(layer);
+        if (layerIdx - positions <= lowerLimit) {
+            positions = layerIdx - lowerLimit;
+        }
+        if (layer) {
+            for (var position = 0; position < positions; position++) {
+                this.mapViewer.imageryLayers.lower(layer);
+            }
+        }
+        this.updateLayersOrder(layerId, order, order - positions);
+    };
+    LayerManager.prototype.raiseToTop = function (layerId) {
+        var layer = this.findLayerById(layerId);
+        var order = (layer === null || layer === void 0 ? void 0 : layer.meta).zIndex;
+        if (layer) {
+            this.mapViewer.imageryLayers.raiseToTop(layer);
+        }
+        this.updateLayersOrder(layerId, order, this.mapViewer.imageryLayers.length - this.getBaseLayersCount() - 1);
+    };
+    LayerManager.prototype.lowerToBottom = function (layerId) {
+        var layer = this.findLayerById(layerId);
+        // const order = (layer?.meta as Record<string, unknown>).zIndex as number;
+        var lowerLimit = this.getBaseLayersCount();
+        var layerIdx = this.mapViewer.imageryLayers.indexOf(layer);
+        this.lower(layerId, layerIdx - lowerLimit);
+        // if (layer) {
+        //   this.mapViewer.imageryLayers.lowerToBottom(layer);
+        // }
+        // this.updateLayersOrder(layerId, order, 0);
+    };
+    LayerManager.prototype.length = function () {
+        return this.mapViewer.imageryLayers.length;
+    };
+    LayerManager.prototype.show = function (layerId, isShow) {
+        var layer = this.get(layerId);
+        if (layer !== undefined) {
+            layer.show = isShow;
+        }
+    };
+    LayerManager.prototype.showAllNotBase = function (isShow) {
+        var _this = this;
+        var nonBaseLayers = this.layers.filter(function (layer) {
+            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
+            return parentId ? false : true;
+        });
+        nonBaseLayers.forEach(function (layer) {
+            var _a;
+            _this.show((_a = layer.meta) === null || _a === void 0 ? void 0 : _a.id, isShow);
+        });
+    };
+    LayerManager.prototype.get = function (layerId) {
+        var layerInt = this.findLayerById(layerId);
+        var layerIdx = this.mapViewer.imageryLayers.indexOf(layerInt);
+        return layerIdx ? this.mapViewer.imageryLayers.get(layerIdx) : undefined;
+    };
+    LayerManager.prototype.findLayerByPOI = function (x, y) {
+        var position = point_geojson_1.pointToGeoJSON(this.mapViewer, x, y);
+        var nonBaseLayers = this.layers.filter(function (layer) {
+            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
+            return parentId ? false : true;
+        });
+        var selectedVisibleLayers = nonBaseLayers.filter(function (layer) {
+            var layerFootprint = lodash_1.get(layer.meta, 'details.footprint');
+            if (layerFootprint !== undefined) {
+                var isInLayer = boolean_point_in_polygon_1.default(position.geometry, {
+                    type: 'Feature',
+                    properties: {},
+                    geometry: layerFootprint,
+                });
+                return isInLayer && layer.show;
+            }
+            else {
+                console.warn('CesiumImageryLayer has no defined footprint', layer.meta);
+                return false;
+            }
+        });
+        return selectedVisibleLayers.sort(function (layer1, layer2) {
+            var _a, _b;
+            // @ts-ignore
+            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');
+            return parentId ? true : false;
+        });
+        return baseLayers.length;
+    };
+    LayerManager.prototype.findLayerById = function (layerId) {
+        return this.layers.find(function (layer) {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            return layer.meta !== undefined ? layer.meta.id === layerId : false;
+        });
+    };
+    LayerManager.prototype.updateLayersOrder = function (id, from, to) {
+        var move = from > to ? INC : DEC;
+        var min = from < to ? from : to;
+        var max = from < to ? to : from;
+        this.layers.forEach(function (layer) {
+            var _a;
+            var parentId = lodash_1.get(layer.meta, 'parentBasetMapId');
+            if (!parentId) {
+                var layerOrder = (_a = layer.meta) === null || _a === void 0 ? void 0 : _a.zIndex;
+                layer.meta.zIndex =
+                    layerOrder >= min && layerOrder <= max && layerOrder !== from
+                        ? layerOrder + move
+                        : layerOrder === from
+                            ? to
+                            : layerOrder;
+            }
+        });
+    };
+    return LayerManager;
+}());
+exports.default = LayerManager;

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 {};