Merge pull request #12785 from mike-000/Promise.allSettled

Promise.allSettled polyfill and other browser compatibilty

README.md

@@ -102,6 +102,8 @@ For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and ol
 * [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/).
 * [Pointer events](https://caniuse.com/pointer): Use [elm-pep](https://npmjs.com/package/elm-pep) (lightweight) or [pepjs](https://npmjs.com/package/pepjs) (for really, really old browsers).
 
+[`ol/source/GeoTIFF`](https://openlayers.org/en/latest/apidoc/module-ol_source_GeoTIFF-GeoTIFFSource.html) requires a browser that supports [ECMAScript 6](https://262.ecma-international.org/6.0/). Additionally a polyfill for [`Promise.allSettled`](https://caniuse.com/mdn-javascript_builtins_promise_allsettled) may be needed.
+
 ## Documentation
 
 Check out the [hosted examples](https://openlayers.org/en/latest/examples/), the [workshop](https://openlayers.org/workshop/) or the [API documentation](https://openlayers.org/en/latest/apidoc/).

examples/.eslintrc

@@ -13,6 +13,7 @@
     "jsts": false,
     "JSZip": false,
     "mapboxgl": false,
+    "NumpyLoader": false,
     "saveAs": false,
     "toastr": false,
     "topojson": false,

examples/numpytile.js

@@ -1,8 +1,7 @@
+import DataTileSource from '../src/ol/source/DataTile.js';
 import Map from '../src/ol/Map.js';
 import TileLayer from '../src/ol/layer/WebGLTile.js';
 import View from '../src/ol/View.js';
-
-import DataTileSource from '../src/ol/source/DataTile.js';
 import {fromLonLat} from '../src/ol/proj.js';
 
 // 16-bit COG
@@ -17,7 +16,7 @@ function numpyTileLoader(z, x, y) {
 
   return fetch(url)
     .then((r) => r.arrayBuffer())
-    .then((buffer) => NumpyLoader.fromArrayBuffer(buffer)) // eslint-disable-line no-undef
+    .then((buffer) => NumpyLoader.fromArrayBuffer(buffer))
     .then((numpyData) => {
       // flatten the numpy data
       const dataTile = new Float32Array(256 * 256 * 5);
@@ -84,21 +83,25 @@ const inputMax = document.getElementById('input-max');
 const outputMin = document.getElementById('output-min');
 const outputMax = document.getElementById('output-max');
 
-inputMin.addEventListener('input', (evt) => {
+const handleMin = (evt) => {
   numpyLayer.updateStyleVariables({
     'bMin': parseFloat(evt.target.value),
     'bMax': parseFloat(inputMax.value),
   });
   outputMin.innerText = evt.target.value;
-});
+};
+inputMin.addEventListener('input', handleMin);
+inputMin.addEventListener('change', handleMin);
 
-inputMax.addEventListener('input', (evt) => {
+const handleMax = (evt) => {
   numpyLayer.updateStyleVariables({
     'bMin': parseFloat(inputMin.value),
     'bMax': parseFloat(evt.target.value),
   });
   outputMax.innerText = evt.target.value;
-});
+};
+inputMax.addEventListener('input', handleMax);
+inputMax.addEventListener('change', handleMax);
 
 inputMin.value = initialMin;
 inputMax.value = initialMax;

examples/resources/Promise.allSettled.js

@@ -0,0 +1,21 @@
+if (typeof Promise !== 'undefined' && !Promise.allSettled && Array.from) {
+  Promise.allSettled = 
+    function (promises) {
+      return Promise.all(
+        Array.from(
+          promises,
+          function (p) {
+            return p.then (
+              function (value) {
+                return {status: 'fulfilled', value: value};
+              }
+            ).catch(
+              function (reason) {
+                return {status: 'rejected', reason: reason};
+              }
+            );
+          }
+        )
+      )
+    };
+}

examples/templates/example.html

@@ -69,6 +69,7 @@
     <link rel="stylesheet" href="./resources/layout.css" type="text/css">
     <script src="https://unpkg.com/elm-pep"></script>
     <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>
+    <script src="./resources/Promise.allSettled.js"></script>
     {{{ extraHead.local }}}
     {{{ css.tag }}}
     <title>{{ title }}</title>