diff --git a/examples/wmts-capabilities.html b/examples/wmts-capabilities.html index 8264038b6b..5d80fc3784 100644 --- a/examples/wmts-capabilities.html +++ b/examples/wmts-capabilities.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: WMTS GetCapabilities parsing example +layout: strapless.html +title: WMTS Capabilities Parsing shortdesc: Example of parsing a WMTS GetCapabilities response. docs: > This example shows the contents of the result object from parsing a WMTS capabilities response. tags: "wmts, capabilities, getcapabilities" --- -
-
-
-
-
+
diff --git a/examples/wmts-capabilities.js b/examples/wmts-capabilities.js index 61f8820976..aebfeabb90 100644 --- a/examples/wmts-capabilities.js +++ b/examples/wmts-capabilities.js @@ -2,7 +2,9 @@ goog.require('ol.format.WMTSCapabilities'); var parser = new ol.format.WMTSCapabilities(); -$.ajax('data/WMTSCapabilities.xml').then(function(response) { - var result = parser.read(response); - $('#log').html(window.JSON.stringify(result, null, 2)); +fetch('data/WMTSCapabilities.xml').then(function(response) { + return response.text(); +}).then(function(text) { + var result = parser.read(text); + document.getElementById('log').innerText = JSON.stringify(result, null, 2); }); diff --git a/examples/wmts-dimensions.html b/examples/wmts-dimensions.html index abe64bc378..74b26c8d1b 100644 --- a/examples/wmts-dimensions.html +++ b/examples/wmts-dimensions.html @@ -1,18 +1,14 @@ --- -layout: example.html -title: Smooth WMTS tile transition example +layout: strapless.html +title: WMTS Tile Transitions shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer. docs: > Demonstrates smooth reloading of layers when changing a dimension continously. The demonstration layer is a global sea-level computation (flooding computation from SCALGO, underlying data from CGIAR-CSI SRTM) where cells that are flooded if the sea-level rises to more than x m are colored blue. The user selects the sea-level dimension using a slider. tags: "wmts, parameter, transition" --- -
-
-
-
-
- Sea-level: - - -
-
+
+ + diff --git a/examples/wmts-dimensions.js b/examples/wmts-dimensions.js index 042f19a469..9f5a62b711 100644 --- a/examples/wmts-dimensions.js +++ b/examples/wmts-dimensions.js @@ -1,9 +1,6 @@ goog.require('ol.Attribution'); goog.require('ol.Map'); goog.require('ol.View'); -goog.require('ol.control'); -goog.require('ol.control.Attribution'); -goog.require('ol.control.Zoom'); goog.require('ol.extent'); goog.require('ol.layer.Tile'); goog.require('ol.proj'); @@ -55,13 +52,9 @@ var map = new ol.Map({ target: 'map', view: new ol.View({ projection: projection, - center: [-3052589, 3541786], - zoom: 3 + center: [-9871995, 3566245], + zoom: 6 }), - controls: [ - new ol.control.Zoom(), - new ol.control.Attribution() - ], layers: [ new ol.layer.Tile({ source: new ol.source.OSM() @@ -75,7 +68,7 @@ var map = new ol.Map({ var updateSourceDimension = function(source, sliderVal) { source.updateDimensions({'threshold': sliderVal}); - document.getElementById('theinfo').innerHTML = sliderVal + ' meters.'; + document.getElementById('theinfo').innerHTML = sliderVal + ' meters'; }; updateSourceDimension(wmtsSource, 10); diff --git a/examples/wmts-hidpi.html b/examples/wmts-hidpi.html index bcc4d23cd9..137d4d1a80 100644 --- a/examples/wmts-hidpi.html +++ b/examples/wmts-hidpi.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: WMTS HiDPI example +layout: strapless.html +title: High DPI WMTS shortdesc: Example of a WMTS based HiDPI layer. docs: > The WMTS source has a `tilePixelRatio` option. A HiDPI capable WMTS could provide tiles with 512x512 pixel tiles, but use them in a 256x256 pixel tile grid. In this case `tilePixelRatio` needs to be set to `2`. tags: "hidpi, retina, wmts" --- -
-
-
-
-
+
diff --git a/examples/wmts-hidpi.js b/examples/wmts-hidpi.js index 990ca870d5..6b7a4e72e6 100644 --- a/examples/wmts-hidpi.js +++ b/examples/wmts-hidpi.js @@ -23,8 +23,10 @@ var map = new ol.Map({ }) }); -$.ajax(capabilitiesUrl).then(function(response) { - var result = new ol.format.WMTSCapabilities().read(response); +fetch(capabilitiesUrl).then(function(response) { + return response.text(); +}).then(function(text) { + var result = new ol.format.WMTSCapabilities().read(text); var options = ol.source.WMTS.optionsFromCapabilities(result, { layer: layer, matrixSet: 'google3857', diff --git a/examples/wmts-ign.html b/examples/wmts-ign.html index ac96233a36..cf8bdf6fef 100644 --- a/examples/wmts-ign.html +++ b/examples/wmts-ign.html @@ -1,6 +1,6 @@ --- -layout: example.html -title: IGN WMTS example +layout: strapless.html +title: IGN WMTS shortdesc: Demonstrates displaying IGN (France) WMTS layers. docs: > In this example an IGN WMTS layer is displayed. @@ -11,8 +11,4 @@ docs: > Descriptif technique des web services du Géoportail (french). tags: "french, ign, geoportail, wmts" --- -
-
-
-
-
+
diff --git a/examples/wmts-layer-from-capabilities.html b/examples/wmts-layer-from-capabilities.html index a4bd87d631..67367035a6 100644 --- a/examples/wmts-layer-from-capabilities.html +++ b/examples/wmts-layer-from-capabilities.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: WMTS Layer from capabilities example +layout: strapless.html +title: WMTS Layer from Capabilities shortdesc: Example of a WMTS source created from a WMTS capabilities document. docs: > - This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response.. The [WMTS example](wmts.html) shows how to create the configuration manually. + This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response. The [WMTS example](wmts.html) shows how to create the configuration manually. tags: "wmts, capabilities, getcapabilities" --- -
-
-
-
-
+
diff --git a/examples/wmts-layer-from-capabilities.js b/examples/wmts-layer-from-capabilities.js index c84850f426..3a1852f0e2 100644 --- a/examples/wmts-layer-from-capabilities.js +++ b/examples/wmts-layer-from-capabilities.js @@ -8,8 +8,10 @@ goog.require('ol.source.WMTS'); var parser = new ol.format.WMTSCapabilities(); var map; -$.ajax('data/WMTSCapabilities.xml').then(function(response) { - var result = parser.read(response); +fetch('data/WMTSCapabilities.xml').then(function(response) { + return response.text(); +}).then(function(text) { + var result = parser.read(text); var options = ol.source.WMTS.optionsFromCapabilities(result, {layer: 'layer-7328', matrixSet: 'EPSG:3857'}); diff --git a/examples/wmts.html b/examples/wmts.html index 81a8e9714a..48647f6ddf 100644 --- a/examples/wmts.html +++ b/examples/wmts.html @@ -1,13 +1,9 @@ --- -layout: example.html -title: WMTS example +layout: strapless.html +title: WMTS shortdesc: Example of a WMTS source. docs: > This example shows how to manually create the configuration for accessing a WMTS. The [WMTS Layer from capabilities example](wmts-layer-from-capabilities.html) shows how to create the configuration from a GetCapabilities response. tags: "wmts" --- -
-
-
-
-
+