'COG on Google Cloud Storage - error using OpenLayers without NodeJS

I'm playing with OpenLayers to display COG files uploaded on GCS.

Using the NodeJS, an index.html and a main.js files, then building with Parcel (or others), everything works fine.

When I tried to skip using NodeJS, coding an HTML files with the CDN imports, and the inline JavaScript, it looks like OpenLayers is not able to retrieve all the needed dependencies. In particular in the network request/response, I have:

Request URL: https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/231.ol.js
Request Method: GET
Status Code: 403 
Remote Address: 151.101.241.229:443
Referrer Policy: strict-origin-when-cross-origin

and if I try to hit directly the URL in the Browser:

https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/231.ol.js

I got:

Package size exceeded the configured limit of 50 MB. Try https://github.com/openlayers/openlayers.github.io/tree/master/en/v6.14.1/build/231.ol.js instead.

Why?

Below the content of the HTML file I stored on GCS (layer styling omitted),

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>COG on Google Cloud Storage</title>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.0/build/ol.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.0/css/ol.css">
    <style>
      html, body {
        margin: 0;
        height: 100%;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script type="text/javascript">
      var cogSource = new ol.source.GeoTIFF (
        {
          normalize: true,
          sources: [
            {
              url: 'https://storage.googleapis.com/fao-gismgr-cache/TEST/L1_AETI_21.tif',
              min: -9999,
              max: 16000
            }
          ],
          transition: 0
        }
      );

      var cogLayer = new ol.layer.WebGLTile (
        {
          source: cogSource
        }
      );

      var cogView = new ol.View (
        {
          projection: 'EPSG:4326',
          minZoom: 0,
          maxZoom: 12,
          center: [0,0],
          zoom: 4
        }
      );

      var map = new ol.Map({
        target: 'map',
        maxTilesLoading: 32,
        layers: [cogLayer],
        view: cogView
      });
    </script>
  </body>
</html>

The COG and HTML file are on a public GCS bucket.

To test, I use Chrome with web-security disabled (CORS policies)

open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

Could you help me?

Thanks in advance,

Davide

Solution 1:^[1]

Thanks @Mike, I was having the same problem and tried your solution both with local and remote files and it worked without any problem.

    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.12.0/css/ol.css">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Daniele

'COG on Google Cloud Storage - error using OpenLayers without NodeJS

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]