ol-stac 0.0.0

package/config/jsdoc/plugins/observable.cjs

@@ -0,0 +1,69 @@
+/* eslint-disable import/no-commonjs */
+
+const classes = {};
+const observables = {};
+
+exports.handlers = {
+  newDoclet: function (e) {
+    const doclet = e.doclet;
+    if (doclet.kind == 'class' && !(doclet.longname in classes)) {
+      classes[doclet.longname] = doclet;
+    }
+  },
+
+  parseComplete: function (e) {
+    const doclets = e.doclets;
+    let cls, doclet, event, i, ii, observable;
+    for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
+      doclet = doclets[i];
+      cls = classes[doclet.longname.split('#')[0]];
+      if (typeof doclet.observable == 'string' && cls) {
+        let name = doclet.name.replace(/^[sg]et/, '');
+        name = name.substr(0, 1).toLowerCase() + name.substr(1);
+        const key = doclet.longname.split('#')[0] + '#' + name;
+        doclet.observable = key;
+        if (!observables[key]) {
+          observables[key] = {};
+        }
+        observable = observables[key];
+        observable.name = name;
+        observable.readonly =
+          typeof observable.readonly == 'boolean' ? observable.readonly : true;
+        if (doclet.name.startsWith('get')) {
+          observable.type = doclet.returns[0].type;
+          observable.description = doclet.returns[0].description;
+        } else if (doclet.name.startsWith('set')) {
+          observable.readonly = false;
+        }
+        if (doclet.stability) {
+          observable.stability = doclet.stability;
+        }
+        if (!cls.observables) {
+          cls.observables = [];
+        }
+        observable = observables[doclet.observable];
+        if (observable.type && !cls.observables.includes(observable)) {
+          cls.observables.push(observable);
+        }
+        if (!cls.fires) {
+          cls.fires = [];
+        }
+        event = 'module:ol/Object.ObjectEvent#event:change:' + name;
+        if (!cls.fires.includes(event)) {
+          cls.fires.push(event);
+        }
+      }
+    }
+  },
+};
+
+exports.defineTags = function (dictionary) {
+  dictionary.defineTag('observable', {
+    mustNotHaveValue: true,
+    canHaveType: false,
+    canHaveName: false,
+    onTagged: function (doclet, tag) {
+      doclet.observable = '';
+    },
+  });
+};

package/config/jsdoc/plugins/virtual-plugin.cjs

@@ -0,0 +1,16 @@
+/* eslint-disable import/no-commonjs */
+
+/**
+ * Handle the interface and abstract annotations.
+ * @param {Object} dictionary The tag dictionary.
+ */
+exports.defineTags = function (dictionary) {
+  const classTag = dictionary.lookUp('class');
+  dictionary.defineTag('interface', {
+    mustNotHaveValue: true,
+    onTagged: function (doclet, tag) {
+      classTag.onTagged.apply(this, arguments);
+      doclet.virtual = true;
+    },
+  });
+};

package/config/rollup-full-build.js

@@ -0,0 +1,24 @@
+import commonjs from '@rollup/plugin-commonjs';
+import externalGlobals from 'rollup-plugin-external-globals';
+import resolve from '@rollup/plugin-node-resolve';
+import terser from '@rollup/plugin-terser';
+
+export default {
+  input: 'build/index.js',
+  output: {
+    name: 'ol_stac',
+    format: 'iife',
+    exports: 'default',
+    file: 'build/full/ol-stac.js',
+    sourcemap: true,
+  },
+  plugins: [
+    resolve({moduleDirectories: ['build', 'node_modules']}),
+    commonjs(),
+    externalGlobals({
+      geotiff: 'GeoTIFF',
+      ol: 'ol',
+    }),
+    terser(),
+  ],
+};

package/config/tsconfig-build.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "es2017",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
+    "module": "es2020",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "allowJs": true,                       /* Allow javascript files to be compiled. */
+    "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "../build/ol",                        /* Redirect output structure to the directory. */
+    "importHelpers": false,                 /* Import emit helpers from 'tslib'. */
+    /* Strict Type-Checking Options */
+    "strict": false,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true,              /* Enable strict null checks. */
+    /* Module Resolution Options */
+    "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "esModuleInterop": false,                   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    "inlineSources": false,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    "skipLibCheck": true
+  },
+  "include": [
+    "../build/ol/**/*.js"
+  ],
+  "exclude": []
+}

