@map-colonies/react-components 3.8.1 → 3.10.2

package/dist/cesium-map/map.js

@@ -0,0 +1,273 @@
+"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;

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

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CesiumSceneMode = void 0;
+var cesium_1 = require("cesium");
+/* eslint-disable */
+exports.CesiumSceneMode = {
+    MORPHING: cesium_1.SceneMode.MORPHING,
+    COLUMBUS_VIEW: cesium_1.SceneMode.COLUMBUS_VIEW,
+    SCENE2D: cesium_1.SceneMode.SCENE2D,
+    SCENE3D: cesium_1.SceneMode.SCENE3D,
+};
+/* eslint-enable */

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

@@ -0,0 +1,19 @@
+import { PolylineDashMaterialProperty, ConstantProperty, VerticalOrigin, LabelStyle, Cartesian2, Cartesian3, BoundingSphere, Ellipsoid, ConstantPositionProperty, GeographicTilingScheme } from 'cesium';
+export declare class CesiumPolylineDashMaterialProperty extends PolylineDashMaterialProperty {
+}
+export declare class CesiumConstantProperty extends ConstantProperty {
+}
+export declare class CesiumConstantPositionProperty extends ConstantPositionProperty {
+}
+export declare class CesiumCartesian2 extends Cartesian2 {
+}
+export declare class CesiumCartesian3 extends Cartesian3 {
+}
+export declare class CesiumBoundingSphere extends BoundingSphere {
+}
+export declare class CesiumEllipsoid extends Ellipsoid {
+}
+export declare class CesiumGeographicTilingScheme extends GeographicTilingScheme {
+}
+export declare const CesiumVerticalOrigin: typeof VerticalOrigin;
+export declare const CesiumLabelStyle: typeof LabelStyle;

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

@@ -0,0 +1,89 @@
+"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 __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CesiumLabelStyle = exports.CesiumVerticalOrigin = exports.CesiumGeographicTilingScheme = exports.CesiumEllipsoid = exports.CesiumBoundingSphere = exports.CesiumCartesian3 = exports.CesiumCartesian2 = exports.CesiumConstantPositionProperty = exports.CesiumConstantProperty = exports.CesiumPolylineDashMaterialProperty = void 0;
+var cesium_1 = require("cesium");
+// PROXIED CLASSES
+var CesiumPolylineDashMaterialProperty = /** @class */ (function (_super) {
+    __extends(CesiumPolylineDashMaterialProperty, _super);
+    function CesiumPolylineDashMaterialProperty() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumPolylineDashMaterialProperty;
+}(cesium_1.PolylineDashMaterialProperty));
+exports.CesiumPolylineDashMaterialProperty = CesiumPolylineDashMaterialProperty;
+var CesiumConstantProperty = /** @class */ (function (_super) {
+    __extends(CesiumConstantProperty, _super);
+    function CesiumConstantProperty() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumConstantProperty;
+}(cesium_1.ConstantProperty));
+exports.CesiumConstantProperty = CesiumConstantProperty;
+var CesiumConstantPositionProperty = /** @class */ (function (_super) {
+    __extends(CesiumConstantPositionProperty, _super);
+    function CesiumConstantPositionProperty() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumConstantPositionProperty;
+}(cesium_1.ConstantPositionProperty));
+exports.CesiumConstantPositionProperty = CesiumConstantPositionProperty;
+var CesiumCartesian2 = /** @class */ (function (_super) {
+    __extends(CesiumCartesian2, _super);
+    function CesiumCartesian2() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumCartesian2;
+}(cesium_1.Cartesian2));
+exports.CesiumCartesian2 = CesiumCartesian2;
+var CesiumCartesian3 = /** @class */ (function (_super) {
+    __extends(CesiumCartesian3, _super);
+    function CesiumCartesian3() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumCartesian3;
+}(cesium_1.Cartesian3));
+exports.CesiumCartesian3 = CesiumCartesian3;
+var CesiumBoundingSphere = /** @class */ (function (_super) {
+    __extends(CesiumBoundingSphere, _super);
+    function CesiumBoundingSphere() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumBoundingSphere;
+}(cesium_1.BoundingSphere));
+exports.CesiumBoundingSphere = CesiumBoundingSphere;
+var CesiumEllipsoid = /** @class */ (function (_super) {
+    __extends(CesiumEllipsoid, _super);
+    function CesiumEllipsoid() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumEllipsoid;
+}(cesium_1.Ellipsoid));
+exports.CesiumEllipsoid = CesiumEllipsoid;
+var CesiumGeographicTilingScheme = /** @class */ (function (_super) {
+    __extends(CesiumGeographicTilingScheme, _super);
+    function CesiumGeographicTilingScheme() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return CesiumGeographicTilingScheme;
+}(cesium_1.GeographicTilingScheme));
+exports.CesiumGeographicTilingScheme = CesiumGeographicTilingScheme;
+// PROXIED ENUMS
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.CesiumVerticalOrigin = cesium_1.VerticalOrigin;
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.CesiumLabelStyle = cesium_1.LabelStyle;

