@map-colonies/react-components 3.9.0 → 3.10.3

package/dist/smart-table/smart-table-row.js

@@ -1,24 +1,35 @@
 "use strict";
 /* eslint-disable */
+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 (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    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.SmartTableRow = void 0;
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
 var icons_1 = require("@material-ui/icons");
 function SmartTableRow(props) {
-    var _a;
     var cellsMetadata = props.cellsMetadata, isRowSelected = props.isRowSelected, item = props.item, onRowSelected = props.onRowSelected, rowIndex = props.rowIndex, isCollapseable = props.isCollapseable, collapsedElement = props.collapsedElement;
-    var _b = react_1.useState(false), open = _b[0], setOpen = _b[1];
+    var _a = react_1.useState(false), open = _a[0], setOpen = _a[1];
     var cellCount = cellsMetadata.length;
     var handleClick = function () {
-        var _a;
-        (_a = onRowSelected) === null || _a === void 0 ? void 0 : _a(rowIndex);
+        onRowSelected === null || onRowSelected === void 0 ? void 0 : onRowSelected(rowIndex);
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(core_1.TableRow, { hover: true, selected: isRowSelected, onClick: handleClick },
@@ -30,7 +41,6 @@ function SmartTableRow(props) {
             cellsMetadata.map(function (cell) { return (react_1.default.createElement(core_1.TableCell, { key: cell.id + rowIndex.toString(), align: cell.numeric ? 'right' : 'left', padding: cell.disablePadding ? 'none' : 'default' }, cell.transform ? cell.transform(item[cell.id]) : item[cell.id])); })),
         isCollapseable && (react_1.default.createElement(core_1.TableRow, null,
             react_1.default.createElement(core_1.TableCell, { style: { paddingBottom: 0, paddingTop: 0 }, colSpan: cellCount + 1 },
-                react_1.default.createElement(core_1.Collapse, { in: open, unmountOnExit: true, timeout: "auto" }, (_a = collapsedElement) === null || _a === void 0 ? void 0 : _a(item)))))));
+                react_1.default.createElement(core_1.Collapse, { in: open, unmountOnExit: true, timeout: "auto" }, collapsedElement === null || collapsedElement === void 0 ? void 0 : collapsedElement(item)))))));
 }
 exports.SmartTableRow = SmartTableRow;
-//# sourceMappingURL=smart-table-row.js.map

package/dist/smart-table/smart-table-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare type Order = 'asc' | 'desc';
 export declare type ElementFunction<T> = (item: T) => JSX.Element;
 export interface CellMetadata<T> {
@@ -8,4 +7,3 @@ export interface CellMetadata<T> {
     numeric: boolean;
     transform?: (value: T[keyof T]) => string;
 }
-//# sourceMappingURL=smart-table-types.d.ts.map

package/dist/smart-table/smart-table-types.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=smart-table-types.js.map

package/dist/smart-table/smart-table.d.ts

@@ -15,4 +15,3 @@ export interface SmartTableProps<T> {
     handleChangeRowsPerPage: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare function SmartTable<T>(props: SmartTableProps<T>): JSX.Element;
-//# sourceMappingURL=smart-table.d.ts.map

package/dist/smart-table/smart-table.js

@@ -1,12 +1,25 @@
 "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 (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    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.SmartTable = void 0;
 /* eslint-disable */
 var react_1 = __importStar(require("react"));
 var core_1 = require("@material-ui/core");
@@ -36,4 +49,3 @@ function SmartTable(props) {
         react_1.default.createElement(core_1.TablePagination, { rowsPerPage: rowsPerPage, rowsPerPageOptions: [5, 10], component: "div", count: count, page: page, onChangePage: handleChangePage, onChangeRowsPerPage: handleChangeRowsPerPage })));
 }
 exports.SmartTable = SmartTable;
-//# sourceMappingURL=smart-table.js.map

package/dist/theme/index.d.ts

@@ -1,2 +1 @@
 export * from './theme';
-//# sourceMappingURL=index.d.ts.map

package/dist/theme/index.js

@@ -1,7 +1,13 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./theme"));
-//# sourceMappingURL=index.js.map
+__exportStar(require("./theme"), exports);

package/dist/theme/theme.d.ts

@@ -6,4 +6,3 @@ declare const mapMcToMuiTheme: (mcTheme: {
     [key: string]: string;
 }, prefersDarkMode?: boolean) => import("@material-ui/core").Theme;
 export { useMediaQuery, useMappedMuiTheme, mapMcToMuiTheme };
-//# sourceMappingURL=theme.d.ts.map

