@map-colonies/react-components 3.13.1 → 3.15.0

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

@@ -0,0 +1,173 @@
+import {
+  Request,
+  ImageryProvider,
+  UrlTemplateImageryProvider,
+  WebMapServiceImageryProvider,
+  WebMapTileServiceImageryProvider,
+  ImageryLayer,
+} from 'cesium';
+import { get, isEmpty } from 'lodash';
+import { ICesiumImageryLayer } from '../layers-manager';
+import { CesiumViewer } from '../map';
+import { imageHasTransparency } from './utils';
+
+export interface CustomImageryProvider extends ImageryProvider {
+  readonly layerListInstance: ICesiumImageryLayer[];
+  tileTransparencyCheckedCounter: number;
+  mapViewer: CesiumViewer;
+  readonly maxTilesForTransparencyCheck: number;
+}
+
+const NUMBER_OF_TILES_TO_CHECK = 3;
+export const HAS_TRANSPARENCY_META_PROP = 'hasTransparency';
+
+function customCommonRequestImage(
+  this: CustomImageryProvider,
+  requestImageFn: ImageryProvider['requestImage'],
+  x: number,
+  y: number,
+  level: number,
+  request?: Request | undefined
+): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+  // custom Logic
+  setTimeout(() => {
+    const requestedLayerMeta = this.layerListInstance.find(
+      /* eslint-disable */
+      (layer: ImageryLayer): boolean => {
+        return (
+          (layer as any)._imageryProvider._resource._url ===
+          (this as any)._resource._url
+        );
+      }
+      /* eslint-enable */
+    )?.meta;
+
+    const layerHasTransparency =
+      get(requestedLayerMeta, HAS_TRANSPARENCY_META_PROP) === true;
+
+    if (
+      this.tileTransparencyCheckedCounter < NUMBER_OF_TILES_TO_CHECK &&
+      !layerHasTransparency
+    ) {
+      void imageHasTransparency(request?.url as string, this).then(
+        (hasTransparency) => {
+          this.mapViewer.layersManager?.addMetaToLayer(
+            { [HAS_TRANSPARENCY_META_PROP]: hasTransparency },
+            /* eslint-disable */
+            (layer: ImageryLayer): boolean => {
+              return (
+                (layer as any)._imageryProvider._resource._url ===
+                (this as any)._resource._url
+              );
+            }
+            /* eslint-enable */
+          );
+        }
+      );
+    }
+  }, 0);
+
+  return requestImageFn(x, y, level, request);
+}
+
+export class CustomUrlTemplateImageryProvider extends UrlTemplateImageryProvider {
+  public readonly layerListInstance: ICesiumImageryLayer[];
+  public readonly mapViewer: CesiumViewer;
+  public readonly maxTilesForTransparencyCheck = NUMBER_OF_TILES_TO_CHECK;
+
+  public tileTransparencyCheckedCounter = 0;
+
+  public constructor(
+    opts: UrlTemplateImageryProvider.ConstructorOptions,
+    mapViewer: CesiumViewer
+  ) {
+    super(opts);
+    this.layerListInstance = mapViewer.layersManager
+      ?.layerList as ICesiumImageryLayer[];
+    this.mapViewer = mapViewer;
+  }
+
+  public requestImage(
+    x: number,
+    y: number,
+    level: number,
+    request?: Request | undefined
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+    return customCommonRequestImage.call(
+      this,
+      super.requestImage.bind(this),
+      x,
+      y,
+      level,
+      request
+    );
+  }
+}
+
+export class CustomWebMapServiceImageryProvider extends WebMapServiceImageryProvider {
+  public readonly layerListInstance: ICesiumImageryLayer[];
+  public readonly mapViewer: CesiumViewer;
+  public readonly maxTilesForTransparencyCheck = NUMBER_OF_TILES_TO_CHECK;
+
+  public tileTransparencyCheckedCounter = 0;
+
+  public constructor(
+    opts: WebMapServiceImageryProvider.ConstructorOptions,
+    mapViewer: CesiumViewer
+  ) {
+    super(opts);
+    this.layerListInstance = mapViewer.layersManager
+      ?.layerList as ICesiumImageryLayer[];
+    this.mapViewer = mapViewer;
+  }
+
+  public requestImage(
+    x: number,
+    y: number,
+    level: number,
+    request?: Request | undefined
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+    return customCommonRequestImage.call(
+      this,
+      super.requestImage.bind(this),
+      x,
+      y,
+      level,
+      request
+    );
+  }
+}
+
+export class CustomWebMapTileServiceImageryProvider extends WebMapTileServiceImageryProvider {
+  public readonly layerListInstance: ICesiumImageryLayer[];
+  public readonly mapViewer: CesiumViewer;
+  public readonly maxTilesForTransparencyCheck = NUMBER_OF_TILES_TO_CHECK;
+
+  public tileTransparencyCheckedCounter = 0;
+
+  public constructor(
+    opts: WebMapTileServiceImageryProvider.ConstructorOptions,
+    mapViewer: CesiumViewer
+  ) {
+    super(opts);
+    this.layerListInstance = mapViewer.layersManager
+      ?.layerList as ICesiumImageryLayer[];
+    this.mapViewer = mapViewer;
+  }
+
+  public requestImage(
+    x: number,
+    y: number,
+    level: number,
+    request?: Request | undefined
+  ): Promise<HTMLImageElement | HTMLCanvasElement> | undefined {
+    return customCommonRequestImage.call(
+      this,
+      super.requestImage.bind(this),
+      x,
+      y,
+      level,
+      request
+    );
+  }
+}

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

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

