@map-colonies/react-components 3.8.0 → 3.8.1

package/package.json

@@ -1,98 +1,100 @@
-{
-  "name": "@map-colonies/react-components",
-  "version": "3.8.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",
-    "@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.82.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\"",
-    "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": "d48ba8564021cd5302c1796e98ddc5669d439aab",
-  "jest": {
-    "coverageReporters": [
-      "text",
-      "html"
-    ]
-  }
-}
+{
+  "name": "@map-colonies/react-components",
+  "version": "3.8.1",
+  "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"
+    ]
+  }
+}

package/src/lib/cesium-map/context-menu.stories.tsx

@@ -7,7 +7,7 @@ import { CesiumSceneMode } from './map.types';
 import { IRasterLayer } from './layers-manager';
 
 export default {
-  title: 'Cesium Map/Context Menu',
+  title: 'Cesium Map',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -442,4 +442,3 @@ export const MapWithContextMenu: Story = () => {
     </div>
   );
 };
-MapWithContextMenu.storyName = 'Map Context Menu';

package/src/lib/cesium-map/layers/3d.tileset.stories.tsx

@@ -87,10 +87,9 @@ Cesium3DTilesetOnHeightLayer.argTypes = {
 export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}>
-      <Cesium3DTileset url="/mock/Rehovot_solar_tileset/L16_31232/L16_31232.json" />
       <Cesium3DTileset
         isZoomTo={true}
-        url="/mock/Rehovot_solar_tileset/L16_31023/L16_31023.json"
+        url="/mock/tileset_2/L16_31023/L16_31023.json"
       />
     </CesiumMap>
   </div>

package/src/lib/cesium-map/layers/3d.tileset.update.ts

