@map-colonies/react-components 3.10.5 → 3.12.2

package/dist/cesium-map/map.js

@@ -1,273 +1,305 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CesiumMap = exports.useCesiumMap = exports.CesiumViewer = void 0;
-var react_1 = __importStar(require("react"));
-var resium_1 = require("resium");
-var cesium_1 = require("cesium");
-var lodash_1 = require("lodash");
-var map_1 = require("../utils/map");
-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 settings_1 = require("./settings/settings");
-var layers_manager_1 = __importDefault(require("./layers-manager"));
-var map_types_1 = require("./map.types");
-require("./map.css");
-var DEFAULT_HEIGHT = 212;
-var DEFAULT_WIDTH = 260;
-var DEFAULT_DYNAMIC_HEIGHT_INCREMENT = 0;
-var CesiumViewer = /** @class */ (function (_super) {
-    __extends(CesiumViewer, _super);
-    function CesiumViewer(container, options) {
-        return _super.call(this, container, options) || this;
-    }
-    return CesiumViewer;
-}(cesium_1.Viewer));
-exports.CesiumViewer = CesiumViewer;
-var mapContext = react_1.createContext(null);
-var MapViewProvider = mapContext.Provider;
-var cameraPositionRefreshRate = 10000;
-var useCesiumMap = function () {
-    var mapViewer = react_1.useContext(mapContext);
-    if (mapViewer === null) {
-        throw new Error('map context is null, please check the provider');
-    }
-    return mapViewer;
-};
-exports.useCesiumMap = useCesiumMap;
-var CesiumMap = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    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 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;
-        var mapWidth = container.clientWidth;
-        var mapHeight = container.clientHeight;
-        var calculatedHeight = menuHeight + menuDynamicHeightIncrement;
-        return {
-            left: (mapWidth - x < menuWidth ? x - (menuWidth - (mapWidth - x)) : x) + "px",
-            top: (mapHeight - y < calculatedHeight
-                ? y - (calculatedHeight - (mapHeight - y))
-                : y) + "px",
-        };
-    };
-    react_1.useEffect(function () {
-        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);
-                    setShowImageryMenu(false);
-                    setImageryMenuPosition(evt.position);
-                    setShowImageryMenu(true);
-                }, cesium_1.ScreenSpaceEventType.RIGHT_CLICK);
-            }
-        }
-        setMapViewRef((_a = ref.current) === null || _a === void 0 ? void 0 : _a.cesiumElement);
-    }, [ref, props.imageryContextMenu]);
-    react_1.useEffect(function () {
-        var _a;
-        setSceneModes((_a = props.sceneModes) !== null && _a !== void 0 ? _a : [
-            map_types_1.CesiumSceneMode.SCENE2D,
-            map_types_1.CesiumSceneMode.SCENE3D,
-            map_types_1.CesiumSceneMode.COLUMBUS_VIEW,
-        ]);
-    }, [props.sceneModes]);
-    react_1.useEffect(function () {
-        var _a, _b;
-        setBaseMaps(props.baseMaps);
-        var currentMap = (_a = props.baseMaps) === null || _a === void 0 ? void 0 : _a.maps.find(function (map) { return map.isCurrent; });
-        if (currentMap && mapViewRef) {
-            (_b = mapViewRef.layersManager) === null || _b === void 0 ? void 0 : _b.setBaseMapLayers(currentMap);
-        }
-    }, [props.baseMaps, mapViewRef]);
-    react_1.useEffect(function () {
-        var _a;
-        setProjection((_a = props.projection) !== null && _a !== void 0 ? _a : projections_1.Proj.WGS84);
-    }, [props.projection]);
-    react_1.useEffect(function () {
-        setLocale(props.locale);
-    }, [props.locale]);
-    react_1.useEffect(function () {
-        var _a;
-        setShowMousePosition((_a = props.showMousePosition) !== null && _a !== void 0 ? _a : true);
-    }, [props.showMousePosition]);
-    react_1.useEffect(function () {
-        var _a;
-        setShowScale((_a = props.showScale) !== null && _a !== void 0 ? _a : true);
-    }, [props.showScale]);
-    react_1.useEffect(function () {
-        var getCameraPosition = function () {
-            if (mapViewRef === undefined) {
-                return {
-                    longitude: 0,
-                    latitude: 0,
-                    height: 0,
-                };
-            }
-            var getCameraPositionCartographic = function () {
-                var camPos = mapViewRef.camera.positionCartographic;
-                return {
-                    longitude: map_1.toDegrees(camPos.longitude),
-                    latitude: map_1.toDegrees(camPos.latitude),
-                    height: camPos.height,
-                };
-            };
-            // https://stackoverflow.com/questions/33348761/get-center-in-cesium-map
-            if (mapViewRef.scene.mode === cesium_1.SceneMode.SCENE3D) {
-                var windowPosition = new cesium_1.Cartesian2(
-                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-                mapViewRef.container.clientWidth / 2, 
-                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-                mapViewRef.container.clientHeight / 2);
-                var pickRay = mapViewRef.scene.camera.getPickRay(windowPosition);
-                var pickPosition = mapViewRef.scene.globe.pick(pickRay, mapViewRef.scene);
-                var pickPositionCartographic = mapViewRef.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                return pickPositionCartographic !== undefined
-                    ? {
-                        longitude: map_1.toDegrees(pickPositionCartographic.longitude),
-                        latitude: map_1.toDegrees(pickPositionCartographic.latitude),
-                        height: mapViewRef.scene.camera.positionCartographic.height,
-                    }
-                    : getCameraPositionCartographic();
-            }
-            else {
-                return getCameraPositionCartographic();
-            }
-        };
-        var intervalHandle = setInterval(function () {
-            if (mapViewRef && mapViewRef.scene.mode !== cesium_1.SceneMode.MORPHING) {
-                var camera = mapViewRef.camera;
-                var store = {
-                    position: getCameraPosition(),
-                    direction: camera.direction.clone(),
-                    up: camera.up.clone(),
-                    right: camera.right.clone(),
-                    transform: camera.transform.clone(),
-                    frustum: camera.frustum.clone(),
-                };
-                setCameraState(store);
-            }
-        }, cameraPositionRefreshRate);
-        return function () {
-            clearInterval(intervalHandle);
-        };
-    }, [mapViewRef]);
-    react_1.useEffect(function () {
-        var morphCompleteHandler = function () {
-            if (mapViewRef && cameraState) {
-                void mapViewRef.camera.flyTo({
-                    destination: cesium_1.Cartesian3.fromDegrees(cameraState.position.longitude, cameraState.position.latitude, cameraState.position.height),
-                    duration: 0,
-                });
-            }
-        };
-        if (mapViewRef) {
-            mapViewRef.scene.morphComplete.addEventListener(morphCompleteHandler);
-        }
-        return function () {
-            if (mapViewRef) {
-                mapViewRef.scene.morphComplete.removeEventListener(morphCompleteHandler);
-            }
-        };
-    }, [mapViewRef, cameraState]);
-    react_1.useEffect(function () {
-        var zoom = props.zoom;
-        var center = props.center;
-        if (mapViewRef && lodash_1.isNumber(zoom) && lodash_1.isArray(center)) {
-            void mapViewRef.camera.flyTo({
-                destination: cesium_1.Cartesian3.fromDegrees(center[0], center[1], map_1.getAltitude(zoom)),
-                duration: 0,
-            });
-        }
-    }, [props.zoom, props.center, mapViewRef]);
-    return (react_1.default.createElement(resium_1.Viewer, __assign({ full: true, ref: ref }, viewerProps),
-        react_1.default.createElement(MapViewProvider, { value: mapViewRef },
-            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)),
-            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),
-                    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 : {
-                        height: DEFAULT_HEIGHT,
-                        width: DEFAULT_WIDTH,
-                    },
-                    handleClose: function () {
-                        setShowImageryMenu(!showImageryMenu);
-                    },
-                }))));
-};
-exports.CesiumMap = CesiumMap;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": 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");
+var map_1 = require("../utils/map");
+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 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");
+var DEFAULT_HEIGHT = 212;
+var DEFAULT_WIDTH = 260;
+var DEFAULT_DYNAMIC_HEIGHT_INCREMENT = 0;
+var CesiumViewer = /** @class */ (function (_super) {
+    __extends(CesiumViewer, _super);
+    function CesiumViewer(container, options) {
+        return _super.call(this, container, options) || this;
+    }
+    return CesiumViewer;
+}(cesium_1.Viewer));
+exports.CesiumViewer = CesiumViewer;
+var mapContext = react_1.createContext(null);
+var MapViewProvider = mapContext.Provider;
+var cameraPositionRefreshRate = 10000;
+var useCesiumMap = function () {
+    var mapViewer = react_1.useContext(mapContext);
+    if (mapViewer === null) {
+        throw new Error('map context is null, please check the provider');
+    }
+    return mapViewer;
+};
+exports.useCesiumMap = useCesiumMap;
+var CesiumMap = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var ref = react_1.useRef(null);
+    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;
+        var mapWidth = container.clientWidth;
+        var mapHeight = container.clientHeight;
+        var calculatedHeight = menuHeight + menuDynamicHeightIncrement;
+        return {
+            left: (mapWidth - x < menuWidth ? x - (menuWidth - (mapWidth - x)) : x) + "px",
+            top: (mapHeight - y < calculatedHeight
+                ? y - (calculatedHeight - (mapHeight - y))
+                : y) + "px",
+        };
+    };
+    react_1.useEffect(function () {
+        var _a;
+        if (ref.current) {
+            var viewer = ref.current.cesiumElement;
+            if (props.imageryContextMenu) {
+                viewer.screenSpaceEventHandler.setInputAction(function (evt) {
+                    // console.log('RIGHT click', evt.position);
+                    setShowImageryMenu(false);
+                    setImageryMenuPosition(evt.position);
+                    setShowImageryMenu(true);
+                }, cesium_1.ScreenSpaceEventType.RIGHT_CLICK);
+            }
+        }
+        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 : [
+            map_types_1.CesiumSceneMode.SCENE2D,
+            map_types_1.CesiumSceneMode.SCENE3D,
+            map_types_1.CesiumSceneMode.COLUMBUS_VIEW,
+        ]);
+    }, [props.sceneModes]);
+    react_1.useEffect(function () {
+        var _a, _b;
+        setBaseMaps(props.baseMaps);
+        var currentMap = (_a = props.baseMaps) === null || _a === void 0 ? void 0 : _a.maps.find(function (map) { return map.isCurrent; });
+        if (currentMap && mapViewRef) {
+            (_b = mapViewRef.layersManager) === null || _b === void 0 ? void 0 : _b.setBaseMapLayers(currentMap);
+        }
+    }, [props.baseMaps, mapViewRef]);
+    react_1.useEffect(function () {
+        var _a;
+        setProjection((_a = props.projection) !== null && _a !== void 0 ? _a : projections_1.Proj.WGS84);
+    }, [props.projection]);
+    react_1.useEffect(function () {
+        setLocale(props.locale);
+    }, [props.locale]);
+    react_1.useEffect(function () {
+        var _a;
+        setShowMousePosition((_a = props.showMousePosition) !== null && _a !== void 0 ? _a : true);
+    }, [props.showMousePosition]);
+    react_1.useEffect(function () {
+        var _a;
+        setShowScale((_a = props.showScale) !== null && _a !== void 0 ? _a : true);
+    }, [props.showScale]);
+    react_1.useEffect(function () {
+        var getCameraPosition = function () {
+            if (mapViewRef === undefined) {
+                return {
+                    longitude: 0,
+                    latitude: 0,
+                    height: 0,
+                };
+            }
+            var getCameraPositionCartographic = function () {
+                var camPos = mapViewRef.camera.positionCartographic;
+                return {
+                    longitude: map_1.toDegrees(camPos.longitude),
+                    latitude: map_1.toDegrees(camPos.latitude),
+                    height: camPos.height,
+                };
+            };
+            // https://stackoverflow.com/questions/33348761/get-center-in-cesium-map
+            if (mapViewRef.scene.mode === cesium_1.SceneMode.SCENE3D) {
+                var windowPosition = new cesium_1.Cartesian2(
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                mapViewRef.container.clientWidth / 2, 
+                // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+                mapViewRef.container.clientHeight / 2);
+                var pickRay = mapViewRef.scene.camera.getPickRay(windowPosition);
+                var pickPosition = mapViewRef.scene.globe.pick(pickRay, mapViewRef.scene);
+                var pickPositionCartographic = mapViewRef.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                return pickPositionCartographic !== undefined
+                    ? {
+                        longitude: map_1.toDegrees(pickPositionCartographic.longitude),
+                        latitude: map_1.toDegrees(pickPositionCartographic.latitude),
+                        height: mapViewRef.scene.camera.positionCartographic.height,
+                    }
+                    : getCameraPositionCartographic();
+            }
+            else {
+                return getCameraPositionCartographic();
+            }
+        };
+        var intervalHandle = setInterval(function () {
+            if (mapViewRef && mapViewRef.scene.mode !== cesium_1.SceneMode.MORPHING) {
+                var camera = mapViewRef.camera;
+                var store = {
+                    position: getCameraPosition(),
+                    direction: camera.direction.clone(),
+                    up: camera.up.clone(),
+                    right: camera.right.clone(),
+                    transform: camera.transform.clone(),
+                    frustum: camera.frustum.clone(),
+                };
+                setCameraState(store);
+            }
+        }, cameraPositionRefreshRate);
+        return function () {
+            clearInterval(intervalHandle);
+        };
+    }, [mapViewRef]);
+    react_1.useEffect(function () {
+        var morphCompleteHandler = function () {
+            if (mapViewRef && cameraState) {
+                void mapViewRef.camera.flyTo({
+                    destination: cesium_1.Cartesian3.fromDegrees(cameraState.position.longitude, cameraState.position.latitude, cameraState.position.height),
+                    duration: 0,
+                });
+            }
+        };
+        if (mapViewRef) {
+            mapViewRef.scene.morphComplete.addEventListener(morphCompleteHandler);
+        }
+        return function () {
+            if (mapViewRef) {
+                mapViewRef.scene.morphComplete.removeEventListener(morphCompleteHandler);
+            }
+        };
+    }, [mapViewRef, cameraState]);
+    react_1.useEffect(function () {
+        var zoom = props.zoom;
+        var center = props.center;
+        if (mapViewRef && lodash_1.isNumber(zoom) && lodash_1.isArray(center)) {
+            void mapViewRef.camera.flyTo({
+                destination: cesium_1.Cartesian3.fromDegrees(center[0], center[1], map_1.getAltitude(zoom)),
+                duration: 0,
+            });
+        }
+    }, [props.zoom, props.center, mapViewRef]);
+    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,
+            bindCustomToolsToViewer(),
+            props.imageryContextMenu &&
+                showImageryMenu &&
+                imageryMenuPosition &&
+                react_1.default.cloneElement(props.imageryContextMenu, {
+                    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, (_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,
+                    },
+                    handleClose: function () {
+                        setShowImageryMenu(!showImageryMenu);
+                    },
+                }))));
+};
+exports.CesiumMap = CesiumMap;

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

@@ -1,8 +1,8 @@
-import { SceneMode } from 'cesium';
-export declare type CesiumSceneModeEnum = SceneMode;
-export declare const CesiumSceneMode: {
-    MORPHING: SceneMode;
-    COLUMBUS_VIEW: SceneMode;
-    SCENE2D: SceneMode;
-    SCENE3D: SceneMode;
-};
+import { SceneMode } from 'cesium';
+export declare type CesiumSceneModeEnum = SceneMode;
+export declare const CesiumSceneMode: {
+    MORPHING: SceneMode;
+    COLUMBUS_VIEW: SceneMode;
+    SCENE2D: SceneMode;
+    SCENE3D: SceneMode;
+};