@map-colonies/react-components 3.15.0 → 4.0.1

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

@@ -1,39 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { ArcGisMapServerImageryProvider, IonImageryProvider } from 'cesium';
-import { CesiumMap } from '../map';
-import { CesiumImageryLayer } from './imagery.layer';
-
-export default {
-  title: 'Cesium Map/Layers/ImageryLayer',
-  component: CesiumImageryLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-export const MapWithImageryLayers: Story = () => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumImageryLayer
-        imageryProvider={
-          new ArcGisMapServerImageryProvider({
-            url:
-              '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer',
-          })
-        }
-      />
-      <CesiumImageryLayer
-        alpha={0.5}
-        imageryProvider={new IonImageryProvider({ assetId: 3812 })}
-      />
-    </CesiumMap>
-  </div>
-);
-MapWithImageryLayers.storyName = 'With 2 imagery layers';

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

@@ -1,37 +0,0 @@
-import React, { useLayoutEffect } from 'react';
-import { ImageryLayer } from 'cesium';
-import { ImageryLayer as ResiumImageryLayer } from 'resium';
-import { ImageryLayerProps } from 'resium/dist/types/src/ImageryLayer/ImageryLayer';
-import { CesiumViewer, useCesiumMap } from '../map';
-
-export interface RCesiumImageryLayerProps extends ImageryLayerProps {
-  meta?: any;
-}
-
-export const CesiumImageryLayer: React.FC<RCesiumImageryLayerProps> = (
-  props
-) => {
-  // eslint-disable-next-line
-  const { meta, ...restProps } = props;
-  const mapViewer: CesiumViewer = useCesiumMap();
-
-  useLayoutEffect(() => {
-    mapViewer.layersManager?.addMetaToLayer(
-      meta,
-      /* eslint-disable */
-      meta.searchLayerPredicate ??
-        ((layer: ImageryLayer, idx: number): boolean => {
-          if (meta !== undefined) {
-            return (
-              (layer as any)._imageryProvider._resource._url ===
-              meta.options.url
-            );
-          }
-          return false;
-        })
-      /* eslint-enable */
-    );
-  }, [meta, mapViewer]);
-
-  return <ResiumImageryLayer {...restProps} />;
-};

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

@@ -1,7 +0,0 @@
-export * from './3d.tileset';
-export * from './geojson.layer';
-export * from './imagery.layer';
-export * from './wms.layer';
-export * from './wmts.layer';
-export * from './xyz.layer';
-export * from './osm.layer';

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

@@ -1,171 +0,0 @@
-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/optimized-tile-requests.stories.tsx

