Ejemplo TMS

          
          
          		  
<!DOCTYPE html>         
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="cnig" content="yes">
    <title>visualizador base</title>
    <!-- Estilo de la API -->
    <link type="text/css" rel="stylesheet" href="https://componentes.cnig.es/api-core/assets/css/apiign.ol.min.css">
    <!-- Estilos de los plugins añadidos -->
    <link href="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.css" rel="stylesheet" />
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
    </style>
  </head>

  <body>
      <!-- Contenedor principal del mapa -->
      <div id="mapjs" class="m-container"></div>
      <!-- Ficheros javascript de la API -->
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/vendor/browser-polyfill.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/apiign.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/js/configuration.js"></script>
      <!-- Ficheros  javascript de los plugins añadidos-->
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.js"></script>

      <script type="text/javascript">
	  
        // Configuración del mapa
	   
          const mapjs = M.map({
              container: 'mapjs', //id del contenedor del mapa
              controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers'],
              maxZoom: 20,
              minZoom: 0,
              center: [-467062.8225, 4683459.6216],
          });
		  
       // Configuración de la capa TMS 'Mapa raster'

       const xyz = new M.layer.XYZ({
          url: 'https://api.maptiler.com/maps/outdoor/256/{z}/{x}/{y}@2x.png?key=7oapAXDXQ3uctBopr1Wx',
          name: 'pruebaXYZ',
          projection: 'EPSG:3857',
          displayInLayerSwitcher: true
        });

        const xyz2 = new M.layer.XYZ({
          url: 'https://rts.larioja.org/mapa-base/rioja/{z}/{x}/{y}.png',
          name: 'XYZLaRioja',
          projection: 'EPSG:3857',
          visible: false,
	      displayInLayerSwitcher: true
        });


        const tms2 = new M.layer.TMS({
            url: 'https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/cresques/{z}/{x}/{y}.jpg',
            name: 'Cresques',
            projection: 'EPSG:3857',
	      displayInLayerSwitcher: true
        });


        const tms4 = new M.layer.TMS({
            url: 'https://www.ign.es/web/catalogo-cartoteca/resources/webmaps/data/mapmosaic/{z}/{x}/{y}.jpg',
            name: 'Mapmosaic',
            projection: 'EPSG:3857',
	      displayInLayerSwitcher: true
        });

        const tms5 = new M.layer.TMS({
            url: 'https://www.ign.es/web/resources/expo/virtual/2018/data/visual01/{z}/{x}/{y}.jpg',
            name: 'Visual01',
            projection: 'EPSG:3857',
	      displayInLayerSwitcher: true
        });

        mapjs.addLayers([xyz, xyz2, tms2, tms4, tms5]);
          
          // Configuración de los plugins

          const mp8 = new M.plugin.TOC({
            collapsed: true,
            collapsible: true,
          });
		  
          mapjs.addPlugin(mp8);
      </script>
  </body>
</html>

          
          

        