@map-colonies/react-components 3.13.1 → 3.14.0

package/dist/cesium-map/layers-manager.js

@@ -19,8 +19,11 @@ var cesium_1 = require("cesium");
 var lodash_1 = require("lodash");
 var boolean_point_in_polygon_1 = __importDefault(require("@turf/boolean-point-in-polygon"));
 var point_geojson_1 = require("./tools/geojson/point.geojson");
+var customImageryProviders_1 = require("./helpers/customImageryProviders");
+var utils_1 = require("./helpers/utils");
 var INC = 1;
 var DEC = -1;
+var TRANSPARENT_LAYER_ID = 'TRANSPARENT_BASE_LAYER';
 var LayerManager = /** @class */ (function () {
     function LayerManager(mapViewer, legendsExtractor, onLayersUpdate) {
         var _this = this;
@@ -33,18 +36,44 @@ var LayerManager = /** @class */ (function () {
         if (onLayersUpdate) {
             this.layerUpdated.addEventListener(onLayersUpdate, this);
         }
-        this.mapViewer.imageryLayers.layerRemoved.addEventListener(function () {
-            _this.setLegends();
-            _this.layerUpdated.raiseEvent();
-        });
+        // Binding layer's relevancy check to cesium lifecycle if optimized tile requests enabled.
+        if (this.mapViewer.shouldOptimizedTileRequests) {
+            this.layerUpdated.addEventListener(function (meta) {
+                var newMetaKeys = Object.keys(meta);
+                var shouldTriggerRelevancyCheck = newMetaKeys.length === 1 &&
+                    newMetaKeys[0] === customImageryProviders_1.HAS_TRANSPARENCY_META_PROP;
+                if (shouldTriggerRelevancyCheck) {
+                    _this.markRelevantLayersForExtent();
+                    _this.hideNonRelevantLayers();
+                }
+            });
+            this.mapViewer.imageryLayers.layerRemoved.addEventListener(function () {
+                _this.setLegends();
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+            this.mapViewer.imageryLayers.layerMoved.addEventListener(function () {
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+            this.mapViewer.imageryLayers.layerAdded.addEventListener(function () {
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+            this.mapViewer.camera.moveEnd.addEventListener(function () {
+                _this.markRelevantLayersForExtent();
+                _this.hideNonRelevantLayers();
+            });
+        }
     }
     /* eslint-disable */
     LayerManager.prototype.addMetaToLayer = function (meta, layerPredicate) {
+        var _a;
         var layer = this.layers.find(layerPredicate);
         if (layer) {
-            layer.meta = meta;
+            layer.meta = __assign(__assign({}, ((_a = layer.meta) !== null && _a !== void 0 ? _a : {})), meta);
             this.setLegends();
-            this.layerUpdated.raiseEvent();
+            this.layerUpdated.raiseEvent(meta);
         }
     };
     /* eslint-enable */
@@ -54,19 +83,50 @@ var LayerManager = /** @class */ (function () {
         sortedBaseMapLayers.forEach(function (layer, idx) {
             _this.addRasterLayer(layer, idx, baseMap.id);
         });
+        /**
+         *  Set transparent layer as the first layer. if using optimized tile requests.
+         *
+         *  Apparently, cesium layer's rectangle is not affective when:
+         *  - There is only one active layer && The layer's rectangle contains the extent rectangle.
+         *
+         *  As a result, when using optimized tile requesting and we zoom in a discrete layer,
+         *  there are some visual artifacts due to tiles requesting outside of the layer's rectangle boundary.
+         *
+         *  A simple workaround would be adding a transparent layer as the very first layer at all times,
+         *  so that we ensure the rectangle will always be affective.
+         */
+        if (this.mapViewer.shouldOptimizedTileRequests) {
+            this.removeLayer(TRANSPARENT_LAYER_ID);
+            this.addTransparentImageryProvider();
+        }
     };
     LayerManager.prototype.addRasterLayer = function (layer, index, parentId) {
         var cesiumLayer;
         switch (layer.type) {
-            case 'XYZ_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.UrlTemplateImageryProvider(layer.options), index);
+            case 'XYZ_LAYER': {
+                var options = layer.options;
+                var providerInstance = this.mapViewer.shouldOptimizedTileRequests
+                    ? new customImageryProviders_1.CustomUrlTemplateImageryProvider(options, this.mapViewer)
+                    : new cesium_1.UrlTemplateImageryProvider(options);
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(providerInstance, index);
                 break;
-            case 'WMS_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapServiceImageryProvider(layer.options), index);
+            }
+            case 'WMS_LAYER': {
+                var options = layer.options;
+                var providerInstance = this.mapViewer.shouldOptimizedTileRequests
+                    ? new customImageryProviders_1.CustomWebMapServiceImageryProvider(options, this.mapViewer)
+                    : new cesium_1.WebMapServiceImageryProvider(options);
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(providerInstance, index);
                 break;
-            case 'WMTS_LAYER':
-                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.WebMapTileServiceImageryProvider(layer.options), index);
+            }
+            case 'WMTS_LAYER': {
+                var options = layer.options;
+                var providerInstance = this.mapViewer.shouldOptimizedTileRequests
+                    ? new customImageryProviders_1.CustomWebMapTileServiceImageryProvider(options, this.mapViewer)
+                    : new cesium_1.WebMapTileServiceImageryProvider(options);
+                cesiumLayer = this.mapViewer.imageryLayers.addImageryProvider(providerInstance, index);
                 break;
+            }
             case 'OSM_LAYER':
                 break;
         }
@@ -205,6 +265,19 @@ var LayerManager = /** @class */ (function () {
             return ((_a = layer2.meta) === null || _a === void 0 ? void 0 : _a.zIndex) - ((_b = layer1.meta) === null || _b === void 0 ? void 0 : _b.zIndex);
         });
     };
+    LayerManager.prototype.addTransparentImageryProvider = function () {
+        // Worldwide transparent layer
+        var transparentLayer = this.mapViewer.imageryLayers.addImageryProvider(new cesium_1.SingleTileImageryProvider({
+            url: './assets/img/transparent-tile.png',
+            /* eslint-disable @typescript-eslint/no-magic-numbers */
+            rectangle: new cesium_1.Rectangle(-3.141592653589793, -1.5707963267948966, 3.141592653589793, 1.5707963267948966),
+            /* eslint-enable @typescript-eslint/no-magic-numbers */
+        }), 0);
+        transparentLayer.meta = {
+            id: TRANSPARENT_LAYER_ID,
+            skipRelevancyCheck: true,
+        };
+    };
     LayerManager.prototype.setLegends = function () {
         if (typeof this.legendsExtractor !== 'undefined') {
             this.legendsList = this.legendsExtractor(this.layers);
@@ -241,6 +314,90 @@ var LayerManager = /** @class */ (function () {
             }
         });
     };
+    LayerManager.prototype.hideNonRelevantLayers = function () {
+        var _a, _b, _c;
+        for (var _i = 0, _d = this.layers; _i < _d.length; _i++) {
+            var layer = _d[_i];
+            if (((_a = layer.meta) === null || _a === void 0 ? void 0 : _a.relevantToExtent) !== layer.show &&
+                layer.imageryProvider.ready) {
+                //@ts-ignore
+                layer.show = (_c = (_b = layer.meta) === null || _b === void 0 ? void 0 : _b.relevantToExtent) !== null && _c !== void 0 ? _c : true;
+            }
+        }
+    };
+    LayerManager.prototype.markRelevantLayersForExtent = function () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        try {
+            var extent = this.mapViewer.camera.computeViewRectangle();
+            // Iterating in reverse order so that top layer is first.
+            for (var i = this.layers.length - 1; i >= 0; i--) {
+                var layer = this.layers[i];
+                var intersectsExtent = !lodash_1.isEmpty(extent) &&
+                    !lodash_1.isEmpty(layer.rectangle) &&
+                    cesium_1.Rectangle.intersection(extent, layer.rectangle);
+                // Iterating from top layer until the current. (inclusive)
+                for (var j = this.layers.length - 1; j >= i; j--) {
+                    if (((_a = layer.meta) === null || _a === void 0 ? void 0 : _a.skipRelevancyCheck) === true) {
+                        layer.meta = __assign(__assign({}, layer.meta), { relevantToExtent: true });
+                        continue;
+                    }
+                    var layerAbove = this.layers[j];
+                    var layerAboveHasTransparency = ((_b = layerAbove.meta) === null || _b === void 0 ? void 0 : _b[customImageryProviders_1.HAS_TRANSPARENCY_META_PROP]) === true;
+                    if (layer !== layerAbove) {
+                        // Layer is relevant if in extent and there is no layer above it which is opaque and contains it.
+                        if (intersectsExtent instanceof cesium_1.Rectangle) {
+                            if (utils_1.cesiumRectangleContained(extent, layer.rectangle)) {
+                                // Layer contains the extent.
+                                if (utils_1.cesiumRectangleContained(extent, layerAbove.rectangle) &&
+                                    !layerAboveHasTransparency) {
+                                    layer.meta = __assign(__assign({}, ((_c = layer.meta) !== null && _c !== void 0 ? _c : {})), { relevantToExtent: false });
+                                    break;
+                                }
+                                else {
+                                    layer.meta = __assign(__assign({}, ((_d = layer.meta) !== null && _d !== void 0 ? _d : {})), { relevantToExtent: true });
+                                }
+                            }
+                            if (utils_1.cesiumRectangleContained(extent, layerAbove.rectangle) &&
+                                !layerAboveHasTransparency) {
+                                layer.meta = __assign(__assign({}, ((_e = layer.meta) !== null && _e !== void 0 ? _e : {})), { relevantToExtent: false });
+                                break;
+                            }
+                            if (utils_1.cesiumRectangleContained(layer.rectangle, layerAbove.rectangle)) {
+                                layer.meta = __assign(__assign({}, ((_f = layer.meta) !== null && _f !== void 0 ? _f : {})), { relevantToExtent: layerAboveHasTransparency });
+                                // Once there is layer above that hides it, no need to continue to check.
+                                if (!layerAboveHasTransparency) {
+                                    break;
+                                }
+                            }
+                            else {
+                                // Not contained by layer above it, and inside the extent.
+                                layer.meta = __assign(__assign({}, ((_g = layer.meta) !== null && _g !== void 0 ? _g : {})), { relevantToExtent: true });
+                            }
+                        }
+                        else {
+                            layer.meta = __assign(__assign({}, ((_h = layer.meta) !== null && _h !== void 0 ? _h : {})), { relevantToExtent: false });
+                        }
+                    }
+                    else {
+                        // Handle top layer
+                        if (i === this.layers.length - 1) {
+                            layer.meta = __assign(__assign({}, ((_j = layer.meta) !== null && _j !== void 0 ? _j : {})), { relevantToExtent: intersectsExtent instanceof cesium_1.Rectangle });
+                        }
+                    }
+                }
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    };
+    Object.defineProperty(LayerManager.prototype, "layerList", {
+        get: function () {
+            return this.layers;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return LayerManager;
 }());
 exports.default = LayerManager;

package/dist/cesium-map/map.d.ts

@@ -9,7 +9,10 @@ import { CesiumSceneModeEnum } from './map.types';
 import './map.css';
 export declare class CesiumViewer extends CesiumViewerCls {
     layersManager?: LayerManager;
+    private useOptimizedTileRequests?;
     constructor(container: string | Element, options?: CesiumViewerCls.ConstructorOptions);
+    get shouldOptimizedTileRequests(): boolean;
+    set shouldOptimizedTileRequests(useOptimizedTileRequests: boolean);
 }
 export interface IContextMenuData {
     data: Record<string, unknown>[];
@@ -49,6 +52,7 @@ export interface CesiumMapProps extends ViewerProps {
     };
     sceneModes?: CesiumSceneModeEnum[];
     baseMaps?: IBaseMaps;
+    useOptimizedTileRequests?: boolean;
     terrainProvider?: TerrainProvider;
     imageryContextMenu?: React.ReactElement<IContextMenuData>;
     imageryContextMenuSize?: {

package/dist/cesium-map/map.js

@@ -73,6 +73,17 @@ var CesiumViewer = /** @class */ (function (_super) {
     function CesiumViewer(container, options) {
         return _super.call(this, container, options) || this;
     }
+    Object.defineProperty(CesiumViewer.prototype, "shouldOptimizedTileRequests", {
+        get: function () {
+            var _a;
+            return (_a = this.useOptimizedTileRequests) !== null && _a !== void 0 ? _a : false;
+        },
+        set: function (useOptimizedTileRequests) {
+            this.useOptimizedTileRequests = useOptimizedTileRequests;
+        },
+        enumerable: false,
+        configurable: true
+    });
     return CesiumViewer;
 }(cesium_1.Viewer));
 exports.CesiumViewer = CesiumViewer;
@@ -134,14 +145,24 @@ var CesiumMap = function (props) {
         setMapViewRef((_a = ref.current) === null || _a === void 0 ? void 0 : _a.cesiumElement);
     }, [ref, props.imageryContextMenu]);
     react_1.useEffect(function () {
-        var _a;
+        var _a, _b;
         if (mapViewRef) {
-            mapViewRef.layersManager = new layers_manager_1.default(mapViewRef, (_a = props.legends) === null || _a === void 0 ? void 0 : _a.mapLegendsExtractor, function () {
+            mapViewRef.shouldOptimizedTileRequests =
+                (_a = props.useOptimizedTileRequests) !== null && _a !== void 0 ? _a : false;
+            mapViewRef.layersManager = new layers_manager_1.default(mapViewRef, (_b = props.legends) === null || _b === void 0 ? void 0 : _b.mapLegendsExtractor, function () {
                 var _a;
                 setLegendsList((_a = mapViewRef === null || mapViewRef === void 0 ? void 0 : mapViewRef.layersManager) === null || _a === void 0 ? void 0 : _a.legendsList);
             });
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mapViewRef]);
+    react_1.useEffect(function () {
+        var _a;
+        if (mapViewRef) {
+            mapViewRef.shouldOptimizedTileRequests =
+                (_a = props.useOptimizedTileRequests) !== null && _a !== void 0 ? _a : false;
+        }
+    }, [props.useOptimizedTileRequests, mapViewRef]);
     react_1.useEffect(function () {
         var _a;
         setSceneModes((_a = props.sceneModes) !== null && _a !== void 0 ? _a : [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@map-colonies/react-components",
-  "version": "3.13.1",
+  "version": "3.14.0",
   "module": "dist/index.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -93,7 +93,7 @@
     "jest-enzyme": "^7.1.2",
     "react-test-renderer": "^16.13.1"
   },
-  "gitHead": "2b22c0f4e5e2b632bd656ec88b29a4d02d339af0",
+  "gitHead": "71cc65e8ccd3f45ab1b0eb9de2bd3aab10735654",
   "jest": {
     "coverageReporters": [
       "text",

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;
+};