@@ -0,0 +1,72 @@
+/*
+   https://sandcastle.cesium.com/index.html?#c=fVZtTxs5EP4re3xho0YOkOv1jgC6ElIuiAQKKaWQqnJ2nayL187Z3qCk4r/f+GXf8nKWot3YzzOeGT8z6wWWQRdLTRTFvB2cBl14y1JUznXGfMxbreBSYq798tV9gKOIKBVoESxFJgMqeICVIlqNuTfRFxzFZIozpj9a8Ei8EA5b7JPlVTK5jOgNvep/WfUPh7Sv+vzufdTt/9F/mT8+dK/+QgD6N758MSA6GJ3/HB712gN60H66fHq5Ht0l39K+vvnaWw27h/RmFP+8ueitBqvB+8FqRq+7V/MnMDa8+Kz6KUtieB+MPv8+/Am/i8HBoH2AztvdD0NBlu2n28do+uHHp8fz3rdXKiN91J6qLyS64/eHR5+YHv65b3OwgFRFNrQRkRJTfivFgsZEllmLJMGafBWSxR4TNjqOSRijcyVovEnm5DU30NuBsmacoQUlr+u0BzsX7jv3uoJr4BK53wx+jXkAY4IVucZLIm9p9ALs42CKmSJNt6rXXDreHueYv+XRqIhwAj44Z5D9az20b2jGxITA4c91MiJKf5yBFaW9OaBpmZEiIE0ZAeHAtCPPJU2ppguiEI7j0LlYCdY92hcjxwt9iGZkkh0HpfzuiAJtRgRNpUg/GnX247D9oX3UcJQ3ePrEujhWQqQjEXqPPAoJnRD5ShUJpxmPtJF6CKEI2Qgqe0eCK8EIYmLmVzv5LnaLgpvNYxCJ8T6wOxVWTDImIuMx5bMHwbLUZNggUH3W26XTIPSxQpnBecfWHAJHNOH6vMZp1HzdvstWYh5E6aKHrbE6JSAVMWGw7FfQDztRASSEzhJjoO4HSimnaZb+Y5creJCFtpK3htAPqaOunapguJApZoWInAKLokMzAlRNo/tMTnFEhhYdOsNNp66i44WNRsWwmE6dOksASqGn0Tlbni/vI8ywDN3uTR/Z/xuMYF7UO62YSTxPaGSFWvC8e1XuHNZBiCX7NSG2y/oWkevCJWG9rk9PT3f2oZo+zFaSKIjSHKNxsFMuugVUHOJBZc37hwAj2IKEDltUAuwOzv/awJfxKJzOGfG+DYTSFwR6GQNtbw2pGTxb9743EBQpLwrUb6xqUW1E5kHPB987dZRJ4W9rteVD2bDoUqIzyTcyVSmcNaQzVoG+NcpCcy95KrfFVXOiCGeboLQo5VQ/jEJSQlHbl2oKV9lESxxpT2r6MtitbDPWy7NuMmKCkzDfrrmBrvXLtx0t0zR8KUSZAXNUZiLvQ3cEx8tafkqyY+4Uo8kGowqsWNf9VwCZ57XAsfka9RawxbXHlKdSa+NVEZkFW3Y1n6uj4p210tmE5D6Fjd3a2tSPbTUJZbG0ly6XI/+/0lEY4TOdmDL3a8jNeMhUyCA0OGorHR4nntIJ3r2jOxJtTim390y/V3yz7t1jHkdYafh6QE5HYjZj5DzTGjK5n18SehxPoOzhCmMuC82gyHWUELjCxDUBrM+ZsaMFbr/a7NTELiu72uj6KdRzkksq16E9tb3m3onSS0bOHOVvms6F1OYyEyLU0gQ6IthQrUkGQcIhKmVoJ62cdBLTRUDj0/He2v1vvBdEDG7lsDLNGLunKzLeOztpAb5GY6Bu+ArfLIhkeGkgyeHZtZtECJ204O8mSwvBJlhWLP4H
+*/
+
+/*
+import {
+  Cesium3DTileset,
+  Cesium3DTile,
+  Cartographic,
+  Cartesian3,
+  defined,
+  sampleTerrainMostDetailed,
+} from 'cesium';
+
+const updateTile = (tile: Cesium3DTile): void => {
+  const boundingVolume = tile.boundingVolume;
+  if (defined(tile.contentBoundingVolume)) {
+    boundingVolume = tile.contentBoundingVolume;
+  }
+  const content = tile.content;
+  const model = content._model;
+  const height = boundingVolume.minimumHeight;
+  const center = model._rtcCenter;
+  const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(center, new Cartesian3());
+  const offset = Cartesian3.multiplyByScalar(normal, height, new Cartesian3());
+  const carto = Cartographic.fromCartesian(center);
+  const promise = when.defer();
+  if (scene.terrainProvider === ellipsoidTerrainProvider) {
+    const result = carto;
+    result.height = 0;
+    promise.resolve(result);
+  } else {
+    promise = sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then((results) => {
+      const result = results[0];
+      if (!defined(result)) {
+        return carto;
+      }
+      return result;
+    });
+  }
+  promise.then((result) => {
+    result = Cartographic.toCartesian(result);
+    const position = Cartesian3.subtract(result, offset, new Cartesian3());
+    model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
+  });
+};
+
+const updateTileset = (root: Cesium3DTile): void => {
+  if (root.contentReady) {
+    updateTile(root);
+  } else {
+    const listener = (tileset as Cesium3DTileset).tileLoad.addEventListener(
+      (tile: Cesium3DTile) => {
+        if (tile === root) {
+          updateTile(tile);
+          listener();
+        }
+      }
+    );
+  }
+  const children = root.children;
+  const length = children.length;
+  for (let i = 0; i < length; ++i) {
+    updateTileset(children[i]);
+  }
+};
+
+export const update = (tileset: Cesium3DTileset): void => {
+  updateTileset(tileset.root);
+};
+*/
+export {};

package/src/lib/cesium-map/layers/layers.rect.stories.tsx

