@map-colonies/react-components 3.15.0 → 4.0.1

package/src/lib/cesium-map/helpers/utils.ts

@@ -1,135 +0,0 @@
-import { Rectangle } from 'cesium';
-import { CustomImageryProvider } from './customImageryProviders';
-
-const canvasElem = document.createElement('canvas');
-const canvasCtx = canvasElem.getContext('2d');
-
-/**
- * @param image Image data to check
- * @returns `true` if image data has at least one transparent pixel, `false` otherwise.
- */
-const imageDataHasTransparency = (image: ImageData | undefined): boolean => {
-  const ALPHA_CHANNEL_OFFSET = 4; // [R,G,B,A, R,G,B,A] => FLAT ARRAY OF THIS SHAPE; (Uint8ClampedArray)
-  const OPAQUE_PIXEL_ALPHA_VALUE = 255;
-  const imgData = image?.data ?? [];
-
-  // Iterate through alpha channels only.
-  for (let i = 3; i < imgData?.length; i += ALPHA_CHANNEL_OFFSET) {
-    if (imgData[i] < OPAQUE_PIXEL_ALPHA_VALUE) {
-      // Transparent pixel found.
-      return true;
-    }
-  }
-  return false;
-};
-
-/**
- * An async function to detect images with transparency.
- * @param image The image to resolve. if value is `string (url)` it tries to fetch the image data first.
- * Could also be `HTMLImageElement` or `ImageBitmap`
- * @param context `optional` `CustomImageryProvider` context in which the function will automatically increase
- * the `tileTransparencyCheckedCounter`. Sets to `maxTilesForTransparencyCheck` when layer detected as transparent.
- * @returns
- */
-export const imageHasTransparency = async (
-  image: string | HTMLImageElement | ImageBitmap,
-  context?: CustomImageryProvider
-): Promise<boolean> => {
-  if (context) {
-    context.tileTransparencyCheckedCounter++;
-  }
-
-  return new Promise<boolean>((resolve, reject) => {
-    try {
-      canvasCtx?.clearRect(0, 0, canvasElem.width, canvasElem.height);
-      let imageElement: HTMLImageElement;
-
-      // Init Image instance.
-      if (image instanceof HTMLImageElement) {
-        imageElement = image;
-      } else if (image instanceof ImageBitmap) {
-        canvasElem.width = image.width;
-        canvasElem.height = image.height;
-        canvasCtx?.drawImage(image, 0, 0);
-
-        const canvasImg = canvasCtx?.getImageData(
-          0,
-          0,
-          canvasElem.width,
-          canvasElem.height
-        );
-        const hasTransparency = imageDataHasTransparency(canvasImg);
-        if (hasTransparency) {
-          if (context) {
-            context.tileTransparencyCheckedCounter =
-              context.maxTilesForTransparencyCheck;
-          }
-        }
-
-        resolve(hasTransparency);
-        return;
-      } else {
-        imageElement = new Image();
-        imageElement.crossOrigin = 'anonymous'; // Disable CORS errors on canvas image load.
-        imageElement.src = image;
-      }
-
-      imageElement.onload = (): void => {
-        // Image loaded, set canvas size to image size.
-        canvasElem.width = imageElement.width;
-        canvasElem.height = imageElement.height;
-
-        canvasCtx?.drawImage(imageElement, 0, 0);
-
-        const canvasImg = canvasCtx?.getImageData(
-          0,
-          0,
-          canvasElem.width,
-          canvasElem.height
-        );
-
-        const hasTransparency = imageDataHasTransparency(canvasImg);
-
-        if (hasTransparency) {
-          if (context) {
-            context.tileTransparencyCheckedCounter =
-              context.maxTilesForTransparencyCheck;
-          }
-
-          resolve(true);
-        } else {
-          resolve(false);
-        }
-      };
-    } catch (e) {
-      console.error('Could not determine image transparency. Error => ', e);
-      reject(e);
-    }
-  });
-};
-
-/**
- * Checks if `rect` is contained inside `anotherRect`
- * @param rect
- * @param anotherRect
- */
-export const cesiumRectangleContained = (
-  rect: Rectangle,
-  anotherRect: Rectangle
-): boolean => {
-  const { west, east, north, south } = rect;
-  const {
-    west: anotherWest,
-    east: anotherEast,
-    north: anotherNorth,
-    south: anotherSouth,
-  } = anotherRect;
-
-  const isRectInsideAnother =
-    west >= anotherWest &&
-    east <= anotherEast &&
-    north <= anotherNorth &&
-    south >= anotherSouth;
-
-  return isRectInsideAnother;
-};

package/src/lib/cesium-map/index.ts

@@ -1,8 +0,0 @@
-export * from './map';
-export * from './map.types';
-export * from './layers';
-export * from '../utils/projections';
-export * from './entities';
-export * from './data-sources';
-export * from './proxied.types';
-export * from './layers-manager';

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

