ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Convert WMTS examples to strapless template

Browse Source
This commit is contained in:
Tim Schaub
2015-11-17 10:02:10 -07:00
parent a94a00de1d
commit c463321643
10 changed files with 40 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/wmts-capabilities.html
View File

@@ -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"
---
<div class="row-fluid">
<div class="span12">
<pre class="log-container"><code id="log"></code></pre>
</div>
</div>
<pre class="log-container"><code id="log"></code></pre>

8
examples/wmts-capabilities.js
View File

@@ -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);
});

20
examples/wmts-dimensions.html
View File

@@ -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 <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="http://www.cgiar-csi.org/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
tags: "wmts, parameter, transition"
---
<div class="row-fluid">
<div class="span6">
<div id="map" class="map"></div>
</div>
<div class="span6 offset3">
Sea-level:
<input id="slider" type="range" value="10" step="0.25" max="100" min="-1" />
<span id="theinfo"></span>
</div>
</div>
<div id="map" class="map"></div>
<label>
Sea-level
<input id="slider" type="range" value="10" max="100" min="-1">
</label>
<span id="theinfo"></span>

13
examples/wmts-dimensions.js
View File

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

10
examples/wmts-hidpi.html
View File

@@ -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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

6
examples/wmts-hidpi.js
View File

@@ -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',

10
examples/wmts-ign.html
View File

@@ -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</a> (french).
tags: "french, ign, geoportail, wmts"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

12
examples/wmts-layer-from-capabilities.html
View File

@@ -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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>

6
examples/wmts-layer-from-capabilities.js
View File

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

10
examples/wmts.html
View File

@@ -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"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div id="map" class="map"></div>