package/dist/cesium-map/settings/base-maps.css

@@ -0,0 +1,37 @@
+.mapSelector {
+  width: 260px;
+  list-style: none;
+  padding-left: 0;
+  display: flex;
+  flex-wrap: wrap;
+  grid-gap: 4px;
+  min-height: 140px;
+  margin-block-start: 0px;
+  padding-inline-start: 0px;
+}
+
+.mapContainer {
+}
+
+.mapContainerSelected {
+  border: blueviolet 2px solid !important;
+  border-radius: 2px;
+}
+
+.mapContainer:hover {
+  border: tomato 2px solid;
+  border-radius: 2px;
+}
+
+.mapContainerImg {
+  width: 100%;
+  height: 100%;
+}
+
+.mapLabel {
+  font-size: 12px;
+}
+
+.mapLabel::before {
+  content: '\00a0';
+}

package/dist/cesium-map/settings/base-maps.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IBaseMaps } from './settings';
+import './base-maps.css';
+export interface RCesiumBaseMapsProps {
+    baseMaps?: IBaseMaps;
+}
+export declare const CesiumBaseMaps: React.FC<RCesiumBaseMapsProps>;

package/dist/cesium-map/settings/base-maps.js

@@ -0,0 +1,78 @@
+"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.CesiumBaseMaps = void 0;
+var react_1 = __importStar(require("react"));
+var styles_1 = require("@material-ui/core/styles");
+var map_1 = require("../map");
+require("./base-maps.css");
+var useStyle = styles_1.makeStyles(function (theme) {
+    return styles_1.createStyles({
+        mapContainer: {
+            width: '60px',
+            height: '60px',
+            border: theme.palette.background.paper + " 2px solid",
+        },
+    });
+});
+var CesiumBaseMaps = function (props) {
+    var mapViewer = map_1.useCesiumMap();
+    var baseMaps = props.baseMaps;
+    var _a = react_1.useState(' '), currentMap = _a[0], setCurrentMap = _a[1];
+    var _b = react_1.useState(), selectedBaseMap = _b[0], setSelectedBaseMap = _b[1];
+    var classes = useStyle();
+    react_1.useEffect(function () {
+        var defaultMap = baseMaps === null || baseMaps === void 0 ? void 0 : baseMaps.maps.find(function (map) { return map.isCurrent; });
+        if (defaultMap) {
+            setSelectedBaseMap(defaultMap);
+            setCurrentMap(defaultMap.title !== undefined ? defaultMap.title : ' ');
+        }
+    }, [baseMaps]);
+    var handleMapSection = function (id) {
+        var _a, _b;
+        if (baseMaps) {
+            // Remove previous base-map layers
+            (_a = mapViewer.layersManager) === null || _a === void 0 ? void 0 : _a.removeBaseMapLayers();
+            // Change base-map: add base-map layers by zIndex order
+            var selectedBaseMap_1 = baseMaps.maps.find(function (map) { return map.id === id; });
+            if (selectedBaseMap_1) {
+                (_b = mapViewer.layersManager) === null || _b === void 0 ? void 0 : _b.setBaseMapLayers(selectedBaseMap_1);
+                setSelectedBaseMap(selectedBaseMap_1);
+                baseMaps.maps.forEach(function (map) {
+                    map.isCurrent = selectedBaseMap_1 === map;
+                });
+            }
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("label", { className: "mapLabel" }, currentMap),
+        react_1.default.createElement("ul", { className: "mapSelector" }, baseMaps === null || baseMaps === void 0 ? void 0 : baseMaps.maps.map(function (map) { return (react_1.default.createElement("li", { className: "mapContainer " + classes.mapContainer + " " + (map === selectedBaseMap ? 'mapContainerSelected' : ''), key: map.id },
+            react_1.default.createElement("img", { alt: '', className: "mapContainerImg", src: map.thumbnail, onMouseOver: function () {
+                    setCurrentMap(map.title);
+                }, onMouseOut: function () {
+                    setCurrentMap((selectedBaseMap === null || selectedBaseMap === void 0 ? void 0 : selectedBaseMap.title) !== undefined
+                        ? selectedBaseMap.title
+                        : ' ');
+                }, onClick: function () {
+                    handleMapSection(map.id);
+                } }))); }))));
+};
+exports.CesiumBaseMaps = CesiumBaseMaps;

