@map-colonies/react-components 3.13.1 → 3.15.0

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

@@ -19,8 +19,11 @@ 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 customImageryProviders_1 = require("./helpers/customImageryProviders");
+var utils_1 = require("./helpers/utils");
 var INC = 1;
 var DEC = -1;
+var TRANSPARENT_LAYER_ID = 'TRANSPARENT_BASE_LAYER';
 var LayerManager = /** @class */ (function () {
     function LayerManager(mapViewer, legendsExtractor, onLayersUpdate) {
         var _this = this;
@@ -33,18 +36,44 @@ var LayerManager = /** @class */ (function () {
         if (onLayersUpdate) {
             this.layerUpdated.addEventListener(onLayersUpdate, this);
         }
-        this.mapViewer.imageryLayers.layerRemoved.addEventListener(function () {
-            _this.setLegends();
-            _this.layerUpdated.raiseEvent();
-        });
+        // Binding layer's relevancy check to cesium lifecycle if optimized tile requests enabled.
+        if (this.mapViewer.shouldOptimizedTileRequests) {
+            this.layerUpdated.addEventListener(function (meta) {
+                var newMetaKeys = Object.keys(meta);
+                var shouldTriggerRelevancyCheck = newMetaKeys.length === 1 &&
+                    newMetaKeys[0] === customImageryProviders_1.HAS_TRANSPARENCY_META_PROP;
+                if (shouldTriggerRelevancyCheck) {
+                    _this.markRelevantLayersForExtent();
+                    _this.hideNonRelevantLayers();
+                }
+            });
+            this.mapViewer.imageryLayers.layerRemoved.addEventListener(function () {
+                _this.setLegends();
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+            this.mapViewer.imageryLayers.layerMoved.addEventListener(function () {
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+            this.mapViewer.imageryLayers.layerAdded.addEventListener(function () {
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+            this.mapViewer.camera.moveEnd.addEventListener(function () {
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+        }
     }
     /* eslint-disable */
     LayerManager.prototype.addMetaToLayer = function (meta, layerPredicate) {
+        var _a;
         var layer = this.layers.find(layerPredicate);
         if (layer) {
-            layer.meta = meta;
+            layer.meta = __assign(__assign({}, ((_a = layer.meta) !== null && _a !== void 0 ? _a : {})), meta);
             this.setLegends();
-            this.layerUpdated.raiseEvent();
+            this.layerUpdated.raiseEvent(meta);
         }
     };
     /* eslint-enable */
@@ -54,19 +83,50 @@ var LayerManager = /** @class */ (function () {
         sortedBaseMapLayers.forEach(function (layer, idx) {
             _this.addRasterLayer(layer, idx, baseMap.id);
         });
+        /**
+         *  Set transparent layer as the first layer. if using optimized tile requests.
+         *
+         *  Apparently, cesium layer's rectangle is not affective when:
+         *  - There is only one active layer && The layer's rectangle contains the extent rectangle.
+         *
+         *  As a result, when using optimized tile requesting and we zoom in a discrete layer,
+         *  there are some visual artifacts due to tiles requesting outside of the layer's rectangle boundary.
+         *
+         *  A simple workaround would be adding a transparent layer as the very first layer at all times,
+         *  so that we ensure the rectangle will always be affective.
+         */
+        if (this.mapViewer.shouldOptimizedTileRequests) {
+            this.removeLayer(TRANSPARENT_LAYER_ID);
+            this.addTransparentImageryProvider();
+        }
     };
     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);
+            case 'XYZ_LAYER': {
+                var options = layer.options;
+                var providerInstance = this.mapViewer.shouldOptimizedTileRequests
+                    ? new customImageryProviders_1.CustomUrlTemplateImageryProvider(options, this.mapViewer)
+                    : new cesium_1.UrlTemplateImageryProvider(options);
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(providerInstance, index);
                 break;
-            case 'WMS_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapServiceImageryProvider(layer.options), index);
+            }
+            case 'WMS_LAYER': {
+                var options = layer.options;
+                var providerInstance = this.mapViewer.shouldOptimizedTileRequests
+                    ? new customImageryProviders_1.CustomWebMapServiceImageryProvider(options, this.mapViewer)
+                    : new cesium_1.WebMapServiceImageryProvider(options);
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(providerInstance, index);
                 break;
-            case 'WMTS_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapTileServiceImageryProvider(layer.options), index);
+            }
+            case 'WMTS_LAYER': {
+                var options = layer.options;
+                var providerInstance = this.mapViewer.shouldOptimizedTileRequests
+                    ? new customImageryProviders_1.CustomWebMapTileServiceImageryProvider(options, this.mapViewer)
+                    : new cesium_1.WebMapTileServiceImageryProvider(options);
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(providerInstance, index);
                 break;
+            }
             case 'OSM_LAYER':
                 break;
         }
@@ -205,6 +265,19 @@ 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.addTransparentImageryProvider = function () {
+        // Worldwide transparent layer
+        var transparentLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.SingleTileImageryProvider({
+            url: './assets/img/transparent-tile.png',
+            /* eslint-disable @typescript-eslint/no-magic-numbers */
+            rectangle: new cesium_1.Rectangle(-3.141592653589793, -1.5707963267948966, 3.141592653589793, 1.5707963267948966),
+            /* eslint-enable @typescript-eslint/no-magic-numbers */
+        }), 0);
+        transparentLayer.meta = {
+            id: TRANSPARENT_LAYER_ID,
+            skipRelevancyCheck: true,
+        };
+    };
     LayerManager.prototype.setLegends = function () {
         if (typeof this.legendsExtractor !== 'undefined') {
             this.legendsList = this.legendsExtractor(this.layers);
@@ -241,6 +314,90 @@ var LayerManager = /** @class */ (function () {
             }
         });
     };
+    LayerManager.prototype.hideNonRelevantLayers = function () {
+        var _a, _b, _c;
+        for (var _i = 0, _d = this.layers; _i < _d.length; _i++) {
+            var layer = _d[_i];
+            if (((_a = layer.meta) === null || _a === void 0 ? void 0 : _a.relevantToExtent) !== layer.show &&
+                layer.imageryProvider.ready) {
+                //@ts-ignore
+                layer.show = (_c = (_b = layer.meta) === null || _b === void 0 ? void 0 : _b.relevantToExtent) !== null && _c !== void 0 ? _c : true;
+            }
+        }
+    };
+    LayerManager.prototype.markRelevantLayersForExtent = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        try {
+            var extent = this.mapViewer.camera.computeViewRectangle();
+            // Iterating in reverse order so that top layer is first.
+            for (var i = this.layers.length - 1; i >= 0; i--) {
+                var layer = this.layers[i];
+                var intersectsExtent = !lodash_1.isEmpty(extent) &&
+                    !lodash_1.isEmpty(layer.rectangle) &&
+                    cesium_1.Rectangle.intersection(extent, layer.rectangle);
+                // Iterating from top layer until the current. (inclusive)
+                for (var j = this.layers.length - 1; j >= i; j--) {
+                    if (((_a = layer.meta) === null || _a === void 0 ? void 0 : _a.skipRelevancyCheck) === true) {
+                        layer.meta = __assign(__assign({}, layer.meta), { relevantToExtent: true });
+                        continue;
+                    }
+                    var layerAbove = this.layers[j];
+                    var layerAboveHasTransparency = ((_b = layerAbove.meta) === null || _b === void 0 ? void 0 : _b[customImageryProviders_1.HAS_TRANSPARENCY_META_PROP]) === true;
+                    if (layer !== layerAbove) {
+                        // Layer is relevant if in extent and there is no layer above it which is opaque and contains it.
+                        if (intersectsExtent instanceof cesium_1.Rectangle) {
+                            if (utils_1.cesiumRectangleContained(extent, layer.rectangle)) {
+                                // Layer contains the extent.
+                                if (utils_1.cesiumRectangleContained(extent, layerAbove.rectangle) &&
+                                    !layerAboveHasTransparency) {
+                                    layer.meta = __assign(__assign({}, ((_c = layer.meta) !== null && _c !== void 0 ? _c : {})), { relevantToExtent: false });
+                                    break;
+                                }
+                                else {
+                                    layer.meta = __assign(__assign({}, ((_d = layer.meta) !== null && _d !== void 0 ? _d : {})), { relevantToExtent: true });
+                                }
+                            }
+                            if (utils_1.cesiumRectangleContained(extent, layerAbove.rectangle) &&
+                                !layerAboveHasTransparency) {
+                                layer.meta = __assign(__assign({}, ((_e = layer.meta) !== null && _e !== void 0 ? _e : {})), { relevantToExtent: false });
+                                break;
+                            }
+                            if (utils_1.cesiumRectangleContained(layer.rectangle, layerAbove.rectangle)) {
+                                layer.meta = __assign(__assign({}, ((_f = layer.meta) !== null && _f !== void 0 ? _f : {})), { relevantToExtent: layerAboveHasTransparency });
+                                // Once there is layer above that hides it, no need to continue to check.
+                                if (!layerAboveHasTransparency) {
+                                    break;
+                                }
+                            }
+                            else {
+                                // Not contained by layer above it, and inside the extent.
+                                layer.meta = __assign(__assign({}, ((_g = layer.meta) !== null && _g !== void 0 ? _g : {})), { relevantToExtent: true });
+                            }
+                        }
+                        else {
+                            layer.meta = __assign(__assign({}, ((_h = layer.meta) !== null && _h !== void 0 ? _h : {})), { relevantToExtent: false });
+                        }
+                    }
+                    else {
+                        // Handle top layer
+                        if (i === this.layers.length - 1) {
+                            layer.meta = __assign(__assign({}, ((_j = layer.meta) !== null && _j !== void 0 ? _j : {})), { relevantToExtent: intersectsExtent instanceof cesium_1.Rectangle });
+                        }
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    Object.defineProperty(LayerManager.prototype, "layerList", {
+        get: function () {
+            return this.layers;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return LayerManager;
 }());
 exports.default = LayerManager;

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

@@ -9,7 +9,10 @@ import { CesiumSceneModeEnum } from './map.types';
 import './map.css';
 export declare class CesiumViewer extends CesiumViewerCls {
     layersManager?: LayerManager;
+    private useOptimizedTileRequests?;
     constructor(container: string | Element, options?: CesiumViewerCls.ConstructorOptions);
+    get shouldOptimizedTileRequests(): boolean;
+    set shouldOptimizedTileRequests(useOptimizedTileRequests: boolean);
 }
 export interface IContextMenuData {
     data: Record<string, unknown>[];
@@ -40,6 +43,7 @@ interface ILegends {
 }
 export interface CesiumMapProps extends ViewerProps {
     showMousePosition?: boolean;
+    showZoomLevel?: boolean;
     showScale?: boolean;
     projection?: Proj;
     center?: [number, number];
@@ -49,6 +53,7 @@ export interface CesiumMapProps extends ViewerProps {
     };
     sceneModes?: CesiumSceneModeEnum[];
     baseMaps?: IBaseMaps;
+    useOptimizedTileRequests?: boolean;
     terrainProvider?: TerrainProvider;
     imageryContextMenu?: React.ReactElement<IContextMenuData>;
     imageryContextMenuSize?: {

package/dist/cesium-map/map.js

@@ -59,6 +59,7 @@ var box_1 = require("../box");
 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 zoom_level_tracker_tool_1 = require("./tools/zoom_level-tracker.tool");
 var settings_1 = require("./settings/settings");
 var map_legend_1 = require("./map-legend");
 var layers_manager_1 = __importDefault(require("./layers-manager"));
@@ -73,6 +74,17 @@ var CesiumViewer = /** @class */ (function (_super) {
     function CesiumViewer(container, options) {
         return _super.call(this, container, options) || this;
     }
+    Object.defineProperty(CesiumViewer.prototype, "shouldOptimizedTileRequests", {
+        get: function () {
+            var _a;
+            return (_a = this.useOptimizedTileRequests) !== null && _a !== void 0 ? _a : false;
+        },
+        set: function (useOptimizedTileRequests) {
+            this.useOptimizedTileRequests = useOptimizedTileRequests;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return CesiumViewer;
 }(cesium_1.Viewer));
 exports.CesiumViewer = CesiumViewer;
@@ -93,16 +105,17 @@ var CesiumMap = function (props) {
     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 _1 = react_1.useState(), rightClickCoordinates = _1[0], setRightClickCoordinates = _1[1];
+    var _s = react_1.useState(), showZoomLevel = _s[0], setShowZoomLevel = _s[1];
+    var _t = react_1.useState(), showScale = _t[0], setShowScale = _t[1];
+    var _u = react_1.useState(), locale = _u[0], setLocale = _u[1];
+    var _v = react_1.useState(), cameraState = _v[0], setCameraState = _v[1];
+    var _w = react_1.useState(), sceneModes = _w[0], setSceneModes = _w[1];
+    var _x = react_1.useState([]), legendsList = _x[0], setLegendsList = _x[1];
+    var _y = react_1.useState(), baseMaps = _y[0], setBaseMaps = _y[1];
+    var _z = react_1.useState(false), showImageryMenu = _z[0], setShowImageryMenu = _z[1];
+    var _0 = react_1.useState(undefined), imageryMenuPosition = _0[0], setImageryMenuPosition = _0[1];
+    var _1 = react_1.useState(false), isLegendsSidebarOpen = _1[0], setIsLegendsSidebarOpen = _1[1];
+    var _2 = react_1.useState(), rightClickCoordinates = _2[0], setRightClickCoordinates = _2[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;
@@ -134,14 +147,24 @@ 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;
+        var _a, _b;
         if (mapViewRef) {
-            mapViewRef.layersManager = new layers_manager_1.default(mapViewRef, (_a = props.legends) === null || _a === void 0 ? void 0 : _a.mapLegendsExtractor, function () {
+            mapViewRef.shouldOptimizedTileRequests =
+                (_a = props.useOptimizedTileRequests) !== null && _a !== void 0 ? _a : false;
+            mapViewRef.layersManager = new layers_manager_1.default(mapViewRef, (_b = props.legends) === null || _b === void 0 ? void 0 : _b.mapLegendsExtractor, function () {
                 var _a;
                 setLegendsList((_a = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _a === void 0 ? void 0 : _a.legendsList);
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mapViewRef]);
+    react_1.useEffect(function () {
+        var _a;
+        if (mapViewRef) {
+            mapViewRef.shouldOptimizedTileRequests =
+                (_a = props.useOptimizedTileRequests) !== null && _a !== void 0 ? _a : false;
+        }
+    }, [props.useOptimizedTileRequests, mapViewRef]);
     react_1.useEffect(function () {
         var _a;
         setSceneModes((_a = props.sceneModes) !== null && _a !== void 0 ? _a : [
@@ -169,6 +192,10 @@ var CesiumMap = function (props) {
         var _a;
         setShowMousePosition((_a = props.showMousePosition) !== null && _a !== void 0 ? _a : true);
     }, [props.showMousePosition]);
+    react_1.useEffect(function () {
+        var _a;
+        setShowZoomLevel((_a = props.showZoomLevel) !== null && _a !== void 0 ? _a : true);
+    }, [props.showZoomLevel]);
     react_1.useEffect(function () {
         var _a;
         setShowScale((_a = props.showScale) !== null && _a !== void 0 ? _a : true);
@@ -269,6 +296,7 @@ var CesiumMap = function (props) {
                         } })),
                 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)),
+                    showZoomLevel === true ? (react_1.default.createElement(zoom_level_tracker_tool_1.ZoomLevelTrackerTool, { locale: locale })) : (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,

package/dist/cesium-map/tools/scale-tracker.tool.js

@@ -136,7 +136,10 @@ var ScaleTrackerTool = function (props) {
         mapViewer.camera.moveEnd.addEventListener(setFromEvent);
         return function () {
             try {
-                mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+                /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+                if (lodash_1.get(mapViewer, '_cesiumWidget') != undefined) {
+                    mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
+                }
             }
             catch (e) {
                 console.log('CESIUM camera "moveEnd" remove listener failed', e);

package/dist/cesium-map/tools/zoom_level-tracker.tool.css

@@ -0,0 +1,19 @@
+.zoomLevel {
+  z-index: 2000;
+  background-color: var(--mdc-theme-surface);
+  border-radius: 2px;
+  padding: 2px;
+  height: 24px;
+}
+
+.zoomLevelValue {
+  margin: 2px;
+  font-size: 14px;
+  line-height: 10px;
+  text-align: center;
+}
+
+.zoomLevelLabel {
+  font-size: 8px;
+  line-height: 8px;
+}

package/dist/cesium-map/tools/zoom_level-tracker.tool.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './zoom_level-tracker.tool.css';
+export interface RZoomLevelTrackerToolProps {
+    locale?: {
+        [key: string]: string;
+    };
+}
+export declare const ZoomLevelTrackerTool: React.FC<RZoomLevelTrackerToolProps>;

package/dist/cesium-map/tools/zoom_level-tracker.tool.js

@@ -0,0 +1,131 @@
+"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.ZoomLevelTrackerTool = void 0;
+var react_1 = __importStar(require("react"));
+var lodash_1 = require("lodash");
+var map_1 = require("../map");
+var map_types_1 = require("../map.types");
+require("./zoom_level-tracker.tool.css");
+/* eslint-disable @typescript-eslint/no-magic-numbers, @typescript-eslint/naming-convention, @typescript-eslint/no-unsafe-assignment,  @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
+var detectZoomLevel = function (distance, viewer) {
+    var MAX_ZOOM_LEVEL = 19;
+    var tileProvider = lodash_1.get(viewer.scene.globe, '_surface.tileProvider');
+    var quadtree = tileProvider._quadtree;
+    var drawingBufferHeight = viewer.canvas.height;
+    var sseDenominator = lodash_1.get(viewer.camera.frustum, 'sseDenominator');
+    for (var level = 0; level <= MAX_ZOOM_LEVEL; level++) {
+        var maxGeometricError = tileProvider.getLevelMaximumGeometricError(level);
+        var error = (maxGeometricError * drawingBufferHeight) / (distance * sseDenominator);
+        if (error < quadtree.maximumScreenSpaceError) {
+            return level;
+        }
+    }
+    return null;
+};
+var getZoomLevelHeights = function (precision, viewer) {
+    precision = precision || 10;
+    var result = [];
+    var step = 100000.0;
+    var currentZoomLevel = 0;
+    for (var height = 100000000.0; height > step; height = height - step) {
+        var level = detectZoomLevel(height, viewer);
+        if (level === null) {
+            break;
+        }
+        if (level !== currentZoomLevel) {
+            var minHeight = height;
+            var maxHeight = height + step;
+            while (maxHeight - minHeight > precision) {
+                height = minHeight + (maxHeight - minHeight) / 2;
+                if (detectZoomLevel(height, viewer) === level) {
+                    minHeight = height;
+                }
+                else {
+                    maxHeight = height;
+                }
+            }
+            result.push({
+                level: level,
+                height: Math.round(height),
+            });
+            currentZoomLevel = level;
+            if (result.length >= 2) {
+                step = (result[result.length - 2].height - height) / 1000.0;
+            }
+        }
+    }
+    return result;
+};
+/* eslint-enable @typescript-eslint/no-magic-numbers */
+var ZoomLevelTrackerTool = function (props) {
+    var _a;
+    var mapViewer = map_1.useCesiumMap();
+    var _b = react_1.useState(1), zoomLevel = _b[0], setZoomLevel = _b[1];
+    var zoomLevelHeights = getZoomLevelHeights(1, mapViewer);
+    react_1.useEffect(function () {
+        var calculateZoomLevel = function () {
+            var camera = mapViewer.camera;
+            var ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR = 0.5;
+            var cameraHeight = 0;
+            switch (mapViewer.scene.mode) {
+                case map_types_1.CesiumSceneMode.SCENE3D:
+                    cameraHeight = mapViewer.scene.mapProjection.ellipsoid.cartesianToCartographic(camera.positionWC).height;
+                    break;
+                case map_types_1.CesiumSceneMode.SCENE2D:
+                    cameraHeight =
+                        (camera.frustum.right -
+                            camera.frustum.left) *
+                            ORTHOPHOTO_HEIGHT_FRUSTRUM_FACTOR;
+                    break;
+                case map_types_1.CesiumSceneMode.COLUMBUS_VIEW:
+                    cameraHeight = camera.position.z;
+                    break;
+                default:
+                    cameraHeight = 0;
+                    break;
+            }
+            var closestZoom = zoomLevelHeights.reduce(function (a, b) {
+                return Math.abs(b.height - cameraHeight) <
+                    Math.abs(a.height - cameraHeight)
+                    ? b
+                    : a;
+            });
+            setZoomLevel(closestZoom.level);
+        };
+        mapViewer.camera.moveEnd.addEventListener(calculateZoomLevel);
+        return function () {
+            try {
+                /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+                if (lodash_1.get(mapViewer, '_cesiumWidget') != undefined) {
+                    mapViewer.camera.moveEnd.removeEventListener(calculateZoomLevel);
+                }
+            }
+            catch (e) {
+                console.log('CESIUM camera "moveEnd"(from zoom tracker) remove listener failed', e);
+            }
+        };
+    }, [mapViewer]);
+    return (react_1.default.createElement("div", { className: "zoomLevel" },
+        react_1.default.createElement("div", { className: "zoomLevelValue" }, zoomLevel),
+        react_1.default.createElement("div", { className: "zoomLevelLabel" }, (_a = lodash_1.get(props.locale, 'ZOOM_LABEL')) !== null && _a !== void 0 ? _a : 'zoom')));
+};
+exports.ZoomLevelTrackerTool = ZoomLevelTrackerTool;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.13.1",
+  "version": "3.15.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "2b22c0f4e5e2b632bd656ec88b29a4d02d339af0",
+  "gitHead": "6b136929ab3c4ba3489825ee9be301eb0b968a1e",
   "jest": {
     "coverageReporters": [
       "text",