WMTS Layer from Capabilities

This example uses OpenLayers v4.0.1. The latest is v.

#### WMTS Layer from Capabilities

Example of a WMTS source created from a WMTS capabilities document.

This example shows how to create the configuration for accessing a WMTS from a GetCapabilities response. The WMTS example shows how to create the configuration manually.

Related API documentation:

- ol.Map
,
- ol.View
,
- ol.format.WMTSCapabilities
,
- ol.layer.Tile
,
- ol.source.OSM
,
- ol.source.WMTS

Copy Edit
WMTS Layer from Capabilities Example of a WMTS source created from a WMTS capabilities document. var parser = new ol.format.WMTSCapabilities(); var map; fetch('https://openlayers.org/en/v4.0.1/examples/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'}); map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM(), opacity: 0.7 }), new ol.layer.Tile({ opacity: 1, source: new ol.source.WMTS(options) }) ], target: 'map', view: new ol.View({ center: [19412406.33, -5050500.21], zoom: 5 }) }); }); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>WMTS Layer from Capabilities</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <script>
          var parser = new ol.format.WMTSCapabilities();
          var map;

          fetch('https://openlayers.org/en/v4.0.1/examples/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'});

            map = new ol.Map({
              layers: [
                new ol.layer.Tile({
                  source: new ol.source.OSM(),
                  opacity: 0.7
                }),
                new ol.layer.Tile({
                  opacity: 1,
                  source: new ol.source.WMTS(options)
                })
              ],
              target: 'map',
              view: new ol.View({
                center: [19412406.33, -5050500.21],
                zoom: 5
              })
            });
          });
        </script>
      </body>
    </html>