ol-stac 0.0.0

package/examples/stac-item-from-object.js

@@ -0,0 +1,102 @@
+import Map from 'ol/Map.js';
+import OSM from 'ol/source/OSM.js';
+import STAC from '../src/ol/layer/STAC.js';
+import TileLayer from 'ol/layer/WebGLTile.js';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4.js';
+
+register(proj4); // required to support source reprojection
+
+const layer = new STAC({
+  url: 'https://www.planet.com/data/stac/open-skysat-data/angkor-wat/dsm.json',
+  data: {
+    'assets': {
+      'dsm': {
+        'href':
+          'https://storage.googleapis.com/open-cogs/planet-stac/angkor-wat/3d-geofox.ai/angkor-wat-dsm.tif',
+        'proj:epsg': 32648,
+        'proj:shape': [8675, 36244],
+        'proj:transform': [
+          374283.8729316911, 0.699999988079071, 0, 1498553.1898692613, 0,
+          -0.699999988079071,
+        ],
+        'raster:bands': [
+          {
+            'data_type': 'float32',
+            'statistics': {
+              'maximum': 96.446,
+              'mean': 26.839,
+              'minimum': 2.095,
+              'stddev': 10.117,
+            },
+            'nodata': 'nan',
+          },
+        ],
+        'roles': ['data', 'surface-model'],
+        'title': 'Digital Surface Model',
+        'type': 'image/tiff; application=geotiff; profile=cloud-optimized',
+      },
+    },
+    'bbox': [103.8381461, 13.3233018, 103.8953104, 13.5529222],
+    'collection': 'angkor-wat',
+    'geometry': {
+      'coordinates': [
+        [
+          [103.8381461, 13.5526676],
+          [103.83925, 13.3233018],
+          [103.8953104, 13.323552],
+          [103.8942598, 13.5529222],
+          [103.8381461, 13.5526676],
+        ],
+      ],
+      'type': 'Polygon',
+    },
+    'id': 'angkor-wat-3d-dsm',
+    'links': [
+      {
+        'href':
+          'https://www.planet.com/data/stac/open-skysat-data/angkor-wat/item.json',
+        'rel': 'self',
+        'type': 'application/json',
+      },
+    ],
+    'properties': {
+      'datetime': null,
+      'description':
+        'Digital Surface Model (DSM) of Angkor Wat, Cambodia, created from stereo images captured by a [Planet](https://planet.com) SkySat satellite. It is distributed as a single band Cloud-optimized GeoTiff, with each pixel representing the height at that location.',
+      'end_datetime': '2020-12-14T03:22:28.5Z',
+      'providers': [
+        {
+          'description':
+            'Contact Planet at [planet.com/contact-sales](https://www.planet.com/contact-sales/)',
+          'name': 'Planet Labs PBC',
+          'roles': ['producer', 'licensor'],
+          'url': 'https://www.planet.com',
+        },
+        {
+          'name': 'Geofox.ai',
+          'roles': ['processor'],
+          'url': 'https://www.geofox.ai',
+        },
+      ],
+      'start_datetime': '2020-12-14T03:21:56.5Z',
+      'title': 'Digital Surface Model',
+    },
+    'stac_extensions': [
+      'https://stac-extensions.github.io/projection/v1.1.0/schema.json',
+      'https://stac-extensions.github.io/raster/v1.1.0/schema.json',
+    ],
+    'stac_version': '1.0.0',
+    'type': 'Feature',
+  },
+});
+
+const background = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [background, layer],
+});
+map.getView().fit(layer.getExtent());

package/examples/stac-item-tileserver.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: STAC Item with COG rendered by a tile server
+shortdesc: Rendering a STAC Item as a layer, but uses a tile server instead of client-side GeoTiff rendering.
+docs: >
+  Geometry and Assets from SpatioTemporal Asset Catalog (STAC) Items can be rendered as layer group using a tile server.
+tags: "stac, stac item, geotiff, cog, layergroup, xyz, tilelayer"
+---
+<div id="map" class="map"></div>

package/examples/stac-item-tileserver.js