@@ -1,279 +0,0 @@
-import React, { ReactNode, useEffect, useState } from 'react';
-import bbox from '@turf/bbox';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { Rectangle } from 'cesium';
-import { CesiumMap, CesiumMapProps, useCesiumMap } from '../map';
-import { CesiumSceneMode } from '../map.types';
-import { IBaseMaps } from '../settings/settings';
-import { CesiumXYZLayer } from './xyz.layer';
-
-export default {
-  title: 'Cesium Map/Map Optimizations',
-  component: CesiumMap,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    useOptimizedTileRequests: true,
-  },
-  argTypes: {
-    useOptimizedTileRequests: {
-      description:
-        'Should the viewer determine layer relevancy based on its visibility and presence in scene. (Improves bandwidth usage and overall performance)',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-      control: 'boolean',
-    },
-  },
-} as Meta;
-
-const BASE_MAPS = {
-  maps: [
-    {
-      id: '3rd',
-      title: '3rd Map Title',
-      isCurrent: true,
-      thumbnail:
-        'https://nsw.digitaltwin.terria.io/build/d8b97d3e38a0d43e5a06dea9aae17a3e.png',
-      baseRasteLayers: [
-        {
-          id: 'Opaque Base world wide layer',
-          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: 'Transparent Base Roads world wide layer ',
-          type: 'XYZ_LAYER',
-          opacity: 1,
-          zIndex: 1,
-          options: {
-            url: 'https://gps.tile.openstreetmap.org/lines/{z}/{x}/{y}.png',
-            layers: '',
-            credit: 'openstreetmap',
-          },
-        },
-      ],
-      baseVectorLayers: [],
-    },
-  ],
-};
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const mapViewProps: CesiumMapProps = {
-  center: [-117.30644008676421, 33.117098433617564],
-  zoom: 14,
-  imageryProvider: false,
-  sceneModes: [CesiumSceneMode.SCENE3D, CesiumSceneMode.COLUMBUS_VIEW],
-  baseMaps: BASE_MAPS as IBaseMaps,
-};
-
-interface OptimizedTileRequestingMapStoryProps {
-  useOptimizedTileRequests: boolean;
-}
-
-interface LayerRelevancy {
-  layerId?: string;
-  isRelevant?: boolean;
-}
-
-const RelevancyPresentor: React.FC<OptimizedTileRequestingMapStoryProps> = ({
-  useOptimizedTileRequests,
-}) => {
-  const viewer = useCesiumMap();
-  const [layersRelevancy, setLayersRelevancy] = useState<LayerRelevancy[]>([]);
-
-  const updateLayerRelevancy = (): void => {
-    if (viewer.layersManager?.layerList) {
-      setLayersRelevancy(
-        viewer.layersManager?.layerList
-          .filter(
-            (layer): boolean => layer.meta?.id !== 'TRANSPARENT_BASE_LAYER'
-          )
-          .map(
-            (layer): LayerRelevancy => ({
-              layerId: layer.meta?.id as string | undefined,
-              isRelevant: layer.meta?.relevantToExtent as boolean,
-            })
-          )
-      );
-    }
-  };
-
-  useEffect(() => {
-    const removeTileLoad = viewer.scene.globe.tileLoadProgressEvent.addEventListener(
-      (tilesLoadingCount) => {
-        if (tilesLoadingCount === 0) {
-          updateLayerRelevancy();
-          removeTileLoad();
-        }
-      }
-    );
-
-    const removeMoveEnd = viewer.camera.moveEnd.addEventListener(() => {
-      updateLayerRelevancy();
-    });
-
-    return (): void => {
-      removeMoveEnd();
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <>
-      <div
-        style={{
-          position: 'absolute',
-          left: 0,
-          top: 0,
-          zIndex: 999,
-          background: 'white',
-          padding: '20px',
-          fontFamily: 'Helvetica',
-          minWidth: '200px',
-          minHeight: '200px',
-        }}
-      >
-        <h3>
-          {`Optimized Tile Requesting: ${
-            useOptimizedTileRequests ? 'enabled' : 'disabled'
-          }`}
-        </h3>
-        {layersRelevancy.map((layer) => {
-          return (
-            <div>
-              <p>Layer Id: {layer.layerId}</p>
-              <p>Requesting tiles: {layer.isRelevant?.toString()}</p>
-            </div>
-          );
-        })}
-      </div>
-    </>
-  );
-};
-
-const LayersContainer: React.FC = () => {
-  const [layer, setLayer] = useState<ReactNode>(null);
-  const btnStyle = {
-    position: 'absolute',
-    top: 50,
-    left: '50%',
-    zIndex: 1000,
-    transform: 'translate(0, -50%)',
-  } as React.CSSProperties;
-
-  const optionsXYZTransparency = {
-    url:
-      'https://tiles.openaerialmap.org/5d73614588556200055f10d6/0/5d73614588556200055f10d7/{z}/{x}/{y}',
-    footprint: {
-      coordinates: [
-        [
-          [-117.30976118375267, 33.116454006568205],
-          [-117.30976118375267, 33.11330462707964],
-          [-117.30513526140776, 33.11330462707964],
-          [-117.30513526140776, 33.116454006568205],
-          [-117.30976118375267, 33.116454006568205],
-        ],
-      ],
-      type: 'Polygon',
-    },
-  };
-
-  const optionsXYZOpaque = {
-    url: 'http://stamen-tiles-b.a.ssl.fastly.net/toner/{z}/{x}/{y}.png',
-    footprint: {
-      coordinates: [
-        [
-          [-117.31921599064628, 33.1210849388296],
-          [-117.31921599064628, 33.1094152732627],
-          [-117.29986251692546, 33.1094152732627],
-          [-117.29986251692546, 33.1210849388296],
-          [-117.31921599064628, 33.1210849388296],
-        ],
-      ],
-      type: 'Polygon',
-    },
-  };
-
-  return (
-    <>
-      <div
-        className="buttonsContainer"
-        style={{ display: 'flex', gap: '10px', ...btnStyle }}
-      >
-        <button
-          onClick={(): void =>
-            setLayer(
-              <CesiumXYZLayer
-                key="Transparent"
-                meta={{
-                  id: 'Transparent Layer',
-                  options: { ...optionsXYZTransparency },
-                }}
-                rectangle={Rectangle.fromDegrees(
-                  ...bbox(optionsXYZTransparency.footprint)
-                )}
-                options={optionsXYZTransparency}
-              />
-            )
-          }
-        >
-          Layer With Transparency
-        </button>
-
-        <button
-          onClick={(): void =>
-            setLayer(
-              <CesiumXYZLayer
-                key="Opaque"
-                meta={{ id: 'Opaque Layer', options: { ...optionsXYZOpaque } }}
-                rectangle={Rectangle.fromDegrees(
-                  ...bbox(optionsXYZOpaque.footprint)
-                )}
-                options={optionsXYZOpaque}
-              />
-            )
-          }
-        >
-          Opaque layer
-        </button>
-      </div>
-      {layer}
-    </>
-  );
-};
-
-export const OptimizedTileRequestingMap: Story<OptimizedTileRequestingMapStoryProps> = (
-  args
-) => {
-  return (
-    <div style={mapDivStyle}>
-      <CesiumMap
-        {...mapViewProps}
-        useOptimizedTileRequests={args.useOptimizedTileRequests}
-        key={args.useOptimizedTileRequests ? 'OPTIMIZED_MAP' : 'REGULAR_MAP'}
-      >
-        <LayersContainer />
-        <RelevancyPresentor
-          useOptimizedTileRequests={args.useOptimizedTileRequests}
-        />
-      </CesiumMap>
-    </div>
-  );
-};
-
-OptimizedTileRequestingMap.storyName = 'Optimized Tile Requesting';

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

@@ -1,40 +0,0 @@
-import React, { useState } from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumSceneMode } from '../map.types';
-import { CesiumOSMLayer } from './osm.layer';
-import { CesiumXYZLayer } from './xyz.layer';
-
-export default {
-  title: 'Cesium Map/Layers/OSMLayer',
-  component: CesiumOSMLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const optionsOSM = {
-  url: 'https://a.tile.openstreetmap.org/',
-};
-const optionsXYZ = {
-  url: `https://tiles.openaerialmap.org/5b25fa612b6a08001185f80f/0/5b25fa612b6a08001185f810/{z}/{x}/{y}.png`,
-};
-
-export const MapWithOSMLayers: Story = (args) => {
-  const [center] = useState<[number, number]>([34.82, 32.04]);
-  return (
-    <div style={mapDivStyle}>
-      <CesiumMap center={center} sceneMode={CesiumSceneMode.SCENE2D} zoom={14}>
-        <CesiumOSMLayer options={optionsOSM} />
-        <CesiumXYZLayer options={optionsXYZ} />
-      </CesiumMap>
-    </div>
-  );
-};
-MapWithOSMLayers.storyName = 'OSM layer and XYZ';

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

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { OpenStreetMapImageryProvider } from 'cesium';
-import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
-
-export interface RCesiumOSMLayerOptions
-  extends OpenStreetMapImageryProvider.ConstructorOptions {}
-
-export interface RCesiumOSMLayerProps
-  extends Partial<RCesiumImageryLayerProps> {
-  options: RCesiumOSMLayerOptions;
-}
-
-export const CesiumOSMLayer: React.FC<RCesiumOSMLayerProps> = (props) => {
-  const { options, ...restProps } = props;
-  return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new OpenStreetMapImageryProvider(options)}
-    />
-  );
-};

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

