From 84ae3d16a615a8bfa8db1301bb472ac1ed409df8 Mon Sep 17 00:00:00 2001 From: Petr Sloup Date: Wed, 22 Jul 2020 09:14:52 +0200 Subject: [PATCH] Replace/remove usage of tileserver.maptiler.com --- examples/layer-zoom-limits.html | 3 +++ examples/layer-zoom-limits.js | 15 ++++++--------- examples/reprojection.html | 1 - examples/reprojection.js | 14 +------------- examples/xyz-retina.html | 5 ++++- examples/xyz-retina.js | 20 +++++++++----------- 6 files changed, 23 insertions(+), 35 deletions(-) diff --git a/examples/layer-zoom-limits.html b/examples/layer-zoom-limits.html index 9727e34383..2524312545 100644 --- a/examples/layer-zoom-limits.html +++ b/examples/layer-zoom-limits.html @@ -9,5 +9,8 @@ docs: > be used to set limits. This example shows an OSM layer at zoom levels 14 and lower and a USGS layer at zoom levels higher than 14. tags: "minZoom, maxZoom, layer" +cloak: + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---
diff --git a/examples/layer-zoom-limits.js b/examples/layer-zoom-limits.js index 04eb24c786..2111f48831 100644 --- a/examples/layer-zoom-limits.js +++ b/examples/layer-zoom-limits.js @@ -1,11 +1,11 @@ import Map from '../src/ol/Map.js'; import OSM from '../src/ol/source/OSM.js'; +import TileJSON from '../src/ol/source/TileJSON.js'; import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; -import XYZ from '../src/ol/source/XYZ.js'; -import {fromLonLat, transformExtent} from '../src/ol/proj.js'; +import {fromLonLat} from '../src/ol/proj.js'; -const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062]; +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; const map = new Map({ target: 'map', @@ -16,11 +16,9 @@ const map = new Map({ }), new TileLayer({ minZoom: 14, // visible at zoom levels above 14 - source: new XYZ({ - attributions: - 'Tiles © USGS, rendered with ' + - 'MapTiler', - url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png', + source: new TileJSON({ + url: 'https://api.maptiler.com/maps/outdoor/tiles.json?key=' + key, + tileSize: 512, }), }), ], @@ -28,7 +26,6 @@ const map = new Map({ center: fromLonLat([-112.18688965, 36.057944835]), zoom: 15, maxZoom: 18, - extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'), constrainOnlyCenter: true, }), }); diff --git a/examples/reprojection.html b/examples/reprojection.html index dee4de0364..5ad6a2da47 100644 --- a/examples/reprojection.html +++ b/examples/reprojection.html @@ -21,7 +21,6 @@ tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi" - diff --git a/examples/reprojection.js b/examples/reprojection.js index 10146f47fc..d6d2d77acf 100644 --- a/examples/reprojection.js +++ b/examples/reprojection.js @@ -5,7 +5,7 @@ import View from '../src/ol/View.js'; import WMTS, {optionsFromCapabilities} from '../src/ol/source/WMTS.js'; import WMTSCapabilities from '../src/ol/format/WMTSCapabilities.js'; import proj4 from 'proj4'; -import {OSM, TileImage, TileWMS, XYZ} from '../src/ol/source.js'; +import {OSM, TileImage, TileWMS} from '../src/ol/source.js'; import {getCenter, getWidth} from '../src/ol/extent.js'; import {get as getProjection} from '../src/ol/proj.js'; import {register} from '../src/ol/proj/proj4.js'; @@ -146,18 +146,6 @@ fetch(urlB) layers['bng'].setSource(new WMTS(options)); }); -layers['grandcanyon'] = new TileLayer({ - source: new XYZ({ - url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png', - crossOrigin: '', - tilePixelRatio: 2, - maxZoom: 15, - attributions: - 'Tiles © USGS, rendered with ' + - 'MapTiler', - }), -}); - const startResolution = getWidth(getProjection('EPSG:3857').getExtent()) / 256; const resolutions = new Array(22); for (let i = 0, ii = resolutions.length; i < ii; ++i) { diff --git a/examples/xyz-retina.html b/examples/xyz-retina.html index b0c613b0ba..44ccb6139f 100644 --- a/examples/xyz-retina.html +++ b/examples/xyz-retina.html @@ -3,7 +3,10 @@ layout: example.html title: XYZ Retina Tiles shortdesc: Example of Retina / HiDPI mercator tiles (512x512px) available as XYZ. docs: > - The XYZ source accepts a `tilePixelRatio` option. The tiles were prepared from a GeoTIFF file with [MapTiler](http://www.maptiler.com/). + The XYZ source accepts a `tilePixelRatio` option. tags: "retina, hidpi, xyz, maptiler, @2x, devicePixelRatio" +cloak: + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---
diff --git a/examples/xyz-retina.js b/examples/xyz-retina.js index 05a2196f0b..119e46ca19 100644 --- a/examples/xyz-retina.js +++ b/examples/xyz-retina.js @@ -3,11 +3,12 @@ import OSM from '../src/ol/source/OSM.js'; import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; -import {transform, transformExtent} from '../src/ol/proj.js'; +import {transform} from '../src/ol/proj.js'; -const mapMinZoom = 1; -const mapMaxZoom = 15; -const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062]; +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = + '© MapTiler ' + + '© OpenStreetMap contributors'; const map = new Map({ target: 'map', @@ -16,15 +17,12 @@ const map = new Map({ source: new OSM(), }), new TileLayer({ - extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'), source: new XYZ({ - attributions: - 'Tiles © USGS, rendered with ' + - 'MapTiler', - url: 'https://tileserver.maptiler.com/grandcanyon@2x/{z}/{x}/{y}.png', + attributions: attributions, + url: + 'https://api.maptiler.com/maps/outdoor/256/{z}/{x}/{y}@2x.png?key=' + + key, tilePixelRatio: 2, // THIS IS IMPORTANT - minZoom: mapMinZoom, - maxZoom: mapMaxZoom, }), }), ],