@@ -0,0 +1,171 @@
+import React, { useLayoutEffect, useState } from 'react';
+import { Rectangle, Color } from 'cesium';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import bbox from '@turf/bbox';
+import { CesiumMap, CesiumMapProps, useCesiumMap } from '../map';
+import { CesiumSceneMode } from '../map.types';
+import { IRasterLayer, LayerType } from '../layers-manager';
+import { IBaseMaps } from '../settings/settings';
+import { CesiumXYZLayer } from './xyz.layer';
+
+export default {
+  title: 'Cesium Map/Layers/LayersRect',
+  component: CesiumMap,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const mapDivStyle = {
+  height: '90%',
+  width: '100%',
+  position: 'absolute' as const,
+};
+
+const BASE_MAPS = {
+  maps: [
+    {
+      id: '3rd',
+      title: '3rd Map Title',
+      isCurrent: true,
+      thumbnail:
+        'https://nsw.digitaltwin.terria.io/build/d8b97d3e38a0d43e5a06dea9aae17a3e.png',
+      baseRasteLayers: [
+        {
+          id: 'VECTOR_TILES',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 0,
+          options: {
+            url:
+              'https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=6170aad10dfd42a38d4d8c709a536f38',
+            layers: '',
+            credit: 'thunderforest',
+          },
+        },
+        {
+          id: 'VECTOR_TILES_GPS',
+          type: 'XYZ_LAYER',
+          opacity: 1,
+          zIndex: 1,
+          options: {
+            url: 'https://gps.tile.openstreetmap.org/lines/{z}/{x}/{y}.png',
+            layers: '',
+            credit: 'openstreetmap',
+          },
+        },
+        {
+          id: 'WMTS_POPULATION_TILES',
+          type: 'WMTS_LAYER',
+          opacity: 0.4,
+          zIndex: 2,
+          options: {
+            url:
+              'https://services.arcgisonline.com/arcgis/rest/services/Demographics/USA_Population_Density/MapServer/WMTS/',
+            layer: 'USGSShadedReliefOnly',
+            style: 'default',
+            format: 'image/jpeg',
+            tileMatrixSetID: 'default028mm',
+            maximumLevel: 19,
+            credit: 'U. S. Geological Survey',
+          },
+        },
+      ],
+      baseVectorLayers: [],
+    },
+  ],
+};
+
+const mapViewProps: CesiumMapProps = {
+  center: [34.811, 31.908],
+  zoom: 14,
+  imageryProvider: false,
+  sceneModes: [CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW],
+  baseMaps: BASE_MAPS as IBaseMaps,
+};
+
+const optionsRectXYZ = {
+  url:
+    'https://tiles.openaerialmap.org/5a831b4a2553e6000ce5ac80/0/d02ddc76-9c2e-4994-97d4-a623eb371456/{z}/{x}/{y}.png',
+  footprint: {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [34.8043847068541, 31.9023297972932],
+        [34.8142791322292, 31.9023297972932],
+        [34.8142791322292, 31.9108796531516],
+        [34.8043847068541, 31.9108796531516],
+        [34.8043847068541, 31.9023297972932],
+      ],
+    ],
+  },
+};
+
+// Use Turf.js/bbox to calculate the bounding box from the supplied footprint.
+
+const childLayerRect = Rectangle.fromDegrees(...bbox(optionsRectXYZ.footprint));
+
+export const MapWithXYZLayersAndRect: Story = () => (
+  <div style={mapDivStyle}>
+    <CesiumMap {...mapViewProps}>
+      <CesiumXYZLayer rectangle={childLayerRect} options={optionsRectXYZ} />
+    </CesiumMap>
+  </div>
+);
+
+MapWithXYZLayersAndRect.storyName = 'XYZ child layer with rect';
+
+export const MapWithSettings: Story = () => {
+  const layer = {
+    id: '2_raster_ext',
+    type: 'XYZ_LAYER' as LayerType,
+    opacity: 1,
+    zIndex: 0,
+    show: true,
+    options: {
+      url:
+        'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
+    },
+  };
+
+  return (
+    <div style={mapDivStyle}>
+      <CesiumMap {...mapViewProps}>
+        <LayerViewer layer={layer as IRasterLayer} />
+      </CesiumMap>
+    </div>
+  );
+};
+MapWithSettings.storyName = 'Layer manager rect';
+
+interface ILayerViewerProps {
+  layer: IRasterLayer;
+}
+
+const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
+  const mapViewer = useCesiumMap();
+  const { layer } = props;
+
+  // Mockin footprint data on layer meta
+  const layerFootprint = {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [34.8099445223518, 31.9061345394902],
+        [34.8200994167574, 31.9061345394902],
+        [34.8200994167574, 31.9106311613979],
+        [34.8099445223518, 31.9106311613979],
+        [34.8099445223518, 31.9061345394902],
+      ],
+    ],
+  };
+
+  useLayoutEffect(() => {
+    const layerManagerRect = Rectangle.fromDegrees(...bbox(layerFootprint));
+
+    layer.options.rectangle = layerManagerRect;
+
+    mapViewer.layersManager?.addRasterLayer(layer, 0, '');
+  }, [mapViewer, layerFootprint, layer]);
+  return <></>;
+};