package/examples/.eslintrc

@@ -0,0 +1,29 @@
+{
+  "globals": {
+    "$": false,
+    "arc": false,
+    "bootstrap": false,
+    "chroma": false,
+    "common": false,
+    "createMapboxStreetsV6Style": false,
+    "d3": false,
+    "geojsonvt": false,
+    "gifler": false,
+    "GyroNorm": false,
+    "html2canvas": false,
+    "jspdf": false,
+    "jsts": false,
+    "JSZip": false,
+    "mapboxgl": false,
+    "monotoneChainConvexHull": false,
+    "NumpyLoader": false,
+    "saveAs": false,
+    "toastr": false,
+    "topojson": false,
+    "topolis": false,
+    "turf": false
+  },
+  "rules": {
+    "no-unused-vars": [2, {"varsIgnorePattern": "^map"}]
+  }
+}

package/examples/index.html

@@ -0,0 +1,100 @@
+<!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>OL STAC Examples</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">
+    <style>
+      input.search-query {
+        color: var(--ol-foreground-color);
+      }
+      .example {
+        display: block;
+        padding: 0.65rem;
+        height: 140px;
+        margin: 0.65rem 0;
+        overflow: auto;
+      }
+      .example p.description {
+        font-size: smaller;
+        margin: 5px 0;
+      }
+      a.example {
+        text-decoration: none;
+      }
+      a.example:hover :first-child {
+        text-decoration: underline;
+      }
+      a.bg-light:focus,
+      a.bg-light:hover,
+      button.bg-light:focus,
+      button.bg-light:hover {
+        background-color: #f8f9fa !important;
+      }
+    </style>
+  </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">
+        <form role="search">
+          <div class="input-group">
+            <input name="q" type="search" id="keywords" class="form-control search-query" placeholder="Search" aria-label="Examples" aria-describedby="count" autocomplete="off" autofocus>
+            <span class="input-group-text text-white bg-transparent" id="count"></span>
+          </div>
+        </form>
+        <ul class="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 active"><a class="nav-link" href="../examples/">Examples</a></li>
+          <li class="nav-item"><a class="nav-link" href="../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">
+      <div id="examples"></div>
+      <div style="display: none;">
+        <div id="template" class="row mt-3">
+          <div class="col-md-4 col-sm-6" jugl:repeat="example examples">
+            <a jugl:attributes="href example.link" class="example  bg-light border rounded">
+              <strong><span jugl:replace="example.title">title</span></strong><br>
+              <small jugl:content="'(' + example.link + ')'"></small>
+              <p class="description" jugl:content="example.shortdesc"></p>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script type="text/javascript" src="resources/Jugl.js"></script>
+    <script type="text/javascript" src="examples-info.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+  </body>
+</html>

package/examples/index.js

