Load GeoTiff from Blob #13189 #13703

examples/cog-blob.html

@@ -0,0 +1,10 @@
+---
+layout: example.html
+title: Cloud Optimized GeoTIFF (COG) from a Blob
+shortdesc: Rendering a COG as a tiled layer from a Blob.
+docs: >
+  Tiled data from a Cloud Optimized GeoTIFF (COG) can be rendered as a layer.  In this
+  example, a single 3-band GeoTIFF is used to render RGB data from a Blob.
+tags: "cog"
+---
+<div id="map" class="map"></div>

examples/cog-blob.js

@@ -0,0 +1,28 @@
+import GeoTIFF from '../src/ol/source/GeoTIFF.js';
+import Map from '../src/ol/Map.js';
+import TileLayer from '../src/ol/layer/WebGLTile.js';
+
+fetch('data/example.tif')
+  .then((response) => response.blob())
+  .then((blob) => {
+    const source = new GeoTIFF({
+      sources: [
+        {
+          blob: blob,
+        },
+      ],
+    });
+
+    const map = new Map({
+      target: 'map',
+      layers: [
+        new TileLayer({
+          source: source,
+        }),
+      ],
+      view: source.getView().then((viewConfig) => {
+        viewConfig.showFullExtent = true;
+        return viewConfig;
+      }),
+    });
+  });

examples/resources/common.js

@@ -9,7 +9,7 @@
 
   function fetchResource(resource) {
     return new Promise(function (resolve, reject) {
-      const isImage = /\.(png|jpe?g|gif|tiff|svg|kmz)$/.test(resource);
+      const isImage = /\.(png|jpe?g|gif|tiff?|svg|kmz)$/.test(resource);
       if (isImage) {
         resolve ({
           isBinary: true,