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).

<!DOCTYPE html>
    <title>IGN WMTS</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/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.6.4/build/ol.js"></script>
    <div id="map" class="map"></div>
      var map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
        view: new ol.View({
          zoom: 5,
          center: ol.proj.transform([5, 45], 'EPSG:4326', 'EPSG:3857')

      var resolutions = [];
      var matrixIds = [];
      var proj3857 = ol.proj.get('EPSG:3857');
      var maxResolution = ol.extent.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 ol.tilegrid.WMTS({
        origin: [-20037508, 20037508],
        resolutions: resolutions,
        matrixIds: matrixIds

      // API key valid for 'openlayers.org' and 'localhost'.
      // Expiration date is 06/29/2018.
      var key = '2mqbg0z6cx7ube8gsou10nrt';

      var ign_source = new ol.source.WMTS({
        url: 'https://wxs.ign.fr/' + key + '/wmts',
        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/' +

      var ign = new ol.layer.Tile({
        source: ign_source