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

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      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',
        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 ol.layer.Tile({
        source: ign_source
      });

      map.addLayer(ign);
    </script>
  </body>
</html>