@@ -1,38 +0,0 @@
-import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { CesiumMap } from '../map';
-import { CesiumWMSLayer } from './wms.layer';
-
-export default {
-  title: 'Cesium Map/Layers/WMSLayer',
-  component: CesiumWMSLayer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} as Meta;
-
-const mapDivStyle = {
-  height: '100%',
-  width: '100%',
-  position: 'absolute' as const,
-};
-
-const optionsWMS = {
-  url: 'https://ahocevar.com/geoserver/wms',
-  layers: 'ne:NE1_HR_LC_SR_W_DR',
-};
-
-const optionsWMS2 = {
-  url: 'https://ahocevar.com/geoserver/wms',
-  layers: 'opengeo:countries',
-};
-
-export const MapWithWMSLayers: Story = () => (
-  <div style={mapDivStyle}>
-    <CesiumMap>
-      <CesiumWMSLayer options={optionsWMS} />
-      <CesiumWMSLayer options={optionsWMS2} alpha={0.3} />
-    </CesiumMap>
-  </div>
-);
-MapWithWMSLayers.storyName = 'WMS 2 layers';

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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { WebMapServiceImageryProvider } from 'cesium';
-import { CustomWebMapServiceImageryProvider } from '../helpers/customImageryProviders';
-import { useCesiumMap } from '../map';
-import { ICesiumImageryLayer } from '../layers-manager';
-import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
-
-export interface RCesiumWMSLayerOptions
-  extends WebMapServiceImageryProvider.ConstructorOptions {}
-
-export interface RCesiumWMSLayerProps
-  extends Partial<RCesiumImageryLayerProps> {
-  options: RCesiumWMSLayerOptions;
-}
-
-export const CesiumWMSLayer: React.FC<RCesiumWMSLayerProps> = (props) => {
-  const { options, ...restProps } = props;
-  const mapViewer = useCesiumMap();
-
-  const providerInstance = mapViewer.shouldOptimizedTileRequests
-    ? new CustomWebMapServiceImageryProvider(options, mapViewer)
-    : new WebMapServiceImageryProvider(options);
-
-  return (
-    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
-  );
-};