ol-stac - npm Package Compare versions

Comparing version 1.0.0-beta.11 to 1.0.0-beta.12

layer/STAC.d.ts

@@ -53,6 +53,6 @@ export default STACLayer;
     /**
-     * Allow to display images that a browser can display (e.g. PNG, JPEG),
-     * usually assets with role `thumbnail` or the link with relation type `preview`.
+     * Allow to display preview images that a browser can display (e.g. PNG, JPEG),
+     * i.e. assets with any of the roles `thumbnail`, `overview`, or a link with relation type `preview`.
      * The previews are usually not covering the full extents and as such may be placed incorrectly on the map.
-     * For performance reasons, it is recommended to enable this option if you pass in STAC API Items.
+     * For performance reasons, it is recommended to enable this option if you pass in STAC API Items instead of `displayOverview`.
      */
@@ -62,3 +62,3 @@ displayPreview?: boolean | undefined;
      * Allow to display COGs and, if `displayGeoTiffByDefault` is enabled, GeoTiffs,
-     * usually the assets with role `overview` or `visual`.
+     * usually an asset with role `overview` or `visual`.
      */
@@ -182,8 +182,8 @@ displayOverview?: boolean | undefined;
  * which might not work well for larger files or larger amounts of files.
- * @property {boolean} [displayPreview=false] Allow to display images that a browser can display (e.g. PNG, JPEG),
- * usually assets with role `thumbnail` or the link with relation type `preview`.
+ * @property {boolean} [displayPreview=false] Allow to display preview images that a browser can display (e.g. PNG, JPEG),
+ * i.e. assets with any of the roles `thumbnail`, `overview`, or a link with relation type `preview`.
  * The previews are usually not covering the full extents and as such may be placed incorrectly on the map.
- * For performance reasons, it is recommended to enable this option if you pass in STAC API Items.
+ * For performance reasons, it is recommended to enable this option if you pass in STAC API Items instead of `displayOverview`.
  * @property {boolean} [displayOverview=true] Allow to display COGs and, if `displayGeoTiffByDefault` is enabled, GeoTiffs,
- * usually the assets with role `overview` or `visual`.
+ * usually an asset with role `overview` or `visual`.
  * @property {string|boolean|Array<Link|string>} [displayWebMapLink=false] Allow to display a layer
@@ -349,12 +349,6 @@ * based on the information provided through the web map links extension.
      * @private
-     * @param {Asset|Link} [ref] A STAC Link or Asset
-     * @return {Promise<Layer|undefined>} Resolves with a Layer or undefined when complete.
-     */
-    private addImagery_;
-    /**
-     * @private
-     * @param {Asset|Link} [thumbnail] A STAC Link or Asset
+     * @param {Asset|Link} [image] A STAC Link or Asset
      * @return {Promise<ImageLayer|undefined>} Resolves with am ImageLayer or udnefined when complete.
      */
-    private addThumbnail_;
+    private addPreviewImage_;
     /**
@@ -361,0 +355,0 @@ * Adds a layer for the web map links available in the STAC links.

layer/STAC.js

@@ -65,8 +65,8 @@ /**
  * which might not work well for larger files or larger amounts of files.
- * @property {boolean} [displayPreview=false] Allow to display images that a browser can display (e.g. PNG, JPEG),
- * usually assets with role `thumbnail` or the link with relation type `preview`.
+ * @property {boolean} [displayPreview=false] Allow to display preview images that a browser can display (e.g. PNG, JPEG),
+ * i.e. assets with any of the roles `thumbnail`, `overview`, or a link with relation type `preview`.
  * The previews are usually not covering the full extents and as such may be placed incorrectly on the map.
- * For performance reasons, it is recommended to enable this option if you pass in STAC API Items.
+ * For performance reasons, it is recommended to enable this option if you pass in STAC API Items instead of `displayOverview`.
  * @property {boolean} [displayOverview=true] Allow to display COGs and, if `displayGeoTiffByDefault` is enabled, GeoTiffs,
- * usually the assets with role `overview` or `visual`.
+ * usually an asset with role `overview` or `visual`.
  * @property {string|boolean|Array<Link|string>} [displayWebMapLink=false] Allow to display a layer
@@ -258,3 +258,3 @@ * based on the information provided through the web map links extension.
      */