@@ -0,0 +1,279 @@
+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/wms.layer.tsx

@@ -1,6 +1,9 @@
 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
@@ -13,10 +16,13 @@ export interface RCesiumWMSLayerProps
 
 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={new WebMapServiceImageryProvider(options)}
-    />
+    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
   );
 };

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

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { WebMapTileServiceImageryProvider } from 'cesium';
+import { CustomWebMapTileServiceImageryProvider } from '../helpers/customImageryProviders';
+import { useCesiumMap } from '../map';
 import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
 
 export interface RCesiumWMTSLayerOptions
@@ -13,10 +15,13 @@ export interface RCesiumWMTSLayerProps
 
 export const CesiumWMTSLayer: React.FC<RCesiumWMTSLayerProps> = (props) => {
   const { options, ...restProps } = props;
+  const mapViewer = useCesiumMap();
+
+  const providerInstance = mapViewer.shouldOptimizedTileRequests
+    ? new CustomWebMapTileServiceImageryProvider(options, mapViewer)
+    : new WebMapTileServiceImageryProvider(options);
+
   return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new WebMapTileServiceImageryProvider(options)}
-    />
+    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
   );
 };

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

@@ -1,6 +1,8 @@
 import React from 'react';
 
 import { UrlTemplateImageryProvider } from 'cesium';
+import { CustomUrlTemplateImageryProvider } from '../helpers/customImageryProviders';
+import { useCesiumMap } from '../map';
 import { CesiumImageryLayer, RCesiumImageryLayerProps } from './imagery.layer';
 
 export interface RCesiumXYZLayerOptions
@@ -13,10 +15,13 @@ export interface RCesiumXYZLayerProps
 
 export const CesiumXYZLayer: React.FC<RCesiumXYZLayerProps> = (props) => {
   const { options, ...restProps } = props;
+  const mapViewer = useCesiumMap();
+
+  const providerInstance = mapViewer.shouldOptimizedTileRequests
+    ? new CustomUrlTemplateImageryProvider(options, mapViewer)
+    : new UrlTemplateImageryProvider(options);
+
   return (
-    <CesiumImageryLayer
-      {...restProps}
-      imageryProvider={new UrlTemplateImageryProvider(options)}
-    />
+    <CesiumImageryLayer {...restProps} imageryProvider={providerInstance} />
   );
 };