@@ -0,0 +1,109 @@
+(function () {
+  'use strict';
+  /* global info, jugl */
+
+  const template = new jugl.Template('template');
+  const target = document.getElementById('examples');
+
+  function listExamples(examples) {
+    target.innerHTML = '';
+    template.process({
+      context: {examples: examples},
+      clone: true,
+      parent: target,
+    });
+    document.getElementById('count').innerHTML = String(examples.length);
+  }
+
+  let timerId;
+  function inputChange() {
+    if (timerId) {
+      window.clearTimeout(timerId);
+    }
+    const text = this.value;
+    timerId = window.setTimeout(function () {
+      filterList(text);
+    }, 500);
+  }
+
+  function getMatchingExamples(text) {
+    text = text.trim();
+    if (text.length === 0) {
+      return info.examples;
+    }
+    const words = text.toLowerCase().split(/\W+/);
+    const scores = {};
+    const updateScores = function (dict, word) {
+      // eslint-disable-next-line prefer-const
+      for (let exIndex in dict) {
+        let exScore = scores[exIndex];
+        if (!exScore) {
+          exScore = {};
+          scores[exIndex] = exScore;
+        }
+        exScore[word] = (exScore[word] || 0) + dict[exIndex];
+      }
+    };
+    words.forEach(function (word) {
+      const dict = info.wordIndex[word];
+      if (dict) {
+        updateScores(dict, word);
+      } else {
+        const r = new RegExp(word);
+        // eslint-disable-next-line prefer-const
+        for (let idx in info.wordIndex) {
+          if (r.test(idx)) {
+            updateScores(info.wordIndex[idx], word);
+          }
+        }
+      }
+    });
+    const examples = [];
+    // eslint-disable-next-line prefer-const
+    for (let exIndex in scores) {
+      const ex = info.examples[exIndex];
+      ex.score = 0;
+      ex.words = 0;
+      // eslint-disable-next-line prefer-const
+      for (let word in scores[exIndex]) {
+        ex.score += scores[exIndex][word];
+        ex.words++;
+      }
+      examples.push(ex);
+    }
+    // sort examples, first by number of words matched, then
+    // by word frequency
+    examples.sort(function (a, b) {
+      return b.score - a.score || b.words - a.words;
+    });
+    return examples;
+  }
+
+  function filterList(text) {
+    const examples = getMatchingExamples(text);
+    listExamples(examples);
+    updateHistoryState(text);
+  }
+
+  function updateHistoryState(text) {
+    text = text.trim();
+    const params = new URLSearchParams(window.location.search);
+    if (text.length === 0) {
+      params.delete('q');
+    } else {
+      params.set('q', text);
+    }
+    let fullUrl = window.location.pathname;
+    if (params.toString().length !== 0) {
+      fullUrl += `?${params.toString()}`;
+    }
+    history.replaceState(null, '', fullUrl);
+  }
+
+  const params = new URLSearchParams(window.location.search);
+  const text = params.get('q') || '';
+  const input = document.getElementById('keywords');
+  input.addEventListener('input', inputChange);
+  input.value = text;
+  filterList(text);
+})();

package/examples/planetary-computer.html

@@ -0,0 +1,14 @@
+---
+layout: example.html
+title: Planetary Computer
+shortdesc: Rendering a STAC Item from Planetary Computer.
+docs: >
+  This example uses the STAC layer to render an item from Planetary Computer.
+  Planetary Computer requres that asset URLs are signed with a token.  The example
+  uses the `getGeoTIFFSourceOptions` callback to sign the asset URL.
+tags: "stac, stac item, geotiff, cog"
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: <Your API key from https://www.maptiler.com/cloud/>
+---
+<div id="map" class="map"></div>

package/examples/planetary-computer.js

@@ -0,0 +1,53 @@
+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
+
+/**
+ * Get a Shared Access Signature Token to authorize asset requests.
+ * See https://planetarycomputer.microsoft.com/docs/concepts/sas/
+ * @param {string} href The unsigned URL.
+ * @return {Promise<string>} A promise for the signed URL.
+ */
+async function sign(href) {
+  const params = new URLSearchParams({href});
+  const response = await fetch(
+    `https://planetarycomputer.microsoft.com/api/sas/v1/sign?${params}`
+  );
+  const body = await response.json();
+  return body.href;
+}
+
+const layer = new STAC({
+  url: 'https://planetarycomputer.microsoft.com/api/stac/v1/collections/sentinel-2-l2a/items/S2B_MSIL2A_20220909T185929_R013_T10TES_20220910T222807',
+  assets: ['visual'],
+  async getGeoTIFFSourceOptions(options) {
+    for (const source of options.sources) {
+      source.url = await sign(source.url);
+    }
+    return options;
+  },
+});
+
+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/resources/Jugl.js

