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

Templetize examples starting with letter w

Browse Source
This commit is contained in:
Andreas Hocevar
2015-04-02 18:01:16 +02:00
parent 440832146e
commit de13706df9
15 changed files with 166 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
examples_src/wkt.html
View File

@@ -1,50 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WKT example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h4 id="title">WKT example</h4>
<p id="shortdesc">Example of using the WKT parser.</p>
<div id="docs">
<p>See the <a href="wkt.js" target="_blank">wkt.js source</a> to see how this is done.</p>
</div>
<div id="tags">WKT Well Known Text</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wkt" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WKT example"
shortdesc: "Example of using the WKT parser."
docs: >
Create features from geometries in WKT (Well Known Text) format.
tags: "wkt, well known text"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

4
examples_src/wms-capabilities.css Normal file
View File

@@ -0,0 +1,4 @@
.log-container {
height: 400px;
overflow: scroll;
}

62
examples_src/wms-capabilities.html
View File

@@ -1,49 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMS GetCapabilities parsing example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4 id="title">WMS GetCapabilities parsing example</h4>
<p id="shortdesc">Example of parsing a WMS GetCapabilities response.</p>
<div id="docs">
<p>See the <a href="wms-capabilities.js" target="_blank">wms-capabilities.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, capabilities, getcapabilities</div>
</div>
<div class="span8">
<pre id="log"></pre>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-capabilities" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WMS GetCapabilities parsing example"
shortdesc: "Example of parsing a WMS GetCapabilities response."
docs: >
This example shows the contents of the result object from parsing a WMS capabilities response.
tags: "wms, capabilities, getcapabilities"
---
<div class="row-fluid">
<div class="span12">
<pre class="log-container"><code id="log"></code></pre>
</div>
</div>

63
examples_src/wms-custom-proj.html
View File

@@ -1,50 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tiled WMS with custom projection example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Tiled WMS with custom projection example</h4>
<p id="shortdesc">Example of two tiled WMS layers (Pixelmap 1:1'000'000 and national parks) using the projection EPSG:21781.</p>
<div id="docs">
<p>See the <a href="wms-custom-proj.js" target="_blank">wms-custom-proj.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, tile, tilelayer, projection</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-custom-proj" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "Tiled WMS with custom projection example"
shortdesc: "Example of using custom coordinate transform functions."
docs: >
With `ol.proj.addCoordinateTransforms()`, custom coordinate transform functions can be added to configured projections.
tags: "wms, tile, tilelayer, projection"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

67
examples_src/wms-image-custom-proj.html
View File