@@ -0,0 +1,34 @@
+import Map from 'ol/Map.js';
+import OSM from 'ol/source/OSM.js';
+import STAC from '../src/ol/layer/STAC.js';
+import TileLayer from 'ol/layer/WebGLTile.js';
+import View from 'ol/View.js';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4.js';
+
+register(proj4); // required to support source reprojection
+
+const layer = new STAC({
+  url: 'https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/10/T/ES/2022/7/S2A_10TES_20220726_0_L2A/S2A_10TES_20220726_0_L2A.json',
+  buildTileUrlTemplate: (asset) =>
+    'https://tiles.rdnt.io/tiles/{z}/{x}/{y}@2x?url=' +
+    encodeURIComponent(asset.getAbsoluteUrl()),
+});
+
+const background = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [background, layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+
+layer.on('sourceready', () => {
+  const view = map.getView();
+  view.fit(layer.getExtent());
+});

package/examples/stac-item.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: STAC Item
+shortdesc: Rendering a STAC Item as a layer.
+docs: >
+  Geometry and Assets from SpatioTemporal Asset Catalog (STAC) Items can be rendered as layer group.
+tags: "stac, stac item, geotiff, cog, layergroup"
+---
+<div id="map" class="map"></div>

package/examples/stac-item.js

@@ -0,0 +1,45 @@
+import Map from 'ol/Map.js';
+import OSM from 'ol/source/OSM.js';
+import STAC from '../src/ol/layer/STAC.js';
+import TileLayer from 'ol/layer/WebGLTile.js';
+import View from 'ol/View.js';
+import proj4 from 'proj4';
+import {register} from 'ol/proj/proj4.js';
+
+register(proj4); // required to support source reprojection
+
+const layer = new STAC({
+  url: 'https://s3.us-west-2.amazonaws.com/sentinel-cogs/sentinel-s2-l2a-cogs/10/T/ES/2022/7/S2A_10TES_20220726_0_L2A/S2A_10TES_20220726_0_L2A.json',
+});
+
+const background = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [background, layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+
+layer.on('sourceready', () => {
+  const view = map.getView();
+  view.fit(layer.getExtent());
+});
+
+layer.on('assetsready', () => {
+  // Assign titles for e.g. a layerswitcher
+  for (const sublayer of layer.getLayersArray()) {
+    const stac = sublayer.get('stac');
+    let title;
+    if (stac.isAsset() || stac.isLink()) {
+      title = stac.getMetadata('title') || stac.getKey();
+    } else {
+      title = 'Footprint';
+    }
+    sublayer.set('title', title);
+  }
+});

package/examples/stac-itemcollection.html

@@ -0,0 +1,11 @@
+---
+layout: example.html
+title: STAC Item Collection
+shortdesc: Rendering a STAC Item Collection as a layer.
+docs: >
+  Geometries and Thumbnails for various SpatioTemporal Asset Catalog (STAC) Items in an ItemCollection can be rendered as layer group.
+  Adds a click event to select individual items.
+tags: "stac, stac api, staticimage, layergroup"
+---
+<div id="map" class="map"></div>
+<div><strong>Selected Product Identifier:</strong> <span id="ids"></span></div>

package/examples/stac-itemcollection.js

@@ -0,0 +1,39 @@
+import Map from 'ol/Map.js';
+import OSM from 'ol/source/OSM.js';
+import STAC from '../src/ol/layer/STAC.js';
+import TileLayer from 'ol/layer/WebGLTile.js';
+import View from 'ol/View.js';
+import proj4 from 'proj4';
+import {getStacObjectsForEvent} from '../src/ol/layer/stacUtil.js';
+import {register} from 'ol/proj/proj4.js';
+
+register(proj4); // required to support source reprojection
+
+const layer = new STAC({
+  url: 'https://tamn.snapplanet.io/search?bbox=125.727770,-29.514858,133.412707,-23.673395&collections=S2',
+  displayPreview: true,
+});
+
+const background = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [background, layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+map.on('singleclick', async (event) => {
+  const objects = await getStacObjectsForEvent(event);
+  if (objects.length > 0) {
+    const ids = objects.map((obj) => obj.properties.productIdentifier);
+    document.getElementById('ids').innerText = ids.join(', ');
+  }
+});
+layer.on('sourceready', () => {
+  const view = map.getView();
+  view.fit(layer.getExtent());
+});

package/examples/templates/example.html

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <title>{{ title }}</title>
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/ol/ol.css">
+    <link rel="stylesheet" type="text/css" href="/ol-stac/theme/site.css">
+{{#each css.local}}
+    <link rel="stylesheet" type="text/css" href="{{{ . }}}">
+{{/each}}
+  </head>
+  <body>
+    <header class="navbar navbar-expand-md navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
+      <a class="navbar-brand" href="/">OL STAC</a>
+      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+
+      <!-- menu items that get hidden below 768px width -->
+      <nav class="collapse navbar-collapse" id="olmenu">
+        <ul class="nav navbar-nav ms-auto">
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
+            <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
+              <a class="dropdown-item" href="/ol-stac/doc/">Docs</a>
+              <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="/ol-stac/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>Quick Start</a>
+                <a class="dropdown-item" href="/ol-stac/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>FAQ</a>
+                <a class="dropdown-item" href="/ol-stac/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>Tutorials</a>
+            </div>
+          </li>
+          <li class="nav-item"><a class="nav-link" href="/ol-stac/examples/">Examples</a></li>
+          <li class="nav-item"><a class="nav-link" href="/ol-stac/apidoc/"><i class="fa fa-sitemap me-1"></i>API</a></li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
+            <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="codedropdown">
+              <a class="dropdown-item" href="https://github.com/m-mohr/ol-stac"><i class="fab fa-github fa-fw me-2 fa-lg"></i>Repository</a>
+              <a class="dropdown-item" href="/ol-stac/download/"><i class="fa fa-download fa-fw me-2 fa-lg"></i>Download</a>
+            </div>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <div class="container-fluid line-numbers">
+      <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+        <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        This example uses OL STAC v<span>{{ olVersion }}</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+      </div>
+
+{{#if ./experimental}}
+      <div id="experimental-notice" class="alert alert-warning alert-dismissible" role="alert">
+        <button id="experimental-dismiss" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        This example uses features that are not part of the stable API and subject to change between releases.  Consult the <a href="/ol-stac/en/latest/apidoc/">API documentation</a>
+        to see what is supported in the latest release.
+      </div>
+{{/if}}
+
+      <div class="row-fluid">
+        <a href="#" id="codepen-button" class="btn btn-link float-end">
+          <i class="fab fa-codepen fa-lg"></i> Edit
+        </a>
+        <div class="span12">
+          <h4 id="title">{{ title }}</h4>
+          <p class="tags">
+{{#each tags}}
+            <span class="badge-group">
+              <a
+                href="./index.html?q={{ ./tag }}" class="badge badge-info">{{ ./tag }}</a
+              ><a
+                class="badge badge-info tag-modal-toggle"
+                data-bs-toggle="modal"
+                data-bs-target="#tag-example-list"
+                data-title="{{ ./tag }}"
+                data-content="&lt;ul class=&quot;list-group&quot;&gt;
+{{#each ./examples}}
+                  &lt;li&gt;&lt;a class=&quot;list-group-item list-group-item-action{{#if ./isCurrent}} active{{/if}}&quot; href=&quot;./{{ ./link }}&quot;&gt;{{escape ./title}}&lt;/a&gt;
+{{/each}}
+                  &lt;/ul&gt;"
+                tabindex="0"
+                >{{ ./examples.length }}</a>
+            </span>
+{{/each}}
+          </p>
+          <div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-scrollable" role="document">
+              <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title" id="tag-example-title"></h5>
+                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                  <div class="list-group"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+          {{{ contents }}}
+        </div>
+        <form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
+          <input id="codesandbox-params" type="hidden" name="parameters">
+        </form>
+      </div>
+
+      <div class="row-fluid">
+        <div class="span12">
+          <p id="shortdesc">{{ shortdesc }}</p>
+          <div id="docs">{{ md docs }}</div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+        <h5 class="source-heading">main.js</h5>
+        <pre><code id="example-js-source" class="language-js">{{ js.source }}</code></pre>
+      </div>
+
+      <div class="row-fluid">
+        <h5 class="source-heading">index.html</h5>
+        <pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;meta charset="UTF-8"&gt;
+    &lt;title&gt;{{ title }}&lt;/title&gt;
+{{#each css.remote}}
+    &lt;link rel="stylesheet" href="{{ . }}"&gt;
+{{/each}}
+    &lt;link rel="stylesheet" href="node_modules/ol/ol.css"&gt;
+    &lt;style&gt;
+      .map {
+        width: 100%;
+        height: 400px;
+      }
+{{#if css.source}}{{ indent css.source spaces=6 }}{{/if}}    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+{{ indent contents spaces=4 }}
+{{#each js.remote}}
+    &lt;script src="{{ . }}"&gt;&lt;/script&gt;
+{{/each}}
+    &lt;script type="module" src="main.js"&gt;&lt;/script&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</code></pre>
+      </div>
+
+{{#each extraSources}}
+      <div class="row-fluid extra-source">
+        <h5 class="source-heading">{{./name}}</h5>
+        <pre><code class="language-{{./type}}">{{ ./source }}</code></pre>
+      </div>
+{{/each}}
+      <div class="row-fluid">
+        <h5 class="source-heading">package.json</h5>
+        <pre><code id="example-pkg-source" class="language-json">{{ pkgJson }}</code></pre>
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
+{{#each js.local}}
+    <script src="{{{ . }}}"></script>
+{{/each}}
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/toolbar/prism-toolbar.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.js"></script>
+    <script src="./resources/common.js"></script>
+    <script>
+      document.getElementById('tag-example-list')
+        .addEventListener('show.bs.modal', function (event) {
+          const button = event.relatedTarget; // Button that triggered the modal
+          this.querySelector('.modal-title').innerText = button.dataset.title;
+          this.querySelector('.modal-body').innerHTML = button.dataset.content;
+        });
+    </script>
+    <script>
+      const releaseUrl = 'https://cdn.jsdelivr.net/npm/ol-stac/package.json';
+      fetch(releaseUrl).then(function(response) {
+        return response.json();
+      }).then(function(json) {
+        const latestVersion = json.version;
+        document.getElementById('latest-version').innerHTML = latestVersion;
+        const url = window.location.href;
+        const branchSearch = url.match(/\/([^\/]*)\/examples\//);
+        const storageKey = 'ol-dismissed=-' + latestVersion;
+        const dismissed = localStorage.getItem(storageKey) === 'true';
+        if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '{{ olVersion }}' != latestVersion) {
+          const link = url.replace(branchSearch[0], '/latest/examples/');
+          fetch(link, {method: 'head'}).then(function(response) {
+            const a = document.getElementById('latest-link');
+            a.href = response.status == 200 ? link : '../../latest/examples/';
+          });
+          const latestCheck = document.getElementById('latest-check');
+          latestCheck.style.display = '';
+          document.getElementById('latest-dismiss').onclick = function() {
+            latestCheck.style.display = 'none';
+            localStorage.setItem(storageKey, 'true');
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

package/examples/templates/readme.md

@@ -0,0 +1,3 @@
+This folder contains example templates. These templates are used to build the examples in the `examples/` folder. The resulting examples are written to the `build/examples` folder.
+
+At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.

package/examples/webpack/config.mjs

@@ -0,0 +1,69 @@
+import CopyPlugin from 'copy-webpack-plugin';
+import ExampleBuilder from './example-builder.js';
+import TerserPlugin from 'terser-webpack-plugin';
+import fs from 'fs';
+import path, {dirname} from 'path';
+import {fileURLToPath} from 'url';
+
+const src = path.join(dirname(fileURLToPath(import.meta.url)), '..');
+const root = path.join(src, '..');
+
+export default {
+  context: src,
+  target: ['browserslist'],
+  entry: () => {
+    const entry = {};
+    fs.readdirSync(src)
+      .filter((name) => /^(?!index).*\.html$/.test(name))
+      .map((name) => name.replace(/\.html$/, ''))
+      .forEach((example) => {
+        entry[example] = `./${example}.js`;
+      });
+    return entry;
+  },
+  stats: 'minimal',
+  optimization: {
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+      }),
+    ],
+    runtimeChunk: {
+      name: 'common',
+    },
+    splitChunks: {
+      name: 'common',
+      chunks: 'initial',
+      minChunks: 2,
+    },
+  },
+  plugins: [
+    new ExampleBuilder({
+      templates: path.join(src, 'templates'),
+      common: 'common',
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: path.join(root, 'site', 'src', 'theme'),
+          to: 'theme',
+        },
+        {from: 'resources', to: 'resources'},
+        {from: 'index.html', to: 'index.html'},
+        {from: 'index.js', to: 'index.js'},
+      ],
+    }),
+  ],
+  devtool: 'source-map',
+  output: {
+    filename: '[name].js',
+    path: path.join(root, 'build', 'examples'),
+  },
+  resolve: {
+    fallback: {
+      fs: false,
+      http: false,
+      https: false,
+    },
+  },
+};