COG on Google Cloud Storage - error using OpenLayers without NodeJS

Question

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

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
– Mike, Commented 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
– Davide Battista, Commented 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
– Mike, Commented Apr 27, 2022 at 9:23

Daniele · Accepted Answer · 2022-04-27 08:40:37Z

-2

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">

answered Apr 27, 2022 at 8:40

Daniele

115 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

COG on Google Cloud Storage - error using OpenLayers without NodeJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related