@@ -0,0 +1,15 @@
+/*
+ * Jugl.js -- JavaScript Template Library
+ *
+ * Copyright 2007-2010 Tim Schaub
+ * Released under the MIT license.  Please see 
+ * http://github.com/tschaub/jugl/blob/master/license.txt for the full license.
+ */
+/*
+ * Jugl.js -- JavaScript Template Library
+ *
+ * Copyright 2007-2010 Tim Schaub
+ * Released under the MIT license.  Please see 
+ * http://github.com/tschaub/jugl/blob/master/license.txt for the full license.
+ */
+(function(){var f={prefix:"jugl",namespaceURI:null,loadTemplate:function(h){var i=function(l){var m,k,n=!l.status||(l.status>=200&&l.status<300);if(n){try{m=l.responseXML;k=new e(m.documentElement)}catch(j){m=document.createElement("div");m.innerHTML=l.responseText;k=new e(m.firstChild)}if(h.callback){h.callback.call(h.scope,k)}}else{if(h.failure){h.failure.call(h.scope,l)}}};d(h.url,i)}};var g=function(h,j){h=h||{};j=j||{};for(var i in j){h[i]=j[i]}return h};var a=function(l,o){var m,n,k,j,h;if(typeof(l)==="string"){m=document.getElementById(l);if(!m){throw Error("Element id not found: "+l)}l=m}if(typeof(o)==="string"){m=document.getElementById(o);if(!m){throw Error("Element id not found: "+o)}o=m}if(o.namespaceURI&&o.xml){n=document.createElement("div");n.innerHTML=o.xml;k=n.childNodes;for(j=0,h=k.length;j<h;++j){l.appendChild(k[j])}}else{if(l.ownerDocument&&l.ownerDocument.importNode&&l.ownerDocument!==o.ownerDocument){o=l.ownerDocument.importNode(o,true)}l.appendChild(o)}return o};var d=function(h,k,i){var j;if(typeof XMLHttpRequest!=="undefined"){j=new XMLHttpRequest()}else{if(typeof ActiveXObject!=="undefined"){j=new ActiveXObject("Microsoft.XMLHTTP")}else{throw new Error("XMLHttpRequest not supported")}}j.open("GET",h);j.onreadystatechange=function(){if(j.readyState===4){k.call(i,j)}};j.send(null)};var b=function(h,i){this.template=h;this.node=i;this.scope={};this.scope.repeat={}};g(b.prototype,{clone:function(){var i=this.node.cloneNode(true);i.removeAttribute("id");var h=new b(this.template,i);g(h.scope,this.scope);return h},getAttribute:function(h){var j;if(this.node.nodeType===1){if(this.template.usingNS){j=this.node.getAttributeNodeNS(f.namespaceURI,h)}else{j=this.node.getAttributeNode(f.prefix+":"+h)}if(j&&!j.specified){j=false}}var i;if(j){i=new c(this,j,h)}else{i=j}return i},setAttribute:function(h,i){this.node.setAttribute(h,i)},removeAttributeNode:function(h){this.node.removeAttributeNode(h.node)},getChildNodes:function(){var k=this.node.childNodes.length;var j=new Array(k);var l;for(var h=0;h<k;++h){l=new b(this.template,this.node.childNodes[h]);l.scope=g({},this.scope);j[h]=l}return j},removeChildNodes:function(){while(this.node.hasChildNodes()){this.node.removeChild(this.node.firstChild)}},removeChild:function(h){this.node.removeChild(h.node);return node},removeSelf:function(){this.node.parentNode.removeChild(this.node)},importNode:function(h){if(this.node.ownerDocument&&this.node.ownerDocument.importNode){if(h.node.ownerDocument!==this.node.ownerDocument){h.node=this.node.ownerDocument.importNode(h.node,true)}}},appendChild:function(h){this.importNode(h);this.node.appendChild(h.node)},insertAfter:function(h){this.importNode(h);var j=this.node.parentNode;var i=this.node.nextSibling;if(i){j.insertBefore(h.node,i)}else{j.appendChild(h.node)}},insertBefore:function(h){this.importNode(h);var i=this.node.parentNode;i.insertBefore(h.node,this.node)},process:function(){var j;var r=true;var n=["define","condition","repeat"];for(var o=0,p=n.length;o<p;++o){j=this.getAttribute(n[o]);if(j){r=j.process();if(!r){return}}}var q=this.getAttribute("content");if(q){q.process()}else{var k=this.getAttribute("replace");if(k){k.process()}}var m=this.getAttribute("attributes");if(m){m.process()}if(!q&&!k){this.processChildNodes()}var h=this.getAttribute("omit-tag");if(h){h.process()}var l=this.getAttribute("reflow");if(l){l.process()}},processChildNodes:function(){var k=this.getChildNodes();for(var j=0,h=k.length;j<h;++j){k[j].process()}}});var e=function(h){h=h||{};if(typeof h==="string"||(h.nodeType===1)){h={node:h}}if(typeof(h.node)==="string"){h.node=document.getElementById(h.node);if(!h.node){throw Error("Element id not found: "+h.node)}}if(h.node){this.node=h.node;this.loaded=true}else{if(h.url){this.load({url:h.url,callback:h.callback,scope:h.scope})}}};g(e.prototype,{node:null,usingNS:false,xmldom:window.ActiveXObject?new ActiveXObject("Microsoft.XMLDOM"):null,trimSpace:(/^\s*(\w+)\s+(.*?)\s*$/),loaded:false,loading:false,process:function(h){var i,j;h=g({context:null,clone:false,string:false},h);this.usingNS=this.node.getAttributeNodeNS&&f.namespaceURI;i=new b(this,this.node);if(h.clone||h.string){i=i.clone()}if(h.context){i.scope=h.context}i.process();if(h.string){if(i.node.innerHTML){j=i.node.innerHTML}else{if(this.xmldom){j=i.node.xml}else{j=(new XMLSerializer).serializeToString(i.node)}}}else{j=i.node;if(h.parent){if(h.clone){j=a(h.parent,i.node)}else{this.appendTo(h.parent)}}}return j},load:function(j){if(typeof j==="string"){j={url:j}}j=j||{};this.loading=true;var h=function(k){this.node=k.node;this.loading=false;this.loaded=true;if(j.callback){j.callback.apply(j.scope,[k])}};var i;if(j.failure){i=(function(){return function(k){j.failure.call(j.scope,k)}})()}f.loadTemplate({url:j.url,callback:h,failure:i,scope:this})},appendTo:function(h){this.node=a(h,this.node);return this}});var c=function(h,j,i){this.element=h;this.node=j;this.type=i;this.nodeValue=j.nodeValue;this.nodeName=j.nodeName;this.template=h.template};g(c.prototype,{splitAttributeValue:function(i){i=(i!=null)?i:this.nodeValue;var h=this.template.trimSpace.exec(i);return h&&h.length===3&&[h[1],h[2]]},splitExpressionPrefix:function(){var h=this.splitAttributeValue();if(!h||(h[0]!="structure"&&h[0]!="text")){h=[null,this.nodeValue]}return h},getAttributeValues:function(){return this.nodeValue.replace(/[\t\n]/g,"").replace(/;\s*$/,"").replace(/;;/g,"\t").split(";").join("\n").replace(/\t/g,";").split(/\n/g)},removeSelf:function(){this.element.removeAttributeNode(this)},process:function(){return this.processAttribute[this.type].apply(this,[])},evalInScope:function(k){var i=this.element.scope;var h=[];var j=[];for(key in i){h.push(key);j.push(i[key])}var l=new Function(h.join(","),"return "+k);return l.apply({},j)},processAttribute:{define:function(){var l,k,j,h=this.getAttributeValues();for(k=0,j=h.length;k<j;++k){l=this.splitAttributeValue(h[k]);this.element.scope[l[0]]=this.evalInScope(l[1])}this.removeSelf();return true},condition:function(){var h=!!(this.evalInScope(this.nodeValue));this.removeSelf();if(!h){this.element.removeSelf()}return h},repeat:function(){var l=this.splitAttributeValue();var r=l[0];var o=this.evalInScope(l[1]);this.removeSelf();if(!(o instanceof Array)){var q=new Array();for(var j in o){q.push(j)}o=q}var m;var h=this.element;for(var n=0,k=o.length;n<k;++n){m=this.element.clone();m.scope[r]=o[n];m.scope.repeat[r]={index:n,number:n+1,even:!(n%2),odd:!!(n%2),start:(n===0),end:(n===k-1),length:k};h.insertAfter(m);m.process();h=m}this.element.removeSelf();return false},content:function(){var m=this.splitExpressionPrefix();var p=this.evalInScope(m[1]);this.removeSelf();if(m[0]==="structure"){try{this.element.node.innerHTML=p}catch(l){var h=document.createElement("div");h.innerHTML=p;if(this.element.node.xml&&this.template.xmldom){while(this.element.node.firstChild){this.element.node.removeChild(this.element.node.firstChild)}this.template.xmldom.loadXML(h.outerHTML);var k=this.template.xmldom.firstChild.childNodes;for(var n=0,o=k.length;n<o;++n){this.element.node.appendChild(k[n])}}else{this.element.node.innerHTML=h.innerHTML}}}else{var q;if(this.element.node.xml&&this.template.xmldom){q=this.template.xmldom.createTextNode(p)}else{q=document.createTextNode(p)}var j=new b(this.template,q);this.element.removeChildNodes();this.element.appendChild(j)}return true},replace:function(){var k=this.splitExpressionPrefix();var j=this.evalInScope(k[1]);this.removeSelf();if(k[0]==="structure"){var m=document.createElement("div");m.innerHTML=j;if(this.element.node.xml&&this.template.xmldom){this.template.xmldom.loadXML(m.outerHTML);m=this.template.xmldom.firstChild}while(m.firstChild){var l=m.removeChild(m.firstChild);if(this.element.node.ownerDocument&&this.element.node.ownerDocument.importNode){if(l.ownerDocument!=this.element.node.ownerDocument){l=this.element.node.ownerDocument.importNode(l,true)}}this.element.node.parentNode.insertBefore(l,this.element.node)}}else{var i;if(this.element.node.xml&&this.template.xmldom){i=this.template.xmldom.createTextNode(j)}else{i=document.createTextNode(j)}var h=new b(this.template,i);this.element.insertBefore(h)}this.element.removeSelf();return true},attributes:function(){var h=this.getAttributeValues();var n,k,m;for(var l=0,j=h.length;l<j;++l){n=this.splitAttributeValue(h[l]);k=n[0];m=this.evalInScope(n[1]);if(m!==false){this.element.setAttribute(k,m)}}this.removeSelf();return true},"omit-tag":function(){var l=((this.nodeValue==="")||!!(this.evalInScope(this.nodeValue)));this.removeSelf();if(l){var k=this.element.getChildNodes();for(var j=0,h=k.length;j<h;++j){this.element.insertBefore(k[j])}this.element.removeSelf()}},reflow:function(){var h=((this.nodeValue==="")||!!(this.evalInScope(this.nodeValue)));this.removeSelf();if(h){if(this.element.node.outerHTML){this.element.node.outerHTML=this.element.node.outerHTML}else{this.element.node.innerHTML=this.element.node.innerHTML}}}}});window.jugl=g(f,{Template:e})})();