-    configure_(data, url = null, children = [], assets = null, bands = []) {
+    configure_(data, url = null, children = null, assets = null, bands = []) {
         if (data instanceof Asset || data instanceof STAC) {
@@ -334,2 +334,3 @@ this.data_ = data;
         let assets = this.getAssets();
+        // No assets provided by the user, guess a sensible default visualization
         if (assets === null) {
@@ -339,16 +340,26 @@ assets = [];
             const geotiff = this.getData().getDefaultGeoTIFF(true, !this.displayGeoTiffByDefault_);
-            if (geotiff) {
-                assets.push(geotiff);
+            let layer;
+            // Try to visualize the default GeoTIFF first
+            if (geotiff && this.displayOverview_) {
+                layer = await this.addGeoTiff_(geotiff);
             }
-            else {
+            // If no GeoTIFF is available or it can't be shown (e.g. error),
+            // try to visualize the default thumbnail
+            if (this.displayPreview_ && (!geotiff || !layer)) {
                 // This may return Links or Assets
-                const thumbnails = this.getData()
-                    .getThumbnails()
-                    .filter((t) => !Array.isArray(t.roles) || !t.roles.includes('example'));
+                const thumbnails = this.getData().getThumbnails(true, 'overview');
                 if (thumbnails.length > 0) {
-                    assets.push(thumbnails[0]);
+                    await this.addPreviewImage_(thumbnails[0]);
                 }
             }
         }
-        const promises = assets.map((asset) => this.addImagery_(asset));
+        // Show the assets provided by the user
+        const promises = assets.map(async (ref) => {
+            if (ref && ref.isGeoTIFF()) {
+                return await this.addGeoTiff_(ref);
+            }
+            if (ref && ref.canBrowserDisplayImage()) {
+                return await this.addPreviewImage_(ref);
+            }
+        });
         return await Promise.all(promises);
@@ -358,23 +369,9 @@ }
      * @private
-     * @param {Asset|Link} [ref] A STAC Link or Asset
-     * @return {Promise<Layer|undefined>} Resolves with a Layer or undefined when complete.
-     */
-    async addImagery_(ref) {
-        if (!ref) {
-            return;
-        }
-        if (ref.isGeoTIFF()) {
-            return await this.addGeoTiff_(ref);
-        }
-        if (ref.canBrowserDisplayImage()) {
-            return await this.addThumbnail_(ref);
-        }
-    }
-    /**
-     * @private
-     * @param {Asset|Link} [thumbnail] A STAC Link or Asset
+     * @param {Asset|Link} [image] A STAC Link or Asset
      * @return {Promise<ImageLayer|undefined>} Resolves with am ImageLayer or udnefined when complete.
      */
-    async addThumbnail_(thumbnail) {
-        if (!this.displayPreview_) {
+    async addPreviewImage_(image) {
+        const projection = await getProjection(image, 'EPSG:4326');
+        const bbox = image.getContext().getBoundingBox();
+        if (!bbox) {
             return;
@@ -386,5 +383,5 @@ }
         let options = {
-            url: thumbnail.getAbsoluteUrl(),
-            projection: await getProjection(thumbnail, 'EPSG:4326'),
-            imageExtent: thumbnail.getContext().getBoundingBox(),
+            url: image.getAbsoluteUrl(),
+            projection,
+            imageExtent: transformExtent(bbox, 'EPSG:4326', projection),
             crossOrigin: this.crossOrigin_,
@@ -394,3 +391,3 @@ };
             // @ts-ignore
-            options = await this.getSourceOptions_(SourceType.ImageStatic, options, thumbnail);
+            options = await this.getSourceOptions_(SourceType.ImageStatic, options, image);
         }
@@ -400,3 +397,3 @@ const layer = new ImageLayer({
         });
-        this.addLayer_(layer, thumbnail);
+        this.addLayer_(layer, image);
         return layer;
@@ -538,5 +535,2 @@ }
     async addGeoTiff_(asset) {
-        if (!this.displayOverview_) {
-            return;
-        }
         if (this.buildTileUrlTemplate_ && !this.useTileLayerAsFallback_) {
@@ -560,25 +554,18 @@ return await this.addTileLayerForImagery_(asset);
         }
-        const tileserverFallback = async (asset, layer) => {
-            if (layer) {
-                this.getLayers().remove(layer);
-            }
-            return await this.addTileLayerForImagery_(asset);
-        };
+        const source = new GeoTIFF(options);
+        const status = new Promise((resolve, reject) => {
+            source.on('error', reject);
+            source.on('change', () => {
+                // see https://github.com/openlayers/openlayers/issues/14926
+                if (source.getState() === 'error') {
+                    reject(source.getError());
+                }
+                else {
+                    resolve();
+                }
+            });
+        });
         try {
-            const source = new GeoTIFF(options);
+            await status;
             const layer = new WebGLTileLayer({ source });
-            if (this.useTileLayerAsFallback_) {
-                const errorFn = () => tileserverFallback(asset, layer);
-                source.on('error', errorFn);
-                source.on('tileloaderror', errorFn);
-                // see https://github.com/openlayers/openlayers/issues/14926
-                source.on('change', () => {
-                    if (source.getState() === 'error') {
-                        errorFn();
-                    }
-                });
-                layer.on('error', errorFn);
-                // Call this to ensure we can load the GeoTIFF, otherwise try fallback
-                await source.getView();
-            }
             this.addLayer_(layer, asset);
@@ -589,3 +576,3 @@ return layer;
             if (this.useTileLayerAsFallback_) {
-                return await tileserverFallback(asset, null);
+                return await this.addTileLayerForImagery_(asset);
             }
@@ -592,0 +579,0 @@ this.handleError_(error);

package.json

 {
   "name": "ol-stac",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.12",
   "description": "An \"automagical\" STAC LayerGroup for OpenLayers",
@@ -22,3 +22,3 @@ "homepage": "https://mohr.ws",
     "ol-pmtiles": "^0.2.0",
-    "stac-js": "0.0.9"
+    "stac-js": "0.1.0"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

util.js

@@ -75,9 +75,9 @@ /**
     };
-    let band = null;
+    let source = asset;
     // If there's just one band, we can also read the information from there.
     if (asset.getBands().length === 1) {
-        band = 0;
+        source = asset.getBand(0);
     }
     // TODO: It would be useful if OL would allow min/max values per band
-    const { minimum, maximum } = asset.getMinMaxValues(band);
+    const { minimum, maximum } = source.getMinMaxValues();
     if (typeof minimum === 'number') {
@@ -90,3 +90,3 @@ sourceInfo.min = minimum;
     // TODO: It would be useful if OL would allow multiple no-data values
-    const nodata = asset.getNoDataValues(band);
+    const nodata = source.getNoDataValues();
     if (nodata.length > 0) {
@@ -110,6 +110,9 @@ sourceInfo.nodata = nodata[0];
         // TODO: It would be great to handle WKT2 and PROJJSON, but is not supported yet by proj4js.
-        const epsgCode = reference.getMetadata('proj:epsg');
-        if (epsgCode) {
+        const code = reference.getMetadata('proj:code');
+        if (code) {
             try {
-                projection = await fromEPSGCode(epsgCode);
+                if (code.startsWith('EPSG:')) {
+                    const id = parseInt(code.replace('EPSG:', ''), 10);
+                    projection = await fromEPSGCode(id);
+                }
             }
@@ -116,0 +119,0 @@ catch (_) {

No alert changes

Worsened metrics

Total package byte prevSize

107974

decreased by-0.36%

Lines of code

1798

decreased by-0.88%

Dependency changes

• + Added@radiantearth/stac-migrate@2.0.1(transitive)

• + Addedstac-js@0.1.0(transitive)

• - Removed@radiantearth/stac-migrate@1.6.0(transitive)

• - Removedstac-js@0.0.9(transitive)

• Updatedstac-js@0.1.0