@@ -1,164 +0,0 @@
-import React from 'react';
-import { ArcGISTiledElevationTerrainProvider } from 'cesium';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { action } from '@storybook/addon-actions';
-import { CesiumMap } from '../map';
-import { LayerType } from '../layers-manager';
-import { Cesium3DTileset } from './3d.tileset';
-
-export default {
-  title: 'Cesium Map/Layers/3DTileset',
-  component: Cesium3DTileset,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const BASE_MAPS = {
-  maps: [
-    {
-      id: '1st',
-      title: '1st Map Title',
-      isCurrent: true,
-      thumbnail:
-        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
-      baseRasteLayers: [
-        {
-          id: 'GOOGLE_TERRAIN',
-          type: 'XYZ_LAYER' as LayerType,
-          opacity: 1,
-          zIndex: 0,
-          options: {
-            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
-            layers: '',
-            credit: 'GOOGLE',
-          },
-        },
-      ],
-      baseVectorLayers: [],
-    },
-  ],
-};
-
-const ArcGisProvider = new ArcGISTiledElevationTerrainProvider({
-  url:
-    'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer',
-});
-
-export const Cesium3DTilesetLayer: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <Cesium3DTileset
-        isZoomTo={true}
-        url="/mock/tileset_1/tileset.json"
-        onAllTilesLoad={action('onAllTilesLoad')}
-        onInitialTilesLoad={action('onInitialTilesLoad')}
-        onTileFailed={action('onTileFailed')}
-        onTileLoad={action('onTileLoad')}
-        onTileUnload={action('onTileUnload')}
-        onReady={(tileset): void => {
-          action('onReady');
-        }}
-        onClick={action('onClick')}
-      />
-    </CesiumMap>
-  </div>
-);
-
-Cesium3DTilesetLayer.argTypes = {
-  baseMaps: {
-    defaultValue: BASE_MAPS,
-  },
-  zoom: {
-    defaultValue: 3,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-Cesium3DTilesetLayer.storyName = '3D Layer';
-
-export const Cesium3DTilesetWithHeightCorrectionLayer: Story = (
-  args: unknown
-) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <Cesium3DTileset
-        isZoomTo={false}
-        heightFromGround={-10}
-        url="/mock/tileset_1/tileset.json"
-        onAllTilesLoad={action('onAllTilesLoad')}
-        onInitialTilesLoad={action('onInitialTilesLoad')}
-        onTileFailed={action('onTileFailed')}
-        onTileLoad={action('onTileLoad')}
-        onTileUnload={action('onTileUnload')}
-        onReady={(tileset): void => {
-          action('onReady');
-        }}
-        onClick={action('onClick')}
-      />
-    </CesiumMap>
-  </div>
-);
-
-Cesium3DTilesetWithHeightCorrectionLayer.argTypes = {
-  baseMaps: {
-    defaultValue: BASE_MAPS,
-  },
-  zoom: {
-    defaultValue: 17,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-  center: {
-    defaultValue: [-75.61208, 40.04227],
-  },
-};
-
-Cesium3DTilesetWithHeightCorrectionLayer.storyName =
-  '3D with Height Correction Layer';
-
-export const CesiumSolar3DTilesetLayer: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <Cesium3DTileset
-        isZoomTo={true}
-        url="/mock/tileset_2/L16_31023/L16_31023.json"
-      />
-    </CesiumMap>
-  </div>
-);
-
-CesiumSolar3DTilesetLayer.argTypes = {
-  baseMaps: {
-    defaultValue: BASE_MAPS,
-  },
-  terrainProvider: {
-    defaultValue: ArcGisProvider,
-  },
-  center: {
-    defaultValue: [34.811, 31.908],
-  },
-  zoom: {
-    defaultValue: 14,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-CesiumSolar3DTilesetLayer.storyName = 'Solar 3D Layer with Terrain Provider';

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Cartesian3, Cartographic, Matrix4 } from 'cesium';
-import { Cesium3DTileset as Resium3DTileset } from 'resium';
-import { Cesium3DTilesetProps } from 'resium/dist/types/src/Cesium3DTileset/Cesium3DTileset';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-const GROUND_LEVEL = 0.0;
-
-export interface RCesium3DTilesetProps extends Cesium3DTilesetProps {
-  isZoomTo?: boolean;
-  heightFromGround?: number;
-}
-
-export const Cesium3DTileset: React.FC<RCesium3DTilesetProps> = (props) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  return (
-    <Resium3DTileset
-      {...props}
-      onReady={(tileset): void => {
-        props.onReady?.(tileset);
-        if (props.isZoomTo === true) {
-          void mapViewer.zoomTo(tileset);
-        }
-        const scene = mapViewer.scene;
-        scene.globe.depthTestAgainstTerrain = true;
-        const cartographic = Cartographic.fromCartesian(
-          tileset.boundingSphere.center
-        );
-        const heightFromGround = props.heightFromGround ?? GROUND_LEVEL;
-        if (heightFromGround) {
-          const surface = Cartesian3.fromRadians(
-            cartographic.longitude,
-            cartographic.latitude,
-            cartographic.height
-          );
-          const offset = Cartesian3.fromRadians(
-            cartographic.longitude,
-            cartographic.latitude,
-            cartographic.height + heightFromGround
-          );
-          const translation = Cartesian3.subtract(
-            offset,
-            surface,
-            new Cartesian3()
-          );
-          tileset.modelMatrix = Matrix4.fromTranslation(translation);
-        }
-      }}
-    />
-  );
-};

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

@@ -1,120 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-/*
-   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 React, { useEffect, useState } from 'react';
-import {
-  Cesium3DTileset,
-  Cesium3DTile,
-  Cartographic,
-  Cartesian3,
-  defined,
-  sampleTerrainMostDetailed,
-  Cesium3DTileContent,
-} from 'cesium';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-export interface Cesium3DTilesetWithUpdateProps {
-  url: string;
-  withUpdate?: boolean;
-}
-
-export const Cesium3DTilesetWithUpdate: React.FC<Cesium3DTilesetWithUpdateProps> = ({
-  url,
-  withUpdate,
-}) => {
-  const mapViewer: CesiumViewer = useCesiumMap();
-  const scene = mapViewer.scene;
-  const [cesium3DTileset] = useState<Cesium3DTileset>(
-    new Cesium3DTileset({
-      url: url,
-    })
-  );
-  const [tileset] = useState<Cesium3DTileset>(
-    scene.primitives.add(cesium3DTileset)
-  );
-
-  useEffect(() => {
-    scene.globe.depthTestAgainstTerrain = true;
-    void mapViewer.zoomTo(tileset);
-    if (withUpdate === true) {
-      updateTileset(tileset);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const updateContent = (
-    model: Cesium3DTileContent,
-    boundingVolume: any
-  ): void => {
-    const height = boundingVolume.minimumHeight
-      ? boundingVolume.minimumHeight
-      : boundingVolume.center.z - boundingVolume.radius;
-    // @ts-ignore
-    const center = model._rtcCenter ?? boundingVolume.center;
-    const normal = scene.globe.ellipsoid.geodeticSurfaceNormal(
-      center,
-      new Cartesian3()
-    );
-    const offset = Cartesian3.multiplyByScalar(
-      normal,
-      height,
-      new Cartesian3()
-    );
-    const carto = Cartographic.fromCartesian(center);
-    void new Promise((resolve, reject) => {
-      // @ts-ignore
-      if (scene.terrainProvider._ready !== true) {
-        const result = { ...carto };
-        result.height = 0;
-        resolve(result);
-      } else {
-        void sampleTerrainMostDetailed(scene.terrainProvider, [carto]).then(
-          (results) => {
-            const result = results[0];
-            if (!defined(result)) {
-              resolve(carto);
-            }
-            resolve(result);
-          }
-        );
-      }
-    }).then((result) => {
-      const resultCartesian = Cartographic.toCartesian(result as Cartographic);
-      const position = Cartesian3.subtract(
-        resultCartesian,
-        offset,
-        new Cartesian3()
-      );
-      // @ts-ignore
-      model._rtcCenter = Cartesian3.clone(position, model._rtcCenter);
-    });
-  };
-
-  const updateTile = (tile: Cesium3DTile): void => {
-    if (tile.content !== undefined) {
-      // @ts-ignore
-      updateContent(tile.content, tile.boundingVolume.boundingVolume);
-    } else {
-      const listener = tileset.tileLoad.addEventListener((t) => {
-        if (t === tile) {
-          updateContent(t.content, t.boundingVolume.boundingVolume);
-          listener();
-        }
-      });
-    }
-    tile.children.forEach((child) => updateTile(child));
-  };
-
-  const updateTileset = (tileset: Cesium3DTileset): void => {
-    void tileset.readyPromise.then(() => {
-      updateTile(tileset.root);
-    });
-  };
-
-  return <></>;
-};

package/src/lib/cesium-map/layers/geojson.layer.stories.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { Color } from 'cesium';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { action } from '@storybook/addon-actions';
-import { CesiumMap } from '../map';
-import { LayerType } from '../layers-manager';
-import { CesiumGeojsonLayer } from './geojson.layer';
-
-export default {
-  title: 'Cesium Map/Layers/GeojsonLayer',
-  component: CesiumGeojsonLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const BASE_MAPS = {
-  maps: [
-    {
-      id: '1st',
-      title: '1st Map Title',
-      isCurrent: true,
-      thumbnail:
-        'https://nsw.digitaltwin.terria.io/build/efa2f6c408eb790753a9b5fb2f3dc678.png',
-      baseRasteLayers: [
-        {
-          id: 'GOOGLE_TERRAIN',
-          type: 'XYZ_LAYER' as LayerType,
-          opacity: 1,
-          zIndex: 0,
-          options: {
-            url: 'https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',
-            layers: '',
-            credit: 'GOOGLE',
-          },
-        },
-      ],
-      baseVectorLayers: [],
-    },
-  ],
-};
-
-const data = {
-  type: 'FeatureCollection',
-  features: [
-    {
-      type: 'Feature',
-      properties: {
-        name: 'Coors Field',
-        amenity: 'Baseball Stadium',
-        popupContent: 'This is where the Rockies play!',
-      },
-      geometry: {
-        type: 'Point',
-        coordinates: [-104.99404, 39.75621],
-      },
-    },
-    {
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates: [
-          [102.0, 0.0],
-          [103.0, 1.0],
-          [104.0, 0.0],
-          [105.0, 1.0],
-        ],
-      },
-      properties: {
-        prop0: 'value0',
-        prop1: 0.0,
-      },
-    },
-    {
-      type: 'Feature',
-      geometry: {
-        type: 'Polygon',
-        coordinates: [
-          [
-            [34.6165466, 33.0270876],
-            [34.6165466, 32.5896348],
-            [35.568924, 32.5873207],
-            [35.5373383, 33.0311173],
-            [34.6165466, 33.0270876],
-          ],
-        ],
-      },
-      properties: {
-        prop0: 'value0',
-        prop1: { this: 'that' },
-      },
-    },
-    {
-      type: 'Feature',
-      geometry: {
-        type: 'LineString',
-        coordinates: [
-          [32.2558594, 32.8611323],
-          [32.4975586, 30.1831218],
-          [35.8813477, 30.4486737],
-          [35.8154297, 33.0086635],
-          [32.2558594, 32.8611323],
-        ],
-      },
-    },
-    {
-      type: 'Feature',
-      geometry: {
-        type: 'MultiPolygon',
-        coordinates: [
-          [
-            [
-              [34.846843864982802, 32.068999681029801],
-              [34.863785627992797, 32.059005944018601],
-              [34.8773961450173, 32.068047896040397],
-              [34.880441855011703, 32.052819346068603],
-              [34.878633463995797, 32.0466327470143],
-              [34.8605495609931, 32.048821851014601],
-              [34.846843864982802, 32.068999681029801],
-            ],
-          ],
-        ],
-      },
-    },
-  ],
-};
-
-const onLoadAction = action('onLoad');
-
-export const MapWithGeojsonLayer: Story = (args: unknown) => (
-  <div style={mapDivStyle}>
-    <CesiumMap {...args}>
-      <CesiumGeojsonLayer
-        data={data}
-        markerColor={Color.RED}
-        onLoad={(g): void => {
-          // You can process the data source here
-          g.entities.values[0].name = 'Coors Field! After update';
-
-          // @ts-ignore
-          g.entities.values[2].polygon.material = Color.TRANSPARENT; //Color.RED.withAlpha(0.4);
-          // @ts-ignore
-          g.entities.values[2].polygon.outlineColor = Color.LIGHTBLUE;
-          // @ts-ignore
-          g.entities.values[2].polygon.outlineWidth = 6.0;
-
-          // /https://sandcastle.cesium.com/index.html?src=CZML%20Polyline.html&label=CZML
-          // @ts-ignore
-          g.entities.values[3].polyline.material = Color.LIGHTBLUE;
-          // @ts-ignore
-          g.entities.values[3].polyline.width = 6.0;
-          onLoadAction(g);
-        }}
-        onError={action('onError')}
-      />
-    </CesiumMap>
-  </div>
-);
-
-MapWithGeojsonLayer.argTypes = {
-  baseMaps: {
-    defaultValue: BASE_MAPS,
-  },
-  zoom: {
-    defaultValue: 17,
-    control: {
-      type: 'range',
-      min: 0,
-      max: 20,
-    },
-  },
-};
-
-MapWithGeojsonLayer.storyName = 'GeoJson layer';

package/src/lib/cesium-map/layers/geojson.layer.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import { GeoJsonDataSource as ResiumGeoJsonDataSource } from 'resium';
-import { GeoJsonDataSourceProps } from 'resium/dist/types/src/GeoJsonDataSource/GeoJsonDataSource';
-
-export interface RCesiumGeojsonLayerProps extends GeoJsonDataSourceProps {}
-
-export const CesiumGeojsonLayer: React.FC<RCesiumGeojsonLayerProps> = (
-  props
-) => {
-  return <ResiumGeoJsonDataSource {...props} />;
-};