|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> |
| 6 | + <title>Cloud Optimized GeoTIFF (COG) with Custom Loader</title> |
| 7 | + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous"> |
| 8 | + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous"> |
| 9 | + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous"> |
| 10 | + <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous"> |
| 11 | + <link rel="stylesheet" type="text/css" href="./theme/ol.css"> |
| 12 | + <link rel="stylesheet" type="text/css" href="/theme/site.css"> |
| 13 | + <link rel="icon" type="image/svg+xml" href="/theme/img/logo-light.svg" media="(prefers-color-scheme: light)" /> |
| 14 | + <link rel="icon" type="image/svg+xml" href="/theme/img/logo-dark.svg" media="(prefers-color-scheme: dark)" /> |
| 15 | + </head> |
| 16 | + <body> |
| 17 | + <header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation"> |
| 18 | + <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70" alt=""> OpenLayers</a> |
| 19 | + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation"> |
| 20 | + <span class="navbar-toggler-icon"></span> |
| 21 | + </button> |
| 22 | + |
| 23 | + <!-- menu items that get hidden below 768px width --> |
| 24 | + <nav class="collapse navbar-collapse" id="olmenu"> |
| 25 | + <ul class="nav navbar-nav ms-auto"> |
| 26 | + <li class="nav-item dropdown"> |
| 27 | + <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a> |
| 28 | + <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown"> |
| 29 | + <a class="dropdown-item" href="/doc/">Docs</a> |
| 30 | + <div class="dropdown-divider"></div> |
| 31 | + <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a> |
| 32 | + <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a> |
| 33 | + <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a> |
| 34 | + <a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw me-2 fa-lg"></i>Workshop</a> |
| 35 | + <div class="dropdown-divider"></div> |
| 36 | + <a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fab fa-stack-overflow fa-fw me-2"></i>Ask a Question</a> |
| 37 | + </div> |
| 38 | + </li> |
| 39 | + <li class="nav-item"><a class="nav-link" href="../examples/">Examples</a></li> |
| 40 | + <li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li> |
| 41 | + <li class="nav-item dropdown"> |
| 42 | + <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a> |
| 43 | + <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown"> |
| 44 | + <a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a> |
| 45 | + <a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a> |
| 46 | + </div> |
| 47 | + </li> |
| 48 | + </ul> |
| 49 | + </nav> |
| 50 | + </header> |
| 51 | + |
| 52 | + <div class="container-fluid line-numbers"> |
| 53 | + <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none"> |
| 54 | + <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> |
| 55 | + This example uses OpenLayers v<span>10.8.1-dev</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>. |
| 56 | + </div> |
| 57 | + |
| 58 | + |
| 59 | + <div class="row-fluid"> |
| 60 | + <a href="#" id="codepen-button" class="btn btn-link float-end"> |
| 61 | + <i class="fab fa-codepen fa-lg"></i> Edit |
| 62 | + </a> |
| 63 | + <h4 id="title">Cloud Optimized GeoTIFF (COG) with Custom Loader</h4> |
| 64 | + <p class="tags"> |
| 65 | + <span class="badge-group"> |
| 66 | + <a |
| 67 | + href="./index.html?q=cog" class="badge badge-info">cog</a |
| 68 | + ><a |
| 69 | + class="badge badge-info tag-modal-toggle" |
| 70 | + data-bs-toggle="modal" |
| 71 | + data-bs-target="#tag-example-list" |
| 72 | + data-title="cog" |
| 73 | + data-content="<ul class="list-group"> |
| 74 | + <li><a class="list-group-item list-group-item-action" href="./cog-stretch.html">Band Contrast Stretch</a> |
| 75 | + <li><a class="list-group-item list-group-item-action" href="./cog-style.html">Change Tile Layer Style</a> |
| 76 | + <li><a class="list-group-item list-group-item-action" href="./cog.html">Cloud Optimized GeoTIFF (COG)</a> |
| 77 | + <li><a class="list-group-item list-group-item-action" href="./cog-blob.html">Cloud Optimized GeoTIFF (COG) from a Blob</a> |
| 78 | + <li><a class="list-group-item list-group-item-action active" href="./cog-custom-client.html">Cloud Optimized GeoTIFF (COG) with Custom Loader</a> |
| 79 | + <li><a class="list-group-item list-group-item-action" href="./cog-modeltransformation.html">COG with ModelTransformation</a> |
| 80 | + <li><a class="list-group-item list-group-item-action" href="./cog-projection.html">COG with Projection Lookup</a> |
| 81 | + <li><a class="list-group-item list-group-item-action" href="./geotiff-reprojection.html">GeoTIFF Reprojection</a> |
| 82 | + <li><a class="list-group-item list-group-item-action" href="./cog-pyramid.html">GeoTIFF tile pyramid</a> |
| 83 | + <li><a class="list-group-item list-group-item-action" href="./cog-overviews.html">GeoTIFF with Overviews</a> |
| 84 | + <li><a class="list-group-item list-group-item-action" href="./multiple-cogs.html">Multiple COG sources</a> |
| 85 | + <li><a class="list-group-item list-group-item-action" href="./cog-math.html">NDVI from a Sentinel 2 COG</a> |
| 86 | + <li><a class="list-group-item list-group-item-action" href="./cog-colors.html">NDVI with a Dynamic Color Ramp</a> |
| 87 | + <li><a class="list-group-item list-group-item-action" href="./cog-math-multisource.html">NDVI+NDWI from two 16-bit COGs</a> |
| 88 | + <li><a class="list-group-item list-group-item-action" href="./stac-item.html">STAC support</a> |
| 89 | + </ul>" |
| 90 | + tabindex="0" |
| 91 | + >15</a> |
| 92 | + </span> |
| 93 | + </p> |
| 94 | + <div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true"> |
| 95 | + <div class="modal-dialog modal-dialog-scrollable" role="document"> |
| 96 | + <div class="modal-content"> |
| 97 | + <div class="modal-header"> |
| 98 | + <h5 class="modal-title" id="tag-example-title"></h5> |
| 99 | + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> |
| 100 | + </div> |
| 101 | + <div class="modal-body"> |
| 102 | + <div class="list-group"></div> |
| 103 | + </div> |
| 104 | + </div> |
| 105 | + </div> |
| 106 | + </div> |
| 107 | + <div id="map" class="map"></div> |
| 108 | + |
| 109 | + <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define"> |
| 110 | + <input id="codesandbox-params" type="hidden" name="parameters"> |
| 111 | + </form> |
| 112 | + </div> |
| 113 | + |
| 114 | + <div class="row-fluid"> |
| 115 | + <p id="shortdesc">Rendering a COG with a custom loader function.</p> |
| 116 | + <div id="docs"><p>Tiled data from a Cloud Optimized GeoTIFF (COG) can be rendered as a layer. In this example, a custom loader function is provided to handle requests with custom headers or authentication logic. The loader receives the URL, headers, and an abort signal, and must return a Response object.</p> |
| 117 | +</div> |
| 118 | + </div> |
| 119 | + |
| 120 | + <div class="row-fluid"> |
| 121 | + <h5 class="source-heading">main.js</h5> |
| 122 | + <pre><code id="example-js-source" class="language-js">import Map from 'ol/Map.js'; |
| 123 | +import {getView, withExtentCenter, withHigherResolutions} from 'ol/View.js'; |
| 124 | +import TileLayer from 'ol/layer/WebGLTile.js'; |
| 125 | +import GeoTIFF from 'ol/source/GeoTIFF.js'; |
| 126 | + |
| 127 | +const dataUrl = |
| 128 | + 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/36/Q/WD/2020/7/S2A_36QWD_20200701_0_L2A/TCI.tif'; |
| 129 | + |
| 130 | +const source = new GeoTIFF({ |
| 131 | + sources: [ |
| 132 | + { |
| 133 | + url: dataUrl, |
| 134 | + // Use a custom loader function to control how the data is fetched. |
| 135 | + // The function receives the URL, request headers, and an abort signal. |
| 136 | + loader: (url, headers, abortSignal) => { |
| 137 | + // Add custom headers (e.g., authentication tokens) |
| 138 | + const customHeaders = { |
| 139 | + ...headers, |
| 140 | + // Example: 'Authorization': 'Bearer your-token-here', |
| 141 | + }; |
| 142 | + |
| 143 | + // Optionally add custom logic (logging, retry logic, caching, etc.) |
| 144 | + |
| 145 | + return fetch(url, { |
| 146 | + headers: customHeaders, |
| 147 | + signal: abortSignal, |
| 148 | + }); |
| 149 | + }, |
| 150 | + }, |
| 151 | + ], |
| 152 | +}); |
| 153 | + |
| 154 | +const map = new Map({ |
| 155 | + target: 'map', |
| 156 | + layers: [ |
| 157 | + new TileLayer({ |
| 158 | + source: source, |
| 159 | + }), |
| 160 | + ], |
| 161 | + view: getView(source, withHigherResolutions(1), withExtentCenter()), |
| 162 | +}); |
| 163 | +</code></pre> |
| 164 | + </div> |
| 165 | + |
| 166 | + <div class="row-fluid"> |
| 167 | + <h5 class="source-heading">index.html</h5> |
| 168 | + <pre><code id="example-html-source" class="language-markup"><!DOCTYPE html> |
| 169 | +<html lang="en"> |
| 170 | + <head> |
| 171 | + <meta charset="UTF-8"> |
| 172 | + <title>Cloud Optimized GeoTIFF (COG) with Custom Loader</title> |
| 173 | + <link rel="stylesheet" href="node_modules/ol/ol.css"> |
| 174 | + <style> |
| 175 | + .map { |
| 176 | + width: 100%; |
| 177 | + height: 400px; |
| 178 | + } |
| 179 | + </style> |
| 180 | + </head> |
| 181 | + <body> |
| 182 | + <div id="map" class="map"></div> |
| 183 | + |
| 184 | + <script type="module" src="main.js"></script> |
| 185 | + </body> |
| 186 | +</html></code></pre> |
| 187 | + </div> |
| 188 | + |
| 189 | + <div class="row-fluid"> |
| 190 | + <h5 class="source-heading">package.json</h5> |
| 191 | + <pre><code id="example-pkg-source" class="language-json">{ |
| 192 | + "name": "cog-custom-client", |
| 193 | + "dependencies": { |
| 194 | + "ol": "10.8.1-dev" |
| 195 | + }, |
| 196 | + "devDependencies": { |
| 197 | + "vite": "^3.2.3" |
| 198 | + }, |
| 199 | + "scripts": { |
| 200 | + "start": "vite", |
| 201 | + "build": "vite build" |
| 202 | + } |
| 203 | +}</code></pre> |
| 204 | + </div> |
| 205 | + </div> |
| 206 | + |
| 207 | + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script> |
| 208 | + <script src="common.js"></script> |
| 209 | + <script src="cog-custom-client.js"></script> |
| 210 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script> |
| 211 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script> |
| 212 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script> |
| 213 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script> |
| 214 | + <script src="./resources/common.js"></script> |
| 215 | + <script> |
| 216 | + document.getElementById('tag-example-list') |
| 217 | + .addEventListener('show.bs.modal', function (event) { |
| 218 | + const button = event.relatedTarget; // Button that triggered the modal |
| 219 | + this.querySelector('.modal-title').innerText = button.dataset.title; |
| 220 | + this.querySelector('.modal-body').innerHTML = button.dataset.content; |
| 221 | + }); |
| 222 | + </script> |
| 223 | + <script> |
| 224 | + const releaseUrl = 'https://cdn.jsdelivr.net/npm/ol/package.json'; |
| 225 | + fetch(releaseUrl).then(function(response) { |
| 226 | + return response.json(); |
| 227 | + }).then(function(json) { |
| 228 | + const latestVersion = json.version; |
| 229 | + document.getElementById('latest-version').innerHTML = latestVersion; |
| 230 | + const url = window.location.href; |
| 231 | + const branchSearch = url.match(/\/([^\/]*)\/examples\//); |
| 232 | + const storageKey = 'ol-dismissed=-' + latestVersion; |
| 233 | + const dismissed = localStorage.getItem(storageKey) === 'true'; |
| 234 | + if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '10.8.1-dev' != latestVersion) { |
| 235 | + const link = url.replace(branchSearch[0], '/latest/examples/'); |
| 236 | + fetch(link, {method: 'head'}).then(function(response) { |
| 237 | + const a = document.getElementById('latest-link'); |
| 238 | + a.href = response.status == 200 ? link : '../../latest/examples/'; |
| 239 | + }); |
| 240 | + const latestCheck = document.getElementById('latest-check'); |
| 241 | + latestCheck.style.display = ''; |
| 242 | + document.getElementById('latest-dismiss').onclick = function() { |
| 243 | + latestCheck.style.display = 'none'; |
| 244 | + localStorage.setItem(storageKey, 'true'); |
| 245 | + } |
| 246 | + } |
| 247 | + }); |
| 248 | + </script> |
| 249 | + </body> |
| 250 | +</html> |
0 commit comments