Edit

IGN WMTS

Demonstrates displaying IGN (France) WMTS layers.

In this example an IGN WMTS layer is displayed. For more information on IGN's WMTS service see the IGN Géoportail API web page and Descriptif technique des web services du Géoportail (french).

Copy 
index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>IGN WMTS</title>
    <!-- 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>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>
Copy 
index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import {getWidth} from 'ol/extent';
import TileLayer from 'ol/layer/Tile';
import {fromLonLat, get as getProjection} from 'ol/proj';
import WMTS from 'ol/source/WMTS';
import WMTSTileGrid from 'ol/tilegrid/WMTS';


var map = new Map({
  target: 'map',
  view: new View({
    zoom: 5,
    center: fromLonLat([5, 45])
  })
});

var resolutions = [];
var matrixIds = [];
var proj3857 = getProjection('EPSG:3857');
var maxResolution = getWidth(proj3857.getExtent()) / 256;

for (var i = 0; i < 18; i++) {
  matrixIds[i] = i.toString();
  resolutions[i] = maxResolution / Math.pow(2, i);
}

var tileGrid = new WMTSTileGrid({
  origin: [-20037508, 20037508],
  resolutions: resolutions,
  matrixIds: matrixIds
});

// For more information about the IGN API key see
// https://geoservices.ign.fr/blog/2017/06/28/geoportail_sans_compte.html

var ign_source = new WMTS({
  url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
  layer: 'GEOGRAPHICALGRIDSYSTEMS.MAPS',
  matrixSet: 'PM',
  format: 'image/jpeg',
  projection: 'EPSG:3857',
  tileGrid: tileGrid,
  style: 'normal',
  attributions: '<a href="http://www.geoportail.fr/" target="_blank">' +
        '<img src="https://api.ign.fr/geoportail/api/js/latest/' +
        'theme/geoportal/img/logo_gp.gif"></a>'
});

var ign = new TileLayer({
  source: ign_source
});

map.addLayer(ign);
Copy 
package.json{
  "name": "wmts-ign",
  "dependencies": {
    "ol": "6.1.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}