From 28818e5b4e6d596e84f09379f04c304413dc3d09 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Mon, 18 Nov 2019 21:03:29 +0000
Subject: [PATCH] Replace Bing layers with MapTiler

---
 examples/feature-move-animation.html          |  6 ++---
 examples/feature-move-animation.js            | 13 +++++++----
 .../full-screen-drag-rotate-and-zoom.html     |  6 ++---
 examples/full-screen-drag-rotate-and-zoom.js  | 14 +++++++----
 examples/full-screen.html                     |  6 ++---
 examples/full-screen.js                       | 13 +++++++----
 examples/gpx.html                             |  6 ++---
 examples/gpx.js                               | 13 +++++++----
 examples/layer-spy.html                       |  6 ++---
 examples/layer-spy.js                         | 19 +++++++++++----
 examples/layer-swipe.html                     |  6 ++---
 examples/layer-swipe.js                       | 22 +++++++++++-------
 examples/side-by-side.html                    |  6 ++---
 examples/side-by-side.js                      | 23 +++++++++++--------
 examples/zoom-constrained.html                |  6 ++---
 examples/zoom-constrained.js                  | 12 ++++++----
 16 files changed, 111 insertions(+), 66 deletions(-)

diff --git a/examples/feature-move-animation.html b/examples/feature-move-animation.html
index 354450cfa5..d0df54027e 100644
--- a/examples/feature-move-animation.html
+++ b/examples/feature-move-animation.html
@@ -6,10 +6,10 @@ docs: >
   This example shows how to use <b>postrender</b> events and a <b>vector context</b> to
   animate a marker feature along a line. In this example an encoded polyline
   is being used.
-tags: "animation, feature, postrender, polyline"
+tags: "animation, feature, postrender, polyline, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <label for="speed">
diff --git a/examples/feature-move-animation.js b/examples/feature-move-animation.js
index 5a002c5009..e3c38fdc9a 100644
--- a/examples/feature-move-animation.js
+++ b/examples/feature-move-animation.js
@@ -4,7 +4,7 @@ import View from '../src/ol/View.js';
 import Polyline from '../src/ol/format/Polyline.js';
 import Point from '../src/ol/geom/Point.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js';
 import {getVectorContext} from '../src/ol/render.js';
@@ -121,6 +121,10 @@ const vectorLayer = new VectorLayer({
   }
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const center = [-5639523.95, -3501274.52];
 const map = new Map({
   target: document.getElementById('map'),
@@ -132,9 +136,10 @@ const map = new Map({
   }),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        imagerySet: 'AerialWithLabelsOnDemand',
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,
+        tileSize: 512
       })
     }),
     vectorLayer
diff --git a/examples/full-screen-drag-rotate-and-zoom.html b/examples/full-screen-drag-rotate-and-zoom.html
index 55c5dfab8d..cdf9b0e004 100644
--- a/examples/full-screen-drag-rotate-and-zoom.html
+++ b/examples/full-screen-drag-rotate-and-zoom.html
@@ -5,9 +5,9 @@ shortdesc: Example of drag rotate and zoom control with full screen effect.
 docs: >
   <p>Hold down <code>Shift+Drag</code> to rotate and zoom.  Click the button in the top right corner to go full screen.  Then do the <code>Shift+Drag</code> thing again.</p>
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
-tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
+tags: "full-screen, drag, rotate, zoom, xyz, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
diff --git a/examples/full-screen-drag-rotate-and-zoom.js b/examples/full-screen-drag-rotate-and-zoom.js
index 4bf64ec10c..b393feac6f 100644
--- a/examples/full-screen-drag-rotate-and-zoom.js
+++ b/examples/full-screen-drag-rotate-and-zoom.js
@@ -3,9 +3,13 @@ import View from '../src/ol/View.js';
 import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
 import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   controls: defaultControls().extend([
     new FullScreen()
@@ -15,13 +19,13 @@ const map = new Map({
   ]),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'Aerial'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],
-  // Use the canvas renderer because it's currently the fastest
   target: 'map',
   view: new View({
     center: [-33519607, 5616436],
diff --git a/examples/full-screen.html b/examples/full-screen.html
index a0be9802ea..a68fddceac 100644
--- a/examples/full-screen.html
+++ b/examples/full-screen.html
@@ -5,9 +5,9 @@ shortdesc: Example of a full screen control.
 docs: >
   <p>Click the control in the top right corner to go full screen.  Click it again to exit full screen.</p>
   <p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
-tags: "full-screen, bing, bing-maps"
+tags: "full-screen, xyz, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
diff --git a/examples/full-screen.js b/examples/full-screen.js
index 0cea3790b3..d11a409817 100644
--- a/examples/full-screen.js
+++ b/examples/full-screen.js
@@ -2,7 +2,7 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 
 const view = new View({
@@ -10,15 +10,20 @@ const view = new View({
   zoom: 14
 });
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   controls: defaultControls().extend([
     new FullScreen()
   ]),
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'Aerial'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],
diff --git a/examples/gpx.html b/examples/gpx.html
index 5b26160ca1..9720bddcb7 100644
--- a/examples/gpx.html
+++ b/examples/gpx.html
@@ -4,10 +4,10 @@ title: GPX Data
 shortdesc: Example of using the GPX source.
 docs: >
   Example of using the GPX source.
-tags: "GPX"
+tags: "GPX, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>
diff --git a/examples/gpx.js b/examples/gpx.js
index 98b8c05c5a..7570048b55 100644
--- a/examples/gpx.js
+++ b/examples/gpx.js
@@ -2,14 +2,19 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import GPX from '../src/ol/format/GPX.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 import VectorSource from '../src/ol/source/Vector.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const raster = new TileLayer({
-  source: new BingMaps({
-    imagerySet: 'Aerial',
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 
diff --git a/examples/layer-spy.html b/examples/layer-spy.html
index 098bd87ad2..79a70a30a8 100644
--- a/examples/layer-spy.html
+++ b/examples/layer-spy.html
@@ -8,9 +8,9 @@ docs: >
   In this example, the <code>prerender</code> listener sets a clipping mask around the most
   recent mouse position, giving you a spyglass effect for viewing one layer over another.</p>
   <p>Move around the map to see the effect.  Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
-tags: "spy, image manipulation"
+tags: "spy, image manipulation, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
diff --git a/examples/layer-spy.js b/examples/layer-spy.js
index d86110fdc4..d7d27bc0a8 100644
--- a/examples/layer-spy.js
+++ b/examples/layer-spy.js
@@ -2,16 +2,27 @@ import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
-const key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const roads = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'RoadOnDemand'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+    tileSize: 512,
+    maxZoom: 22
+  })
 });
 
 const imagery = new TileLayer({
-  source: new BingMaps({key: key, imagerySet: 'Aerial'})
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
+  })
 });
 
 const container = document.getElementById('map');
diff --git a/examples/layer-swipe.html b/examples/layer-swipe.html
index 5907aaf95f..ab71629096 100644
--- a/examples/layer-swipe.html
+++ b/examples/layer-swipe.html
@@ -4,10 +4,10 @@ title: Layer Swipe
 shortdesc: Example of a Layer swipe map.
 docs: >
   Example of a Layer swipe map.
-tags: "swipe, openstreetmap"
+tags: "swipe, openstreetmap, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <input id="swipe" type="range" style="width: 100%">
diff --git a/examples/layer-swipe.js b/examples/layer-swipe.js
index 278de07d70..c39189391c 100644
--- a/examples/layer-swipe.js
+++ b/examples/layer-swipe.js
@@ -1,21 +1,27 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
 import OSM from '../src/ol/source/OSM.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 const osm = new TileLayer({
   source: new OSM()
 });
