Home

¿Qué es la API-IDEE?

La API IDEE 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 IDEE 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 IDEE 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.idee.es/api-idee/assets/css/apiidee.ol.min.css">
      <!-- Estilos de los plugins añadidos -->
      <link href="https://componentes.idee.es/api-idee/plugins/attributions/attributions.ol.min.css" rel="stylesheet" />
      <link href="https://componentes.idee.es/api-idee/plugins/sharemap/sharemap.ol.min.css" rel="stylesheet" />
      <link href="https://componentes.idee.es/api-idee/plugins/mousesrs/mousesrs.ol.min.css" rel="stylesheet" />
      <link href="https://componentes.idee.es/api-idee/plugins/viewmanagement/viewmanagement.ol.min.css" rel="stylesheet" />
      <link href="https://componentes.idee.es/api-idee/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.idee.es/api-idee/vendor/browser-polyfill.js"></script>
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/js/apiidee.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/js/configuration.js"></script>
      <!-- Ficheros  javascript de los plugins añadidos-->
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/plugins/attributions/attributions.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/plugins/sharemap/sharemap.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/plugins/viewmanagement/viewmanagement.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/plugins/mousesrs/mousesrs.ol.min.js"></script>
      <script type="text/javascript" src="https://componentes.idee.es/api-idee/plugins/toc/toc.ol.min.js"></script>
    
    <script type="text/javascript">
        const map = IDEE.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 IDEE.layer.WMS({
            url: 'https://www.ign.es/wms-inspire/unidades-administrativas?',
            name: 'AU.AdministrativeBoundary',
            legend: 'Limite administrativo',
            tiled: false,
        }, {});

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

        const ocupacionSuelo = new IDEE.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 IDEE.layer.KML({
          url: 'https://www.ign.es/web/resources/delegaciones/delegacionesIGN.kml',
          name:  'delegacionesIGN',
          extract: false,
          legend: 'Delegaciones IGN',
          isBase: false,
        });

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

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

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

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

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

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

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

</html>