From a2291abf1d7f5dde8610c9ee4ace99ca311e64ab Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Wed, 13 Oct 2021 10:17:50 +0100
Subject: [PATCH 1/4] also transpile .mjs

---
 examples/webpack/config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/webpack/config.mjs b/examples/webpack/config.mjs
index 12bd343a34..17cf361776 100644
--- a/examples/webpack/config.mjs
+++ b/examples/webpack/config.mjs
@@ -26,7 +26,7 @@ export default {
   module: {
     rules: [
       {
-        test: /^((?!es2015-)[\s\S])*\.js$/,
+        test: /^((?!es2015-)[\s\S])*\.m?js$/,
         use: {
           loader: 'babel-loader',
           options: {

From 895749707fedc9d8881d6cf29c44bfb022b449fa Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Wed, 13 Oct 2021 10:23:09 +0100
Subject: [PATCH 2/4] Use core-js cdn for some polyfills

---
 examples/resources/Promise.allSettled.js | 21 ---------------------
 examples/templates/example.html          |  9 +++++----
 site/index.html                          |  7 ++++---
 3 files changed, 9 insertions(+), 28 deletions(-)
 delete mode 100644 examples/resources/Promise.allSettled.js

diff --git a/examples/resources/Promise.allSettled.js b/examples/resources/Promise.allSettled.js
deleted file mode 100644
index e8822b2db4..0000000000
--- a/examples/resources/Promise.allSettled.js
+++ /dev/null
@@ -1,21 +0,0 @@
-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};
-              }
-            );
-          }
-        )
-      )
-    };
-}
diff --git a/examples/templates/example.html b/examples/templates/example.html
index e60def9d5e..fdead5dd47 100644
--- a/examples/templates/example.html
+++ b/examples/templates/example.html
@@ -68,8 +68,8 @@
     <link rel="stylesheet" href="./css/ol.css" type="text/css">
     <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>
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
     {{{ extraHead.local }}}
     {{{ css.tag }}}
     <title>{{ title }}</title>
@@ -194,8 +194,9 @@
     &lt;title&gt;{{ title }}&lt;/title&gt;
     &lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
     &lt;script src="https://unpkg.com/elm-pep"&gt;&lt;/script&gt;
-    &lt;!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --&gt;
-    &lt;script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"&gt;&lt;/script&gt;{{#if extraHead.remote}}
+    &lt;!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x --&gt;
+    &lt;script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"&gt;&lt;/script&gt;
+    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"&gt;&lt;/script&gt;{{#if extraHead.remote}}
 {{ indent extraHead.remote spaces=4 }}{{/if}}
     &lt;style&gt;
       .map {
diff --git a/site/index.html b/site/index.html
index 740bfff0d1..6f5a356e6d 100644
--- a/site/index.html
+++ b/site/index.html
@@ -7,8 +7,9 @@
     <link href="./legacy/ol.css" rel='stylesheet' type='text/css'>
     <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
     <script src="https://unpkg.com/elm-pep"></script>
-    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
-    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL,TextDecoder,Number.isInteger"></script>    
+    <!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x -->
+    <script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
   </head>
   <body>
     <ul>
@@ -32,4 +33,4 @@
       })
     </script>
   </body>
-</html>
\ No newline at end of file
+</html>

From 94a125357e67bdc44377c6460d7050b4bd88f495 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Wed, 13 Oct 2021 10:38:05 +0100
Subject: [PATCH 3/4] Avoid startsWith for browser compatibility

---
 src/ol/layer/MapboxVector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ol/layer/MapboxVector.js b/src/ol/layer/MapboxVector.js
index aabdb7614b..bb3f51691b 100644
--- a/src/ol/layer/MapboxVector.js
+++ b/src/ol/layer/MapboxVector.js
@@ -380,7 +380,7 @@ class MapboxVectorLayer extends VectorTileLayer {
 
     const source = this.getSource();
     if (
-      styleSource.url.startsWith('mapbox://') ||
+      styleSource.url.indexOf('mapbox://') === 0 ||
       styleSource.url.indexOf('{z}') !== -1
     ) {
       // Tile source url, handle it directly

From 2f713775d08932412e6585589d05d2ccb5206a4a Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Mon, 18 Oct 2021 16:11:39 +0100
Subject: [PATCH 4/4] Update polyfills

---
 README.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 98f4da52d5..1d5f0669b4 100644
--- a/README.md
+++ b/README.md
@@ -97,9 +97,10 @@ For older browsers and platforms (Internet Explorer, Android 4.x, iOS v12 and ol
 * [`fetch`](https://caniuse.com/fetch): Available from [polyfill.io](https://polyfill.io/).
 * [`requestAnimationFrame`](https://caniuse.com/requestanimationframe): Available from [polyfill.io](https://polyfill.io/).
 * [`element.prototype.classList` (`add`/`remove`)](https://caniuse.com/classlist): Available from [polyfill.io](https://polyfill.io/).
-* [`URL` API](https://caniuse.com/url): Available from [polyfill.io](https://polyfill.io/).
+* [`URL` API](https://caniuse.com/url): Available from [polyfill.io](https://polyfill.io/) or [core-js](https://cdnjs.com/libraries/core-js/).
 * [`TextDecoder`](https://caniuse.com/textencoder): Available from [polyfill.io](https://polyfill.io/).
-* [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/).
+* [`Number.isInteger`](https://caniuse.com/isInteger): Available from [polyfill.io](https://polyfill.io/) or [core-js](https://cdnjs.com/libraries/core-js/).
+* [`Reflect`](https://caniuse.com/mdn-javascript_builtins_reflect): Available from [core-js](https://cdnjs.com/libraries/core-js/).
 * [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.