@@ -1,54 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Single image WMS with Proj4js projection example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Single image WMS with Proj4js projection example</h4>
<p id="shortdesc">Example of two single image WMS layers.</p>
<div id="docs">
<p>Pixelmap 1:1'000'000 with National Parks overlay using the projection EPSG:21781.</p>
<p>See the <a href="wms-image-custom-proj.js" target="_blank">wms-image-custom-proj.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, single image, proj4js, projection</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
<script src="http://epsg.io/21781-1753.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-image-custom-proj" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "Single image WMS with Proj4js projection example"
shortdesc: "Example of integrating Proj4js for coordinate transforms."
docs: >
With transparent [Proj4js](http://proj4js.org/) integration, OpenLayers can transform coordinates between arbitrary projections.
tags: "wms, single image, proj4js, projection"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

64
examples_src/wms-image.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Single image WMS example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Single image WMS example</h4>
<p id="shortdesc">Example of a single image WMS layer.</p>
<div id="docs">
<p>See the <a href="wms-image.js" target="_blank">wms-image.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, image</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-image" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "Single image WMS example"
shortdesc: "Example of a single image WMS layer."
docs: >
WMS can be used as an Image layer, as shown here, or as a Tile layer, as shown in the [Tiled WMS example](wms-tiled.html) example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.
tags: "wms, image"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

64
examples_src/wms-no-proj.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMS without client projection example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">WMS without client projection example</h4>
<p id="shortdesc">Example of two WMS layers using the projection EPSG:21781, which is unknown to the client.</p>
<div id="docs">
<p>See the <a href="wms-no-proj.js" target="_blank">wms-no-proj.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, projection</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-no-proj" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WMS without client projection example"
shortdesc: "Example of two WMS layers using the projection EPSG:21781, which is unknown to the client."
docs: >
As long as no coordinate transformations are required, OpenLayers 3 works fine with projections that are only configured with a `code` and `units`.
tags: "wms, projection"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

62
examples_src/wms-tiled-wrap-180.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tiled WMS wrap 180° meridian example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
---
template: "example.html"
title: "Tiled WMS wrap 180° meridian example"
shortdesc: "Example of a tiled WMS layer that wraps across the 180° meridian."
docs: >
The `wrapX` option is set to `true` here so tiles will be wrapped around the x-axis.
tags: "wms, tile, dateline, wrap, 180"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Tiled WMS wrap 180° meridian example</h4>
<p id="shortdesc">Example of a tiled WMS layer that wraps across the 180° meridian.</p>
<div id="docs">
<p>See the <a href="wms-tiled-wrap-180.js" target="_blank">wms-tiled-wrap-180.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, tile, dateline, wrap, 180</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-tiled-wrap-180" type="text/javascript"></script>
</body>
</html>
</div>

64
examples_src/wms-tiled.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>Tiled WMS example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">Tiled WMS example</h4>
<p id="shortdesc">Example of a tiled WMS layer.</p>
<div id="docs">
<p>See the <a href="wms-tiled.js" target="_blank">wms-tiled.js source</a> to see how this is done.</p>
</div>
<div id="tags">wms, tile, tilelayer</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wms-tiled" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "Tiled WMS example"
shortdesc: "Example of a tiled WMS layer."
docs: >
WMS can be used as a Tile layer, as shown here, or as an Image layer, as shown in the [Single Image WMS example](wms-image.html) example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.
tags: "wms, tile, tilelayer"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

4
examples_src/wmts-capabilities.css Normal file
View File

@@ -0,0 +1,4 @@
.log-container {
height: 400px;
overflow: scroll;
}

62
examples_src/wmts-capabilities.html
View File

@@ -1,49 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMTS GetCapabilities parsing example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span4">
<h4 id="title">WMTS GetCapabilities parsing example</h4>
<p id="shortdesc">Example of parsing a WMTS GetCapabilities response.</p>
<div id="docs">
<p>See the <a href="wmts-capabilities.js" target="_blank">wmts-capabilities.js source</a> to see how this is done.</p>
</div>
<div id="tags">wmts, capabilities, getcapabilities</div>
</div>
<div class="span8">
<pre id="log"></pre>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wmts-capabilities" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WMTS GetCapabilities parsing example"
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>

3
examples_src/wmts-hidpi.css Normal file
View File

@@ -0,0 +1,3 @@
.map {
background: white;
}

69
examples_src/wmts-hidpi.html
View File

@@ -1,56 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMTS HiDPI example</title>
<style>
.map {
background: white;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">WMTS HiDPI example</h4>
<p id="shortdesc">Example of a WMTS based HiDPI layer.</p>
<div id="docs">
<p>See the <a href="wmts-hidpi.js" target="_blank">wmts-hidpi.js source</a> to see how this is done.</p>
</div>
<div id="tags">hidpi, retina, wmts</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wmts-hidpi" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WMTS HiDPI example"
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>

64
examples_src/wmts-layer-from-capabilities.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMTS Layer example from capabilities </title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">WMTS Capabilities example</h4>
<p id="shortdesc">Example of a WMTS source created from a WMTS capabilities document.</p>
<div id="docs">
<p>See the <a href="wmts-layer-from-capabilities.js" target="_blank">wmts-layer-from-capabilities.js source</a> to see how this is done.</p>
</div>
<div id="tags">wmts, capabilities, getcapabilities</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wmts-layer-from-capabilities" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WMTS Layer from capabilities example"
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.
tags: "wmts, capabilities, getcapabilities"
---
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>

64
examples_src/wmts.html
View File

@@ -1,51 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<link rel="stylesheet" href="../css/ol.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
<title>WMTS example</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div id="map" class="map"></div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h4 id="title">WMTS example</h4>
<p id="shortdesc">Example of a WMTS source.</p>
<div id="docs">
<p>See the <a href="wmts.js" target="_blank">wmts.js source</a> to see how this is done.</p>
</div>
<div id="tags">wmts</div>
</div>
</div>
</div>
<script src="../resources/jquery.min.js" type="text/javascript"></script>
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
<script src="loader.js?id=wmts" type="text/javascript"></script>
</body>
</html>
---
template: "example.html"
title: "WMTS example"
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>