-const bing = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial'
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
+const aerial = new TileLayer({
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 
 const map = new Map({
-  layers: [osm, bing],
+  layers: [osm, aerial],
   target: 'map',
   view: new View({
     center: [0, 0],
@@ -25,7 +31,7 @@ const map = new Map({
 
 const swipe = document.getElementById('swipe');
 
-bing.on('prerender', function(event) {
+aerial.on('prerender', function(event) {
   const ctx = event.context;
   const width = ctx.canvas.width * (swipe.value / 100);
 
@@ -35,7 +41,7 @@ bing.on('prerender', function(event) {
   ctx.clip();
 });
 
-bing.on('postrender', function(event) {
+aerial.on('postrender', function(event) {
   const ctx = event.context;
   ctx.restore();
 });
diff --git a/examples/side-by-side.html b/examples/side-by-side.html
index f5605cf404..9ddf348827 100644
--- a/examples/side-by-side.html
+++ b/examples/side-by-side.html
@@ -4,10 +4,10 @@ title: Shared Views
 shortdesc: Two maps share view properties
 docs: >
   Two maps (one Road, one Aerial) share the same center, resolution and rotation.
-tags: "side-by-side, bing, bing-maps"
+tags: "side-by-side, xyz, maptiler"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div class="wrapper">
   <div class="half">
diff --git a/examples/side-by-side.js b/examples/side-by-side.js
index 31596fee95..3c8883e3e1 100644
--- a/examples/side-by-side.js
+++ b/examples/side-by-side.js
@@ -1,21 +1,26 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
+
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
 
 const roadLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'RoadOnDemand',
-    maxZoom: 19
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
+    tileSize: 512,
+    maxZoom: 22
   })
 });
 
 const aerialLayer = new TileLayer({
-  source: new BingMaps({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-    imagerySet: 'Aerial',
-    maxZoom: 19
+  source: new XYZ({
+    attributions: attributions,
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 
diff --git a/examples/zoom-constrained.html b/examples/zoom-constrained.html
index 091d56c107..71d9e32094 100644
--- a/examples/zoom-constrained.html
+++ b/examples/zoom-constrained.html
@@ -4,9 +4,9 @@ title: Constrained Zoom
 shortdesc: Example of a zoom constrained view.
 docs: >
   This map has a view that is constrained between zoom levels 9 and 13.  This is done using the `minZoom` and `maxZoom` view options.
-tags: "bing, zoom, minZoom, maxZoom"
+tags: "maptiler, zoom, minZoom, maxZoom"
 cloak:
-  - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
diff --git a/examples/zoom-constrained.js b/examples/zoom-constrained.js
index fbb628ed83..dab35e096e 100644
--- a/examples/zoom-constrained.js
+++ b/examples/zoom-constrained.js
@@ -1,16 +1,20 @@
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
 import TileLayer from '../src/ol/layer/Tile.js';
-import BingMaps from '../src/ol/source/BingMaps.js';
+import XYZ from '../src/ol/source/XYZ.js';
 
 
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
+  '<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
+
 const map = new Map({
   target: 'map',
   layers: [
     new TileLayer({
-      source: new BingMaps({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
-        imagerySet: 'Aerial'
+      source: new XYZ({
+        attributions: attributions,
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key
       })
     })
   ],