---
title: "How to use the OGC WMTS service in your map with OpenLayers | Openlayers"
description: "Use OGC WMTS services in OpenLayers web maps."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# How to use the OGC WMTS service in your map with OpenLayers
This tutorial shows how to add an OGC WMTS from MapTiler to your web map using OpenLayers. The easiest way to add a WMTS to a map is to get the configuration information directly from the GetCapabilities response.
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
Display a WMTS map
© MapTiler ',
'© OpenStreetMap contributors '
]
});
```
### Complete source code
```html
Display a map
```
1. Import the new modules needed to add the new functionality.
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js';
import Attribution from 'ol/control/Attribution.js';
import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
```
2. Create the WMTS capabilities parser.
```js
const parser = new WMTSCapabilities();
```
1. Get the WMTS Capabilities information and read it with the parser.
```js
const parser = new WMTSCapabilities();
fetch(`https://api.maptiler.com/maps/streets-v4/WMTSCapabilities.xml?key=${key}`)
.then(function (response) {
return response.text();
})
.then(function (text) {
const result = parser.read(text);
const options = optionsFromCapabilities(result, {
layer: 'maps/streets-v4',
matrixSet: 'GoogleMapsCompatible512-z0-22'
});
const source = new TileJSON({
url: `https://api.maptiler.com/maps/streets-v4/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
const map = new Map({
layers: [
new Tile({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([16.62662018, 49.2125578]), // starting position [lng, lat]
zoom: 14 // starting zoom
})
});
});
```
1. Change the `source` to use the WMTS
```js
const source = new WMTS({...options,
attributions: [
'© MapTiler ',
'© OpenStreetMap contributors '
]
});
```
### Complete source code
```bash
npm install --save ol
```
#### main.js
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS.js';
import Attribution from 'ol/control/Attribution.js';
import WMTSCapabilities from 'ol/format/WMTSCapabilities.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
import 'ol/ol.css';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const attribution = new Attribution({
collapsible: false,
});
const parser = new WMTSCapabilities();
fetch(`https://api.maptiler.com/maps/streets-v4/WMTSCapabilities.xml?key=${key}`)
.then(function (response) {
return response.text();
})
.then(function (text) {
const result = parser.read(text);
const options = optionsFromCapabilities(result, {
layer: 'maps/streets-v4',
matrixSet: 'GoogleMapsCompatible512-z0-22'
});
const source = new WMTS({...options,
attributions: [
'© MapTiler ',
'© OpenStreetMap contributors '
]
});
const map = new Map({
layers: [
new TileLayer({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([16.62662018, 49.2125578]),
zoom: 12
})
});
});
```
#### index.html
```html
How to use the OGC WMTS service in your map with OpenLayers | NPM example
```
#### style.css
```css
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
```
Warning
The WMTS functionality requires at least a FLEX plan subscription. For more information, read about the different [MapTiler plans](https://www.maptiler.com/cloud/pricing/).
## Learn more
If you want to learn more about OGC WMTS check out the [WMTS article](https://docs.maptiler.com/guides/maps-apis/maps-platform/wmts).
## Related examples
### [Raster tiles](https://docs.maptiler.com/openlayers/examples/raster-tiles-in-openlayers/)
Tutorials
Display raster tiles in OpenLayers via TileJSON or XYZ.
### [Custom Map](https://docs.maptiler.com/openlayers/examples/custom-map/)
Tutorials
Display custom MapTiler maps on webpages using OpenLayers.
