Galería ejemplos API-CNIG

          
          
          <!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>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/ignsearch/ignsearch.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/xylocator/xylocator.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/mousesrs/mousesrs.ol.min.css" rel="stylesheet" />
    <link href="https://componentes.cnig.es/api-core/plugins/zoomextent/zoomextent.ol.min.css" rel="stylesheet" />
    <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/ignsearch/ignsearch.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/attributions/attributions.ol.min.js"></script>  
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/xylocator/xylocator.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/sharemap/sharemap.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/zoomextent/zoomextent.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.cnig.es/api-core/plugins/mousesrs/mousesrs.ol.min.js"></script>
      <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'],
              zoom: 5,
              maxZoom: 20,
              minZoom: 4,
              center: [-467062.8225, 4683459.6216],
          });
          // Configuración de las capas
          const layerinicial = new M.layer.WMS({
              url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
              name: 'AU.AdministrativeBoundary',
              legend: 'Limite administrativo',
              tiled: false,
          }, {});

          const layerUA = new M.layer.WMS({
              url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
              name: 'AU.AdministrativeUnit',
              legend: 'Unidad administrativa',
              tiled: false
          }, {});

          const ocupacionSuelo = new M.layer.WMTS({
              url: 'https://wmts-mapa-lidar.idee.es/lidar',
              name: 'EL.GridCoverageDSM',
              legend: 'Modelo Digital de Superficies LiDAR',
              matrixSet: 'GoogleMapsCompatible',
              visibility: false,
          }, {});

          const kml = new M.layer.KML({
            url: 'https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml',
            name:  'delegacionesIGN',
            extract: false,
            legend: 'Delegaciones IGN',
            transparent: true,
          });

          mapjs.addLayers([ocupacionSuelo, layerinicial, layerUA, kml]);
          
          // Configuración de los plugins
          const mp = new M.plugin.IGNSearch({
              servicesToSearch: 'gn',
              maxResults: 10,
              isCollapsed: false,
              noProcess: 'municipio,poblacion',
              countryCode: 'es',
              reverse: true,
          });
          const mp2 = new M.plugin.Attributions({
              mode: 1,
              scale: 10000,
          });

          const mp3 = new M.plugin.ShareMap({
              baseUrl: 'https://componentes.cnig.es/api-core/',
              position: 'BR',
          });
          const mp4 = new M.plugin.XYLocator({
              position: 'TL',
          });
          const mp6 = new M.plugin.ZoomExtent();
          const mp7 = new M.plugin.MouseSRS({
              srs: 'EPSG:4326',
              label: 'WGS84',
              precision: 6,
              geoDecimalDigits: 4,
              utmDecimalDigits: 2,
          });

          const mp8 = new M.plugin.TOC({
            collapsed: true,
            collapsible: true,
          });

          mapjs.addPlugin(mp);
          mapjs.addPlugin(mp2);
          mapjs.addPlugin(mp3);
          mapjs.addPlugin(mp4);
          mapjs.addPlugin(mp6);
          mapjs.addPlugin(mp7);
          mapjs.addPlugin(mp8);
      </script>
  </body>
</html>

          
          

        