COG on Google Cloud Storage - error using OpenLayers without NodeJS

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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. 
Below the content of the HTML file I stored on GCS (layer styling omitted),
<!DOCTYPE html>
    <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>
    <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
                The v6.14 build fails with any GeoTIFF regardless of whether the ol.js is hosted on jsdelivr or locally.  v6.12 is the most recent version to work, and with security disabled will open your google hosted COG.
– Mike
                Apr 26, 2022 at 19:56
                Thanks a lot for the quick response. I've just tested the 6.12 release and it works like a charm. It was a first test, now I can implement the actual solution. Thanks! - Davide
– Davide Battista
                Apr 27, 2022 at 9:12
                I raised an issue github.com/openlayers/openlayers/issues/13606 and the problem is due to files missing from the release
– Mike
                Apr 27, 2022 at 9:23
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">
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.