package/src/lib/cesium-map/layers-manager.stories.tsx

@@ -5,7 +5,7 @@ import { CesiumSceneMode } from './map.types';
 import { IRasterLayer } from './layers-manager';
 
 export default {
-  title: 'Cesium Map/Layers Manager',
+  title: 'Cesium Map',
   component: CesiumMap,
   parameters: {
     layout: 'fullscreen',
@@ -191,7 +191,7 @@ const layers = [
   },
 ];
 
-export const MapWithSettings: Story = () => {
+export const LayersManager: Story = () => {
   const [center] = useState<[number, number]>([34.811, 31.908]);
   return (
     <div style={mapDivStyle}>
@@ -207,7 +207,6 @@ export const MapWithSettings: Story = () => {
     </div>
   );
 };
-MapWithSettings.storyName = 'Map Layer Manager';
 
 interface ILayersMozaikProps {
   layers: IRasterLayer[];

package/src/lib/cesium-map/layers-manager.ts

@@ -25,9 +25,11 @@ export interface ICesiumImageryLayer extends InstanceType<typeof ImageryLayer> {
   meta?: Record<string, unknown>;
 }
 
+export type LayerType = 'OSM_LAYER' | 'WMTS_LAYER' | 'WMS_LAYER' | 'XYZ_LAYER';
+
 export interface IRasterLayer {
   id: string;
-  type: 'OSM_LAYER' | 'WMTS_LAYER' | 'WMS_LAYER' | 'XYZ_LAYER';
+  type: LayerType;
   opacity: number;
   zIndex: number;
   show?: boolean;

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

@@ -24,13 +24,13 @@ export const BaseMap: Story = (args: CesiumMapProps) => (
   </div>
 );
 
-export const ZommedMap: Story = (args: CesiumMapProps) => (
+export const ZoomedMap: Story = (args: CesiumMapProps) => (
   <div style={mapDivStyle}>
     <CesiumMap {...args}></CesiumMap>
   </div>
 );
 
-ZommedMap.argTypes = {
+ZoomedMap.argTypes = {
   center: {
     defaultValue: [34.9578094, 32.8178637],
   },
@@ -100,7 +100,7 @@ Map2DWithProjection.argTypes = {
     },
   },
 };
-Map2DWithProjection.storyName = '2D Map with projection';
+Map2DWithProjection.storyName = '2D Map With Projection';
 
 export const LocalizedMap: Story = (args: CesiumMapProps) => (
   <div style={mapDivStyle}>

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

@@ -17,6 +17,7 @@ import {
   PerspectiveOffCenterFrustum,
   OrthographicFrustum,
   ScreenSpaceEventType,
+  TerrainProvider,
 } from 'cesium';
 import { isNumber, isArray } from 'lodash';
 import { getAltitude, toDegrees } from '../utils/map';
@@ -87,6 +88,7 @@ export interface CesiumMapProps extends ViewerProps {
   locale?: { [key: string]: string };
   sceneModes?: CesiumSceneModeEnum[];
   baseMaps?: IBaseMaps;
+  terrainProvider?: TerrainProvider;
   imageryContextMenu?: React.ReactElement<IContextMenuData>;
   imageryContextMenuSize?: {
     height: number;