@map-colonies/react-components 3.7.2 → 3.8.1

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;
@@ -174,7 +176,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
       }
     }
     setMapViewRef(ref.current?.cesiumElement);
-  }, [ref]);
+  }, [ref, props.imageryContextMenu]);
 
   useEffect(() => {
     setSceneModes(

package/src/lib/cesium-map/terrain-providers/custom/dummy-quantized-mesh-tile.ts

@@ -0,0 +1,243 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+export const dummyTile = new Uint8Array([
+  172,
+  223,
+  96,
+  7,
+  210,
+  166,
+  80,
+  193,
+  62,
+  133,
+  0,
+  92,
+  97,
+  125,
+  81,
+  193,
+  175,
+  204,
+  114,
+  156,
+  24,
+  171,
+  39,
+  65,
+  215,
+  131,
+  189,
+  193,
+  92,
+  143,
+  98,
+  193,
+  172,
+  223,
+  224,
+  55,
+  148,
+  164,
+  80,
+  193,
+  62,
+  133,
+  128,
+  115,
+  254,
+  122,
+  81,
+  193,
+  175,
+  204,
+  114,
+  40,
+  74,
+  169,
+  39,
+  65,
+  199,
+  225,
+  33,
+  1,
+  165,
+  221,
+  10,
+  65,
+  165,
+  248,
+  77,
+  38,
+  221,
+  233,
+  229,
+  191,
+  118,
+  168,
+  124,
+  106,
+  57,
+  4,
+  231,
+  191,
+  208,
+  126,
+  103,
+  119,
+  149,
+  64,
+  191,
+  63,
+  9,
+  0,
+  0,
+  0,
+  254,
+  127,
+  253,
+  127,
+  254,
+  127,
+  253,
+  127,
+  0,
+  0,
+  254,
+  255,
+  255,
+  127,
+  0,
+  128,
+  0,
+  0,
+  254,
+  127,
+  253,
+  127,
+  0,
+  0,
+  254,
+  127,
+  0,
+  128,
+  0,
+  0,
+  0,
+  0,
+  253,
+  255,
+  254,
+  127,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  8,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  2,
+  0,
+  3,
+  0,
+  0,
+  0,
+  4,
+  0,
+  0,
+  0,
+  2,
+  0,
+  5,
+  0,
+  0,
+  0,
+  0,
+  0,
+  7,
+  0,
+  0,
+  0,
+  0,
+  0,
+  2,
+  0,
+  9,
+  0,
+  7,
+  0,
+  4,
+  0,
+  9,
+  0,
+  1,
+  0,
+  5,
+  0,
+  9,
+  0,
+  3,
+  0,
+  3,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  0,
+  3,
+  0,
+  3,
+  0,
+  0,
+  0,
+  1,
+  0,
+  7,
+  0,
+  2,
+  0,
+  3,
+  0,
+  0,
+  0,
+  7,
+  0,
+  5,
+  0,
+  8,
+  0,
+  3,
+  0,
+  0,
+  0,
+  4,
+  0,
+  5,
+  0,
+  6,
+  0,
+]);
+
+export default dummyTile.buffer;