package/examples/resources/common.js

@@ -0,0 +1,111 @@
+(function() {
+  "use strict"
+  /* global LZString */
+
+  let lzStringPromise;
+  function loadLzString() {
+    if (!lzStringPromise) {
+      lzStringPromise = new Promise(function (resolve, reject) {
+        const script = document.createElement('script')
+        script.src = 'https://cdn.jsdelivr.net/npm/lz-string@1.4.4/libs/lz-string.min.js';
+        document.head.append(script);
+        script.addEventListener('load', resolve);
+        script.addEventListener('error', reject);
+      });
+    }
+    return lzStringPromise;
+  }
+
+  function compress(json) {
+    return LZString.compressToBase64(JSON.stringify(json))
+      .replace(/\+/g, '-')
+      .replace(/\//g, '_')
+      .replace(/=+$/, '');
+  }
+
+  function fetchResource(resource) {
+    return new Promise(function (resolve, reject) {
+      const isImage = /\.(png|jpe?g|gif|tiff?|svg|kmz)$/.test(resource);
+      if (isImage) {
+        resolve ({
+          isBinary: true,
+          content: new URL(resource, window.location.href).href
+        });
+      } else {
+        const xhr = new XMLHttpRequest();
+        xhr.open('GET', resource);
+        xhr.responseType = 'text';
+        xhr.addEventListener('load', function () {
+          resolve ({
+            content: xhr.response
+          });
+        });
+        xhr.addEventListener('error', reject);
+        xhr.send();
+      }
+    })
+  }
+
+  const codepenButton = document.getElementById('codepen-button');
+  if (codepenButton) {
+    const form = document.getElementById('codepen-form');
+    codepenButton.href = form.action;
+    codepenButton.addEventListener('click', function (event) {
+      event.preventDefault();
+      const html = document.getElementById('example-html-source').innerText;
+      const js = document.getElementById('example-js-source').innerText;
+      let pkgJson = document.getElementById('example-pkg-source').innerText;
+      pkgJson = JSON.parse(pkgJson);
+      pkgJson['devDependencies']['typescript'] = 'latest';
+      pkgJson = JSON.stringify(pkgJson, undefined, 2);
+
+      const unique = new Set();
+      const localResources = (js.match(/'(?:\.\/)?(?:data|resources)\/[^']*'/g) || [])
+        .map(function (f) {
+          return f.replace(/^'(?:\.\/)?|'$/g, '');
+        })
+        .filter(function (f) {
+          return unique.has(f) ? false : unique.add(f);
+        });
+
+      const promises = localResources.map(function (resource) {
+        return fetchResource(resource);
+      });
+      promises.push(loadLzString());
+
+      Promise.all(promises).then(
+        function (results) {
+          const files = {
+            'index.html': {content: html},
+            'package.json': {content: pkgJson},
+            'sandbox.config.json': {content: '{"template": "parcel"}'},
+            '.babelrc': {content: '{}'},
+            '.prettierrc': {
+              content: JSON.stringify(
+                {
+                  printWidth: 80,
+                  tabWidth: 2,
+                  useTabs: false,
+                  semi: true,
+                  singleQuote: true,
+                  trailingComma: 'es5',
+                  bracketSpacing: false,
+                  jsxBracketSameLine: false,
+                  fluid: false,
+                },
+                undefined,
+                2
+              ),
+            },
+          };
+          for (let i = 0; i < localResources.length; i++) {
+            files[localResources[i]] = results[i];
+          }
+
+          form.parameters.value = compress({files: files});
+          form.submit();
+        }
+      );
+    });
+  }
+})();

package/examples/stac-collection-webmaplinks.html

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: STAC Collection with Web Map Links
+shortdesc: Rendering a STAC Collection with with a selection of web mapping services.
+docs: >
+  Geometry and web map links from SpatioTemporal Asset Catalog (STAC) Collections can be rendered as layer group.
+tags: "stac, stac collection, wms, wmts, xyz, tilejson, tilelayer, layergroup"
+---
+<div id="map" class="map"></div>

package/examples/stac-collection-webmaplinks.js

@@ -0,0 +1,55 @@
+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({
+  displayWebMapLink: true,
+  data: {
+    'stac_version': '1.0.0',
+    'stac_extensions': [
+      'https://stac-extensions.github.io/web-map-links/v1.1.0/schema.json',
+    ],
+    'type': 'Collection',
+    'id': 'averaged_PM10',
+    'description': 'Particulate matter 10µm',
+    'license': 'CC-BY-4.0',
+    'attribution':
+      'Copyright "© 2023 <a href="www.ecmwf.int">European Centre for Medium-Range Weather Forecasts (ECMWF)</a>',
+    'extent': {
+      'spatial': {
+        'bbox': [[-25, 30, 45, 71]],
+      },
+      'temporal': {
+        'interval': [['2022-09-22T00:00:00Z', '2023-07-31T00:00:00Z']],
+      },
+    },
+    'links': [
+      {
+        'href': 'https://eccharts.ecmwf.int/wms/?token=public',
+        'rel': 'wms',
+        'wms:layers': ['composition_europe_pm10_analysis_surface'],
+      },
+    ],
+  },
+});
+
+const background = new TileLayer({
+  source: new OSM(),
+});
+
+const map = new Map({
+  target: 'map',
+  layers: [background, layer],
+  view: new View({
+    center: [0, 0],
+    zoom: 0,
+  }),
+});
+const view = map.getView();
+view.fit(layer.getExtent());

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

@@ -0,0 +1,9 @@
+---
+layout: example.html
+title: STAC Item from an object
+shortdesc: Rendering a STAC Item as a layer that is provided as a JS object.
+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>