IGN WMTS

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

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

Related API documentation:

- ol.Attribution
,
- ol.Map
,
- ol.View
,
- ol.control
,
- ol.extent
,
- ol.layer.Tile
,
- ol.proj
,
- ol.source.WMTS
,
- ol.tilegrid.WMTS

Copy Edit
IGN WMTS Demonstrates displaying IGN (France) WMTS layers. var map = new ol.Map({ target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.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: [new ol.Attribution({ html: '<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); <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>IGN WMTS</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 map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({
              attributionOptions: /** @type {olx.control.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: [new ol.Attribution({
              html: '<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>