Replace Bing layers with MapTiler

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <label for="speed">

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({
+      source: new XYZ({
-        imagerySet: 'AerialWithLabelsOnDemand',
+        attributions: attributions,
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+        url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,
+        tileSize: 512
       })
     }),
     vectorLayer

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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({
+      source: new XYZ({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+        attributions: attributions,
-        imagerySet: 'Aerial'
+        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],

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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({
+      source: new XYZ({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+        attributions: attributions,
-        imagerySet: 'Aerial'
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+        maxZoom: 20
       })
     })
   ],

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <div id="info">&nbsp;</div>

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({
+  source: new XYZ({
-    imagerySet: 'Aerial',
+    attributions: attributions,
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
+    maxZoom: 20
   })
 });
 

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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');

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    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%">

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({
+const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
-    imagerySet: 'Aerial'
+  '<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();
 });

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div class="wrapper">
   <div class="half">

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({
+  source: new XYZ({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    attributions: attributions,
-    imagerySet: 'RoadOnDemand',
+    url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
-    maxZoom: 19
+    tileSize: 512,
+    maxZoom: 22
   })
 });
 
 const aerialLayer = new TileLayer({
-  source: new BingMaps({
+  source: new XYZ({
-    key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+    attributions: attributions,
-    imagerySet: 'Aerial',
+    url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
-    maxZoom: 19
+    maxZoom: 20
   })
 });
 

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
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
-    value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>

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({
+      source: new XYZ({
-        key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
+        attributions: attributions,
-        imagerySet: 'Aerial'
+        url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key
       })
     })
   ],