Galería ejemplos API-CNIG

          
          <!DOCTYPE html>         
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; 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>Visor 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/attributions/attributions.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/attributions/attributions.ol.min.js"></script>           


      <script type="text/javascript">
          // Configuración del mapa
          M.config.attributions.defaultAttribution = 'Instituto Geográfico Nacional';
          M.config.attributions.defaultUrl = 'https://www.ign.es/' 
          const mapjs = M.map({
              container: 'mapjs', //id del contenedor del mapa
              controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location'],
              zoom: 11,
              maxZoom: 20,
              minZoom: 4,
              center: [-698891.27,4371676.08],
          });
          // Configuración de las capas
          TMS_PNOA = new M.layer.TMS({
              url: 'https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg',
              name: 'PNOA_MA_IGN',
          });


          mapjs.addTMS(TMS_PNOA);
          
          // Configuración de las extensiones
          // documentación de la extensión : https://github.com/IGN-CNIG/API-CNIG/tree/master/api-ign-js/src/plugins/attributions              
          const mp = new M.plugin.Attributions({
              mode: 1,
              scale: 200000,
              url: 'https://componentes.ign.es/NucleoVisualizador/vectorial_examples/atribucionPNOA.kml',
              type: 'kml',
              position: 'TL',
              minWidth: "150px",
              maxWidth:"250px",
              defaultAttribution:" ",
              urlAttribute:" "
          });
          mapjs.addPlugin(mp);
      </script>
  </body>
</html>

          
          

        