Home

¿Qué es la API-CNIG?

La API CNIG es una herramienta que permite integrar de una forma sencilla un visualizador de mapas interactivo en cualquier página web y configurarlo consumiendo servicios web WMS, WFS, ficheros KML, etc. Además, provee la capacidad de añadir una gran cantidad de herramientas y controles.

Para adaptarse a las necesidades de los usuarios y ser mucho más flexible, la API CNIG cuenta con dos APIs. De esta manera, es el propio usuario el que escoge la que más se adapte a sus necesidades:

Una API REST muy sencilla que permite incluir un visualizador interactivo en cualquier página web sin necesidad de disponer de conocimientos específicos en programación ni de SIG (Sistemas de Información Geográfica).
Una API JavaScript que permite crear desde visualizadores de mapas básicos hasta otros de mayor complejidad.

La API CNIG se presenta como una solución gratuita para la incorporación de clientes de mapas interactivos en nuestras páginas web muy fácilmente.

A continuación se muestra un ejemplo base completo de la explotación de la API JavaScript. Puede verse funcionando en el siguiente enlace.

<!DOCTYPE html>
<html lang="en">

<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/attributions/attributions.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/viewmanagement/viewmanagement.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/attributions/attributions.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/viewmanagement/viewmanagement.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">
        const map = M.map({
            container: 'mapjs',
            controls: ['panzoom', 'scale*true', 'scaleline', 'rotate', 'location', 'backgroundlayers', 'getfeatureinfo'],
            zoom: 5,
            maxZoom: 20,
            minZoom: 4,
            center: [-467062.8225, 4683459.6216],
        });

        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,
        });

        map.addLayers([ocupacionSuelo, layerinicial, layerUA, kml]);

        const pluginAttributions = new M.plugin.Attributions({
            mode: 1,
            scale: 10000,
        });

        const pluginShareMap = new M.plugin.ShareMap({
            baseUrl: 'https://componentes.ign.es/api-core/',
            position: 'BR',
        });

        const pluginViewManagement = new M.plugin.ViewManagement();

        const pluginMouseSRS = new M.plugin.MouseSRS({
            srs: 'EPSG:4326',
            label: 'WGS84',
            precision: 6,
            geoDecimalDigits: 4,
            utmDecimalDigits: 2,
        });

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

        map.addPlugin(pluginAttributions);
        map.addPlugin(pluginShareMap);
        map.addPlugin(pluginViewManagement);
        map.addPlugin(pluginMouseSRS);
        map.addPlugin(pluginTOC);
    </script>
</body>

</html>