Cercalia add a new base layer Mapa topográfico IGN

Copy
<!DOCTYPE html>
<html>
  <head>
    <title>Cercalia add a new base layer Mapa topográfico IGN</title>
    <script src="https://maps.cercalia.com/maps/loader.js?key=YOUR_API_KEY&v=5&lang=en&theme=1976d2"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var map;

      function createLayerIGN() {

        var layer = new ol.layer.Tile({
          source: new ol.source.XYZ({
            url: 'http://www.ign.es/wmts/mapa-raster?' +
              'layer=MTN&' +
              'style=default&' +
              'tilematrixset=GoogleMapsCompatible&' +
              'Service=WMTS&' +
              'Request=GetTile&Version=1.0.0&' +
              'Format=image%2Fjpeg&' +
              'TileMatrix={z}&' +
              'TileCol={x}&' +
              'TileRow={y}'
          })
        });

        var baseLayer = new cercalia.BaseLayer({
          name: 'ign',
          label: 'IGN',
          layer: layer,
          projectionCode: 'EPSG:3857',
          logo: '<a style="color:#fff;" href="http://www.scne.es" target="_blank">BTN25 2014-2015 CC-BY 4.0 <b>ign.es</b></a>'
        });

        return baseLayer;
      }


      document.addEventListener('cercalia-ready', function() {
        map = new cercalia.Map({
          target: 'map'
        });

        var layerIGN = createLayerIGN();
        map.addBaseLayer(layerIGN);
        map.setBaseLayer(layerIGN);
      });
    </script>
  </body>
</html>