package/dist/theme/theme.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.mapMcToMuiTheme = exports.useMappedMuiTheme = exports.useMediaQuery = void 0;
 var react_1 = __importDefault(require("react"));
 var core_1 = require("@material-ui/core");
 var useMediaQuery_1 = __importDefault(require("@material-ui/core/useMediaQuery"));
@@ -121,4 +122,3 @@ textIconOnDark: 'rgba(255, 255, 255, 0.5)', */
 --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5);
 --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); */
-//# sourceMappingURL=theme.js.map

package/dist/utils/map.d.ts

@@ -1,4 +1,3 @@
 export declare const toRadian: (num: number) => number;
 export declare const toDegrees: (num: number) => number;
 export declare const getAltitude: (mapzoom: number) => number;
-//# sourceMappingURL=map.d.ts.map

package/dist/utils/map.js

@@ -1,13 +1,16 @@
 "use strict";
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toRadian = function (num) {
+exports.getAltitude = exports.toDegrees = exports.toRadian = void 0;
+var toRadian = function (num) {
     return (num * Math.PI) / 180;
 };
-exports.toDegrees = function (num) {
+exports.toRadian = toRadian;
+var toDegrees = function (num) {
     return num * (180 / Math.PI);
 };
-exports.getAltitude = function (mapzoom) {
+exports.toDegrees = toDegrees;
+var getAltitude = function (mapzoom) {
     //this equation is a transformation of the angular size equation solving for D. See: http://en.wikipedia.org/wiki/Forced_perspective
     var firstPartOfEq = 0.05 * (591657550.5 / Math.pow(2, mapzoom - 1) / 2); //amount displayed is .05 meters and map scale =591657550.5/(Math.pow(2,(mapzoom-1))))
     //this bit ^ essentially gets the h value in the angular size eq then divides it by 2
@@ -15,4 +18,4 @@ exports.getAltitude = function (mapzoom) {
         (Math.cos(exports.toRadian(85.362 / 2)) / Math.sin(exports.toRadian(85.362 / 2))); //85.362 is angle which google maps displays on a 5cm wide screen
     return googleearthaltitude;
 };
-//# sourceMappingURL=map.js.map
+exports.getAltitude = getAltitude;

package/dist/utils/projections.d.ts

@@ -4,4 +4,3 @@ export declare enum Proj {
 }
 export declare const COORDINATES_WGS_FRACTION_DIGITS = 5;
 export declare const COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
-//# sourceMappingURL=projections.d.ts.map

package/dist/utils/projections.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.COORDINATES_MERCATOR_FRACTION_DIGITS = exports.COORDINATES_WGS_FRACTION_DIGITS = exports.Proj = void 0;
 var Proj;
 (function (Proj) {
     Proj["WGS84"] = "EPSG:4326";
@@ -7,4 +8,3 @@ var Proj;
 })(Proj = exports.Proj || (exports.Proj = {}));
 exports.COORDINATES_WGS_FRACTION_DIGITS = 5;
 exports.COORDINATES_MERCATOR_FRACTION_DIGITS = 2;
-//# sourceMappingURL=projections.js.map

package/dist/utils/story.d.ts

@@ -10,4 +10,3 @@ export interface CSFStory<StoryFnReturnType = unknown> {
     argTypes?: ArgTypes;
     (): StoryFnReturnType;
 }
-//# sourceMappingURL=story.d.ts.map

package/dist/utils/story.js

@@ -1,3 +1,2 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=story.js.map

package/package.json

@@ -1,100 +1,103 @@
-{
-  "name": "@map-colonies/react-components",
-  "version": "3.9.0",
-  "module": "dist/index.js",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "bugs": {
-    "url": "https://github.com/MapColonies/shared-components/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/MapColonies/shared-components.git"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@date-io/date-fns": "^1.3.13",
-    "@here/quantized-mesh-decoder": "^1.2.8",
-    "@map-colonies/react-core": "^3.3.1",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/pickers": "^3.2.10",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
-    "@turf/bbox": "^6.0.1",
-    "@turf/bbox-polygon": "^6.0.1",
-    "@turf/boolean-point-in-polygon": "^6.5.0",
-    "@turf/helpers": "^6.1.4",
-    "@turf/rewind": "^5.1.5",
-    "@types/geojson": "^7946.0.7",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/ol": "^6.3.1",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/textarea-caret": "^3.0.1",
-    "cesium": "1.84.0",
-    "copy-webpack-plugin": "^6.3.1",
-    "copyfiles": "2.3.0",
-    "cross-env": "7.0.2",
-    "date-fns": "^2.14.0",
-    "get-input-selection": "^1.1.4",
-    "lodash": "^4.17.20",
-    "ol": "^6.4.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1",
-    "resium": "^1.13.1",
-    "rimraf": "3.0.2",
-    "textarea-caret": "^3.1.0",
-    "typescript": "~3.7.2"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
-    "test": "react-scripts test",
-    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
-    "eject": "react-scripts eject",
-    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
-    "copyassets:all": "yarn run copyassets:cesium",
-    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
-    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
-    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
-    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
-    "build-storybook": "build-storybook -s public",
-    "eslint-check": "npx eslint . --ext .ts,.tsx"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@types/enzyme": "^3.10.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/lodash": "^4.14.165",
-    "@types/react-test-renderer": "^16.9.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
-    "jest-enzyme": "^7.1.2",
-    "react-test-renderer": "^16.13.1"
-  },
-  "gitHead": "3e15e1e543de64636187a5482827f6f2ba1de4bb",
-  "jest": {
-    "coverageReporters": [
-      "text",
-      "html"
-    ]
-  }
-}
+{
+  "name": "@map-colonies/react-components",
+  "version": "3.10.3",
+  "module": "dist/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "bugs": {
+    "url": "https://github.com/MapColonies/shared-components/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MapColonies/shared-components.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@here/quantized-mesh-decoder": "^1.2.8",
+    "@map-colonies/react-core": "^3.3.2",
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "@turf/bbox": "^6.0.1",
+    "@turf/bbox-polygon": "^6.0.1",
+    "@turf/boolean-point-in-polygon": "^6.5.0",
+    "@turf/helpers": "^6.1.4",
+    "@turf/rewind": "^5.1.5",
+    "@types/geojson": "^7946.0.7",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/ol": "^6.3.1",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/textarea-caret": "^3.0.1",
+    "babel-loader": "8.0.4",
+    "cesium": "1.84.0",
+    "chonky": "^2.3.2",
+    "chonky-icon-fontawesome": "^2.3.2",
+    "copy-webpack-plugin": "^6.3.1",
+    "copyfiles": "2.3.0",
+    "cross-env": "7.0.2",
+    "date-fns": "^2.14.0",
+    "get-input-selection": "^1.1.4",
+    "lodash": "^4.17.20",
+    "ol": "^6.4.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^4.0.1",
+    "resium": "^1.13.1",
+    "rimraf": "3.0.2",
+    "textarea-caret": "^3.1.0",
+    "typescript": "4.2.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "npx rimraf dist && tsc --project tsbuildconfig.json && yarn run copyassets:components",
+    "test": "react-scripts test",
+    "test:nowatch": "react-scripts test --coverage --watchAll=false --reporters='default' --reporters='jest-html-reporters'",
+    "eject": "react-scripts eject",
+    "postbuild": "copyfiles -u 2 -e \"**/*.ts\" -e \"**/*.tsx\" \"src/lib/**/*\" dist",
+    "copyassets:all": "yarn run copyassets:cesium",
+    "copyassets:cesium": "copyfiles -u 5 \"../../node_modules/cesium/Build/Cesium/**/*\" \"storybook-static\"",
+    "copyassets:components": "copyfiles -u 1 \"./public/assets/**/*\" \"dist\"",
+    "storybook": "yarn run copyassets:all && start-storybook -p 9010 -s public,\"storybook-static\"",
+    "storybook-https": "yarn run copyassets:all && start-storybook --ssl-cert ~/example.crt --ssl-key ~/example.key --https -p 9010 -s public,\"storybook-static\"",
+    "build-storybook": "build-storybook -s public",
+    "eslint-check": "npx eslint . --ext .ts,.tsx"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/lodash": "^4.14.165",
+    "@types/react-test-renderer": "^16.9.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "jest-enzyme": "^7.1.2",
+    "react-test-renderer": "^16.13.1"
+  },
+  "gitHead": "adb44b72ca2bf29dfd89a9fbb480df59e00d274f",
+  "jest": {
+    "coverageReporters": [
+      "text",
+      "html"
+    ]
+  }
+}

package/src/lib/autocomplete/autocomplete.tsx

@@ -24,10 +24,10 @@ const OPTION_LIST_MIN_WIDTH = 100;
 export interface IAutocompleteProps {
   Component: React.ReactElement;
   ComponentProps: Record<string, unknown>;
-  defaultValue: string;
+  defaultValue: string | undefined;
   disabled: boolean;
   maxOptions: number;
-  onBlur: () => void;
+  onBlur: (evt: any) => void;
   onChange: (val: string) => void;
   onKeyDown: (evt: any) => void;
   onRequestOptions: (val: string) => void;
@@ -50,7 +50,7 @@ export interface IAutocompleteProps {
 }
 
 const Autocomplete: React.FC<IAutocompleteProps> = (props) => {
-  const [recentValue, setRecentValue] = useState(props.defaultValue);
+  const [recentValue, setRecentValue] = useState(props.defaultValue ?? '');
   const [enableSpaceRemovers, setEnableSpaceRemovers] = useState(false);
 
   const [state, setState] = useState({
@@ -80,6 +80,16 @@ const Autocomplete: React.FC<IAutocompleteProps> = (props) => {
     };
   }, []);
 
+  useEffect(() => {
+    if (typeof props.value !== 'undefined') {
+      setRecentValue(props.value);
+    }
+
+    if (typeof props.defaultValue !== 'undefined') {
+      setRecentValue(props.defaultValue);
+    }
+  }, [props.value, props.defaultValue]);
+
   useEffect(() => {
     const { options } = props;
     const { caret } = state;
@@ -599,23 +609,11 @@ const Autocomplete: React.FC<IAutocompleteProps> = (props) => {
     ...rest
   } = props;
 
-  const stateValue = recentValue; //state.value;
-
   const propagated: any = Object.assign({}, rest);
   Object.keys(props).forEach((k) => {
     delete (propagated as Record<string, unknown>)[k];
   });
 
-  let val = '';
-
-  if (stateValue) {
-    val = stateValue;
-  } else if (defaultValue) {
-    val = defaultValue;
-  } else if (value !== undefined) {
-    val = value;
-  }
-
   return (
     <>
       {React.cloneElement(Component, {
@@ -624,7 +622,7 @@ const Autocomplete: React.FC<IAutocompleteProps> = (props) => {
         onChange: handleChange,
         onKeyDown: handleKeyDown,
         ref: refInput,
-        value: val,
+        value: recentValue,
         ...propagated,
         ...ComponentProps,
       })}
@@ -636,10 +634,10 @@ const Autocomplete: React.FC<IAutocompleteProps> = (props) => {
 const defaultProps: IAutocompleteProps = {
   Component: <textarea />,
   ComponentProps: {},
-  defaultValue: '',
+  defaultValue: undefined,
   disabled: false,
   maxOptions: 6,
-  onBlur: () => {},
+  onBlur: (evt: any) => {},
   onChange: (val: string) => {},
   onKeyDown: (evt: any) => {},
   onRequestOptions: (val: string) => {},

package/src/lib/cesium-map/map.tsx

@@ -22,11 +22,12 @@ import {
 import { isNumber, isArray } from 'lodash';
 import { getAltitude, toDegrees } from '../utils/map';
 import { Box } from '../box';
+import { Proj } from '../utils/projections';
 import { CoordinatesTrackerTool } from './tools/coordinates-tracker.tool';
 import { ScaleTrackerTool } from './tools/scale-tracker.tool';
 import { CesiumSettings, IBaseMap, IBaseMaps } from './settings/settings';
 import LayerManager from './layers-manager';
-import { CesiumSceneMode, CesiumSceneModeEnum, Proj } from '.';
+import { CesiumSceneMode, CesiumSceneModeEnum } from './map.types';
 
 import './map.css';
 
@@ -224,6 +225,16 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           height: 0,
         };
       }
+
+      const getCameraPositionCartographic = (): ICameraPosition => {
+        const camPos = mapViewRef.camera.positionCartographic;
+        return {
+          longitude: toDegrees(camPos.longitude),
+          latitude: toDegrees(camPos.latitude),
+          height: camPos.height,
+        };
+      };
+
       // https://stackoverflow.com/questions/33348761/get-center-in-cesium-map
       if (mapViewRef.scene.mode === SceneMode.SCENE3D) {
         const windowPosition = new Cartesian2(
@@ -240,18 +251,17 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
         const pickPositionCartographic = mapViewRef.scene.globe.ellipsoid.cartesianToCartographic(
           pickPosition as Cartesian3
         );
-        return {
-          longitude: toDegrees(pickPositionCartographic.longitude),
-          latitude: toDegrees(pickPositionCartographic.latitude),
-          height: mapViewRef.scene.camera.positionCartographic.height,
-        };
+
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        return pickPositionCartographic !== undefined
+          ? {
+              longitude: toDegrees(pickPositionCartographic.longitude),
+              latitude: toDegrees(pickPositionCartographic.latitude),
+              height: mapViewRef.scene.camera.positionCartographic.height,
+            }
+          : getCameraPositionCartographic();
       } else {
-        const camPos = mapViewRef.camera.positionCartographic;
-        return {
-          longitude: toDegrees(camPos.longitude),
-          latitude: toDegrees(camPos.latitude),
-          height: camPos.height,
-        };
+        return getCameraPositionCartographic();
       }
     };