package/dist/cesium-map/settings/scene-modes.css

@@ -0,0 +1,19 @@
+.mapViewIcon {
+  fill: #fff;
+  width: 40px;
+  height: 40px;
+  background: #303336;
+  border: 1px solid #444;
+  border-radius: 4px;
+}
+
+.mapViewIcon:hover {
+  background: #48b;
+  border-color: #aef;
+}
+
+.mapViewCurrent {
+  fill: #aef;
+  border: 1px solid #aef;
+  border-radius: 4px;
+}

package/dist/cesium-map/settings/scene-modes.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CesiumSceneModeEnum } from '../map.types';
+import './scene-modes.css';
+export interface RCesiumSceneModesProps {
+    sceneModes: CesiumSceneModeEnum[];
+}
+export declare const CesiumSceneModes: React.FC<RCesiumSceneModesProps>;

package/dist/cesium-map/settings/scene-modes.js

@@ -0,0 +1,65 @@
+"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.CesiumSceneModes = void 0;
+var react_1 = __importStar(require("react"));
+var react_core_1 = require("@map-colonies/react-core");
+var map_types_1 = require("../map.types");
+var map_1 = require("../map");
+require("./scene-modes.css");
+var NOT_FOUND = -1;
+var CesiumSceneModes = function (props) {
+    var mapViewer = map_1.useCesiumMap();
+    var _a = react_1.useState(), currentSceneMode = _a[0], setCurrentSceneMode = _a[1];
+    var sceneModes = props.sceneModes;
+    var isInMapViews = function (sceneMode) {
+        return sceneModes.findIndex(function (item) { return item === sceneMode; }) > NOT_FOUND;
+    };
+    react_1.useEffect(function () {
+        setCurrentSceneMode(mapViewer.scene.mode);
+    }, []);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isInMapViews(map_types_1.CesiumSceneMode.SCENE3D) && (react_1.default.createElement(react_core_1.Icon, { icon: react_1.default.createElement("div", { className: "mapViewIcon " + (currentSceneMode === map_types_1.CesiumSceneMode.SCENE3D
+                    ? 'mapViewCurrent'
+                    : '') },
+                react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 64 64" },
+                    react_1.default.createElement("path", { d: "m 32.401392,4.9330437 c -7.087603,0 -14.096095,2.884602 -19.10793,7.8946843 -5.0118352,5.010083 -7.9296167,11.987468 -7.9296167,19.072999 0,7.085531 2.9177815,14.097848 7.9296167,19.107931 4.837653,4.835961 11.541408,7.631372 18.374354,7.82482 0.05712,0.01231 0.454119,0.139729 0.454119,0.139729 l 0.03493,-0.104797 c 0.08246,7.84e-4 0.162033,0.03493 0.244525,0.03493 0.08304,0 0.161515,-0.03414 0.244526,-0.03493 l 0.03493,0.104797 c 0,0 0.309474,-0.129487 0.349323,-0.139729 6.867765,-0.168094 13.582903,-2.965206 18.444218,-7.82482 2.558195,-2.5573 4.551081,-5.638134 5.903547,-8.977584 1.297191,-3.202966 2.02607,-6.661489 2.02607,-10.130347 0,-6.237309 -2.366261,-12.31219 -6.322734,-17.116794 -0.0034,-0.02316 0.0049,-0.04488 0,-0.06986 -0.01733,-0.08745 -0.104529,-0.278855 -0.104797,-0.279458 -5.31e-4,-0.0012 -0.522988,-0.628147 -0.523984,-0.62878         -3.47e-4,-2.2e-4 -0.133444,-0.03532 -0.244525,-0.06987 C 51.944299,13.447603 51.751076,13.104317 51.474391,12.827728 46.462556,7.8176457 39.488996,4.9330437 32.401392,4.9330437 z m -2.130866,3.5281554 0.104797,9.6762289 c -4.111695,-0.08361 -7.109829,-0.423664 -9.257041,-0.943171 1.198093,-2.269271 2.524531,-4.124404 3.91241,-5.414496 2.167498,-2.0147811 3.950145,-2.8540169 5.239834,-3.3185619 z m 2.794579,0 c 1.280302,0.4754953 3.022186,1.3285948 5.065173,3.2486979 1.424667,1.338973 2.788862,3.303645 3.982275,5.728886 -2.29082,0.403367 -5.381258,0.621049 -8.942651,0.698645 L 33.065105,8.4611991 z m 5.728886,0.2445256 c 4.004072,1.1230822 7.793098,3.1481363 10.724195,6.0782083 0.03468,0.03466 0.07033,0.06991 0.104797,0.104797 -0.45375,0.313891 -0.923054,0.663002 -1.956205,1.082899 -0.647388,0.263114 -1.906242,0.477396 -2.829511,0.733577 -1.382296,-2.988132         -3.027146,-5.368585 -4.785716,-7.0213781 -0.422866,-0.397432 -0.835818,-0.6453247 -1.25756,-0.9781032 z m -15.33525,0.7685092 c -0.106753,0.09503 -0.207753,0.145402 -0.31439,0.244526 -1.684973,1.5662541 -3.298068,3.8232211 -4.680919,6.5672591 -0.343797,-0.14942 -1.035052,-0.273198 -1.292493,-0.419186 -0.956528,-0.542427 -1.362964,-1.022024 -1.537018,-1.292493 -0.0241,-0.03745 -0.01868,-0.0401 -0.03493,-0.06986 2.250095,-2.163342 4.948824,-3.869984 7.859752,-5.0302421 z m -9.641296,7.0912431 c 0.464973,0.571618 0.937729,1.169056 1.956205,1.746612 0.349907,0.198425 1.107143,0.335404 1.537018,0.523983 -1.20166,3.172984 -1.998037,7.051901 -2.165798,11.772162 C 14.256557,30.361384 12.934823,30.161483 12.280427,29.90959 10.644437,29.279855 9.6888882,28.674891 9.1714586,28.267775 8.6540289,27.860658 8.6474751,27.778724 8.6474751,27.778724 l -0.069864,0.03493 C 9.3100294,23.691285         11.163248,19.798527 13.817445,16.565477 z m 37.552149,0.523984 c 2.548924,3.289983 4.265057,7.202594 4.890513,11.318043 -0.650428,0.410896 -1.756876,1.001936 -3.563088,1.606882 -1.171552,0.392383 -3.163859,0.759153 -4.960377,1.117832 -0.04367,-4.752703 -0.784809,-8.591423 -1.88634,-11.807094 0.917574,-0.263678 2.170552,-0.486495 2.864443,-0.76851 1.274693,-0.518066 2.003942,-1.001558 2.654849,-1.467153 z m -31.439008,2.619917 c 2.487341,0.672766 5.775813,1.137775 10.479669,1.222628 l 0.104797,10.689263 0,0.03493 0,0.733577 c -5.435005,-0.09059 -9.512219,-0.519044 -12.610536,-1.117831 0.106127,-4.776683 0.879334,-8.55791 2.02607,-11.562569 z m 23.264866,0.31439 c 1.073459,3.067541 1.833795,6.821314 1.816476,11.702298 -3.054474,0.423245 -7.062018,0.648559 -11.702298,0.698644 l 0,-0.838373 -0.104796,-10.654331 c 4.082416,-0.0864 7.404468,-0.403886 9.990618,-0.908238 z         M 8.2632205,30.922625 c 0.7558676,0.510548 1.5529563,1.013339 3.0041715,1.57195 0.937518,0.360875 2.612202,0.647642 3.91241,0.978102 0.112814,3.85566 0.703989,7.107756 1.606883,9.920754 -1.147172,-0.324262 -2.644553,-0.640648 -3.423359,-0.978102 -1.516688,-0.657177 -2.386627,-1.287332 -2.864443,-1.71168 -0.477816,-0.424347 -0.489051,-0.489051 -0.489051,-0.489051 L 9.8002387,40.319395 C 8.791691,37.621767 8.1584238,34.769583 8.1584238,31.900727 c 0,-0.330153 0.090589,-0.648169 0.1047967,-0.978102 z m 48.2763445,0.419186 c 0.0047,0.188973 0.06986,0.36991 0.06986,0.558916 0,2.938869 -0.620228,5.873558 -1.676747,8.628261 -0.07435,0.07583 -0.06552,0.07411 -0.454119,0.349323 -0.606965,0.429857 -1.631665,1.042044 -3.318562,1.676747 -1.208528,0.454713 -3.204964,0.850894 -5.135038,1.25756 0.84593,-2.765726 1.41808,-6.005357 1.606883,-9.815957 2.232369,-0.413371 4.483758,-0.840201         5.938479,-1.327425 1.410632,-0.472457 2.153108,-0.89469 2.96924,-1.327425 z m -38.530252,2.864443 c 3.208141,0.56697 7.372279,0.898588 12.575603,0.978103 l 0.174662,9.885821 c -4.392517,-0.06139 -8.106722,-0.320566 -10.863925,-0.803441 -1.051954,-2.664695 -1.692909,-6.043794 -1.88634,-10.060483 z m 26.793022,0.31439 c -0.246298,3.923551 -0.877762,7.263679 -1.816476,9.885822 -2.561957,0.361954 -5.766249,0.560708 -9.431703,0.62878 l -0.174661,-9.815957 c 4.491734,-0.04969 8.334769,-0.293032 11.42284,-0.698645 z M 12.035901,44.860585 c 0.09977,0.04523 0.105535,0.09465 0.209594,0.139729 1.337656,0.579602 3.441099,1.058072 5.589157,1.537018 1.545042,3.399208 3.548524,5.969402 5.589157,7.789888 -3.034411,-1.215537 -5.871615,-3.007978 -8.174142,-5.309699 -1.245911,-1.245475 -2.271794,-2.662961 -3.213766,-4.156936 z m 40.69605,0 c -0.941972,1.493975 -1.967855,2.911461         -3.213765,4.156936 -2.74253,2.741571 -6.244106,4.696717 -9.955686,5.868615 0.261347,-0.241079 0.507495,-0.394491 0.768509,-0.663713 1.674841,-1.727516 3.320792,-4.181056 4.645987,-7.265904 2.962447,-0.503021 5.408965,-1.122293 7.161107,-1.781544 0.284034,-0.106865 0.337297,-0.207323 0.593848,-0.31439 z m -31.404076,2.305527 c 2.645807,0.376448 5.701178,0.649995 9.466635,0.698645 l 0.139729,7.789888 c -1.38739,-0.480844 -3.316218,-1.29837 -5.659022,-3.388427 -1.388822,-1.238993 -2.743668,-3.0113 -3.947342,-5.100106 z m 20.365491,0.104797 c -1.04872,2.041937 -2.174337,3.779068 -3.353494,4.995309 -1.853177,1.911459 -3.425515,2.82679 -4.611055,3.353494 l -0.139729,-7.789887 c 3.13091,-0.05714 5.728238,-0.278725 8.104278,-0.558916 z" }))), onClick: function () {
+                mapViewer.scene.morphTo3D();
+                setCurrentSceneMode(map_types_1.CesiumSceneMode.SCENE3D);
+            } })),
+        isInMapViews(map_types_1.CesiumSceneMode.SCENE2D) && (react_1.default.createElement(react_core_1.Icon, { icon: react_1.default.createElement("div", { className: "mapViewIcon " + (currentSceneMode === map_types_1.CesiumSceneMode.SCENE2D
+                    ? 'mapViewCurrent'
+                    : '') },
+                react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 64 64" },
+                    react_1.default.createElement("path", { d: "m 2.9825053,17.550598 0,1.368113 0,26.267766 0,1.368113 1.36811,0 54.9981397,0 1.36811,0 0,-1.368113 0,-26.267766 0,-1.368113 -1.36811,0 -54.9981397,0 -1.36811,0 z m 2.73623,2.736226 10.3292497,0 0,10.466063 -10.3292497,0 0,-10.466063 z m 13.0654697,0 11.69737,0 0,10.466063 -11.69737,0 0,-10.466063 z m 14.43359,0 11.69737,0 0,10.466063 -11.69737,0 0,-10.466063 z m 14.43359,0 10.32926,0 0,10.466063 -10.32926,0 0,-10.466063 z m -41.9326497,13.202288 10.3292497,0 0,10.329252 -10.3292497,0 0,-10.329252 z m 13.0654697,0 11.69737,0 0,10.329252 -11.69737,0 0,-10.329252 z m 14.43359,0 11.69737,0 0,10.329252 -11.69737,0 0,-10.329252 z m 14.43359,0 10.32926,0 0,10.329252 -10.32926,0 0,-10.329252 z" }))), onClick: function () {
+                mapViewer.scene.morphTo2D();
+                setCurrentSceneMode(map_types_1.CesiumSceneMode.SCENE2D);
+            } })),
+        isInMapViews(map_types_1.CesiumSceneMode.COLUMBUS_VIEW) && (react_1.default.createElement(react_core_1.Icon, { icon: react_1.default.createElement("div", { className: "mapViewIcon " + (currentSceneMode === map_types_1.CesiumSceneMode.COLUMBUS_VIEW
+                    ? 'mapViewCurrent'
+                    : '') },
+                react_1.default.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 64 64" },
+                    react_1.default.createElement("path", { d: "m 14.723969,17.675598 -0.340489,0.817175 -11.1680536,26.183638 -0.817175,1.872692 2.076986,0 54.7506996,0 2.07698,0 -0.81717,-1.872692 -11.16805,-26.183638 -0.34049,-0.817175 -0.91933,0 -32.414586,0 -0.919322,0 z m 1.838643,2.723916 6.196908,0 -2.928209,10.418977 -7.729111,0 4.460412,-10.418977 z m 9.02297,0 4.903049,0 0,10.418977 -7.831258,0 2.928209,-10.418977 z m 7.626964,0 5.584031,0 2.62176,10.418977 -8.205791,0 0,-10.418977 z m 8.410081,0 5.51593,0 4.46042,10.418977 -7.38863,0 -2.58772,-10.418977 z m -30.678091,13.142892 8.103649,0 -2.89416,10.282782 -9.6018026,0 4.3923136,-10.282782 z m 10.929711,0 8.614384,0 0,10.282782 -11.508544,0 2.89416,-10.282782 z m 11.338299,0 8.852721,0 2.58772,10.282782 -11.440441,0 0,-10.282782 z m 11.678781,0 7.86531,0 4.39231,10.282782 -9.6699,0 -2.58772,-10.282782 z" }))), onClick: function () {
+                mapViewer.scene.morphToColumbusView();
+                setCurrentSceneMode(map_types_1.CesiumSceneMode.COLUMBUS_VIEW);
+            } }))));
+};
+exports.CesiumSceneModes = CesiumSceneModes;