5 dic 2022

Cómo cargar el TMS del PNOA-MA en OpenLayers


Una de las librerías de tipo geomático y de fuente abierta es OpenLayers. De carácter muy técnico y con una amplia variedad de métodos, formatos de capas o eventos, disponibles para su uso.

Vamos a ir paso a paso para crear un mapa con esta librería:
  1. Desde: https://openlayers.org/doc/quickstart.html copiamos y pegamos en un archivo de texto el contenido del apartado «The markup». Cambiamos el nombre del archivo a index.html. Editamos el código añadiendo las etiquetas de <style> y dejando vacío el contenido de <script>, quedando así el resultado:
  1. El siguiente paso será añadir el código CSS para poder visualizar nuestro mapa. Volvemos a la página de ejemplo https://openlayers.org/doc/quickstart.html y copiamos el apartado «The style» dentro de las etiquetas <style> y <head> en el archivo que acabamos de crear en el punto anterior.
  1. Abrimos la documentación de https://openlayers.org/download/ y copiamos y pegamos la importación de las librerías JS y CSS de OpenLayers para poder ser usadas en este visualizador. La importación se realiza dentro de la etiqueta <head>, después de </style>.

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.css"
>

    1. A continuación añadimos el código dentro de la etiqueta <script> para configurar el mapa y la capa de tipo «Tile», y con un source tipo «XYZ». La URL es la del servicio que queremos mostrar.

    <script>
        const map = new ol.Map({
            target: 'map',
            layers: [
            new ol.layer.Tile({
                    source: new ol.source.XYZ({
                    url: 'https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg'
                    })
                })
            ],

            view: new ol.View({
                center: [0, 0],
                zoom: 3
            })
        });
    </script>

    1. El código completo queda así:


    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />

            <style>
                html,body {
                margin: 0;
                height: 100%;
                }

                #map {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    width: 100%;
                }
            </style>



        <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>

            <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/theme/ol.css">

        </head>
        <body>
            <div id="map"></div>
            <script>
                const map = new ol.Map({
                    target: 'map',
                    layers: [
                        new ol.layer.Tile({
                        source: new ol.source.XYZ({    
                            url: 'https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg'
                            })
                        })
                    ],
                    view: new ol.View({
                        center: [0, 0],
                        zoom: 3
                    })
                });
            </script>
        </body>

    </html>

    Si quieres saber más sobre cómo utilizar los servicios TMS en diferentes librerías sigue este blog porque está semana publicaremos más artículos (ver entrada).

    Publicado por A^2, Cecilia Poyatos Hernández.

    30 nov 2022

    Cómo cargar un TMS en API-CNIG como capa independiente


    Para añadir una capa TMS en la
    API-CNIG como capa independiente partimos del siguiente ejemploSobre ese código vamos a introducir la constante para añadir una layer del tipo TMS.

    Puedes consultar todas las propiedades sobre capas TMS en la documentación de la API-CNIG. En este caso vamos a utilizar el servicio de TMS de Cartografía Ráster de España, porque el PNOA-MA ya está incluido como capa base. Cambiando los parámetros url, name y projection se puede añadir cualquier otro servicio TMS.


    // Configuración de la capa TMS 'Mapa raster'

    const tms = new M.layer.TMS({
            url: 'https://tms-mapa-raster.ign.es/1.0.0/mapa-       raster/{z}/{x}/{-y}.jpeg',
            name: 'Mapa ráster',
            projection: 'EPSG:3857',    
            minZoom: 6,
            maxZoom: 20,
            visibility: true,
            }, {});

    mapjs.addLayers([tms]);


    Al ser una capa independiente, si añadimos el control selector de capas podemos controlar desde el navegador si está visible o no. Vamos a añadir también las librerías y controles para poder activarla o desactivarla:
    • Añadimos el estilo para el plugin:

    <!-- Estilos de los plugins añadidos -->

    <link href="https://componentes.cnig.es/api-core/plugins/toc/toc.ol.min.css" rel="stylesheet" />


    • Añadimos el Javascript para el plugin TOC:

    <!-- 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
    >

    • Y por último, en la sección <script> se introduce el código que añade el plugin

    // Configuración de los plugins

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

    mapjs.addPlugin(mp8)
    ;


    El resultado es el siguiente.


    El código completo del ejemplo lo puedes encontrar aquí: ejemplo TMS.

    Si quieres saber más sobre cómo utilizar los servicios TMS en diferentes librerías sigue este blog porque está semana publicaremos más artículos (ver entrada).

    Publicado por A^2, Cecilia Poyatos Hernández.

    29 nov 2022

    Cómo cargar el TMS del PNOA-MA en API-CNIG como capa base


    La manera más sencilla que os proponemos es utilizar la
    API-CNIG, un proyecto del O.A. Centro Nacional de Información Geográfica (CNIG) que sirve de tecnología común a todos los visualizadores del IGN y el CNIG de uso libre.

    Para ponerlo en marcha, vamos a entrar en la galería de ejemplos:

    Buscamos el ejemplo de «Visualizador base» y lo abrimos en un navegador: https://plataforma.idee.es/resources/GaleriaEjemplos_APICNIG/ejemplos/visualizadorBase01.html

    El servicio TMS del PNOA-MA está ya configurado en el control «backgroundlayers» que añadimos al mapa en la línea 34.

    Haciendo clic sobre el botón «Imagen», visualizaremos el servicio TMS del PNOA-MA directamente.

    Para poder consumirlo desde un HTML en local, copiamos y pegamos el código en un archivo nuevo con extensión HTML.

    Añadimos en la línea 34 «M.proxy(false)», quedando el código de la siguiente manera:

    <!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">

            <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>

            <script type="text/javascript">
                // Configuración del mapa
                M.proxy(false)
                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],
                });
            </script>
        </body>
    </html>

    Podemos abrirlo con un navegador para ver el resultado:


    La API CNIG permite controlar el aspecto del visualizador; zoom, centrar el mapa en un punto determinado, añadir una herramienta de búsqueda y otro elementos. Si quieres saber más consulta la documentación completa y la galería de ejemplos.

    Si quieres saber más sobre cómo utilizar los servicios TMS en diferentes librerías sigue este blog porque está semana publicaremos más artículos (ver entrada).

    Publicado por A^2, Cecilia Poyatos Hernández.

    28 nov 2022

    Cómo insertar una imagen satélite y ortofotos como capa de fondo en un mapa WEB


    Está muy bien tener un mapa en tu web, pero... ¿has probado a poner de fondo una imagen del terreno? Las imágenes de satélite y las ortofotos son una manera muy intuitiva de georreferenciar los contenidos a mostrar.

    En esta entrada vamos a ver cómo realizar esta carga de forma sencilla en distintas librerías JavaScript: En OpenLayers, en Leaflet y en la API-CNIG.

    Las imágenes

    Como fuente de las imágenes vamos a utilizar el servicio TMS Ortoimágenes MA de España (Sentinel2 y PNOA-MA) cuyo enlace es:


    Este servicio combina imágenes de satélite y ortofotos en las escalas más grandes. Está mantenido por el Sistema Cartográfico Nacional. Tiene licencia CC BY 4.0 scne.es para su uso en todo tipo de aplicaciones de manera gratuita.

    Para encontrar la URL de este servicio, y de otros servicios disponibles, podemos consultar el directorio de servicios de la IDEE.

    Accedemos al apartado de los servicios XYZ de Teselas ráster, donde encontraremos el servicio TMS Ortoimágenes MA de España (Sentinel2 y PNOA MA) y copiamos su URL, esa será la URL que utilizaremos de fondo en nuestros mapas. Sobre los servicios TMS ya hablamos en esta entrada del blog. Queremos destacar el parámetro {-y} ya que indica que se trata de un esquema TMS en vez del esquema XYZ.

    A lo largo de está semana os iremos contando diferentes métodos de cargar el TMS del PNOA-MA en nuestra página web:

    24 nov 2022

    Nuevo diseño para el portal del Plan Nacional de Ortofotografía Aérea


    El portal del
    Plan Nacional de Ortofotografía Aérea (PNOA) incluye la información de este proyecto cooperativo el que participan la Administración General del Estado y Comunidades Autónomas en el ámbito de los procesos fotogramétricos, ortofotografía aérea y tecnología LiDAR.

    Recientemente, el portal se ha renovado actualizando su plataforma tecnológica y mejorando su imagen.  El objetivo de estos cambios es ofrecer a todos los colaboradores y usuarios de ese tipo de información una imagen profesional y funcional, que permita mejorar su experiencia de navegación y satisfacer de la mejor forma posible sus necesidades.

    La imagen del antiguo portal nos ha acompañado durante más de cinco años y con esta imagen renovada los usuarios podrán acceder a toda la información técnica, servicios y recursos disponible de una forma clara y sencilla.

    Los contenidos se muestran tanto de forma estática como dinámica, a través de Portlets modulares que generan los componentes visuales.

    Dentro de las novedades, podemos destacar las siguientes:
    • Se ha actualizado la versión de la tecnología Liferay Portal CE, publicando el portal en la versión 7.2.1-GA2.
    • Se ha incluido una página de inicio que presenta sus dos proyectos principales:
      • Proyecto PNOA Imagen: Contiene información sobre el proceso fotogramétrico para generar el vuelo y las ortofotos, el estado de los vuelos tanto actuales como históricos, los productos que se pueden descargar, información sobre los servicios web disponibles y aplicaciones, etc.
      • Proyecto PNOA LiDAR: Contiene información sobre la tecnología LiDAR , el estado de la primera y segunda cobertura, cuáles son los productos que se obtienen y dónde se pueden descargar, aplicaciones disponibles, etc.
    Imagen: Proyectos PNOA-imagen y PNOA-Lidar

    Además, el portal dispone de un diseño web adaptable, ajustándose al tamaño del dispositivo, compatible con las últimas versiones de los navegadores (Microsoft Edge, Firefox, Chrome) y para su implementación se ha tenido en cuenta la accesibilidad y el Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público, implementando el estándar AA de accesibilidad del W3C.

    Con este nuevo portal se pretende que la información técnica del proyecto PNOA se muestre de un modo usable y organizada, fomentando así su conocimiento y mejorando la experiencia de los usuarios en la navegación a través de sus contenidos.

    Acceso al portal: https://pnoa.ign.es/

    Publicado por el área de IDE y SIG del CNIG.

    23 nov 2022

    Nuevo estándar oficial OGC API-Tiles Parte 1: Núcleo


    El Open Geospatial Consortium (OGC) ha aprobado como estándar oficial la versión 1.0 de la 
    API de OGC - Tiles - Part 1: Core. Los archivos de definición de API de ejemplo y los esquemas asociados ya están disponibles para brindar un mejor soporte a los desarrolladores que quieran empezar a implementar el nuevo estándar.

    La API de OGC - Tiles está compuesta por varias partes que definen los componentes básicos para crear API web que permita la recuperación de información geoespacial como teselas. El estándar admite diferentes estructuras de información geoespacial, tales como teselas vectoriales (vector tiles), mapas, imágenes, coberturas y otros tipos de información geoespacial. La API de OGC: Tiles building blocks también se pueden combinar con otros estándares de bloques de construcción de la API de OGC  y borradores de especificaciones para capacidades adicionales o para aumentar la interoperabilidad de tipos específicos de datos.

    La API de OGC - Tiles hace referencia al conjunto de matrices de teselas bidimensionales de OGC (TMS) y al estándar de metadatos del conjuntos de teselas, que define la forma de especificarlos. Un conjunto de matriz de teselas es un esquema de ordenamiento en celdillas regulares que permite que una aplicación divida e indexe el espacio en función de ese conjunto de celdillas definidas para varias escalas en un determinado sistema de referencia de coordenadas.

    La API de OGC - Tiles es un sucesor del estándar de los servicios de web de mapas teselados de OGC (WMTS). El nuevo estándar se enfoca en bloques de construcción API REST simples y reutilizables que se pueden describir usando la especificación OpenAPI.

    Mientras que WMTS se centró en los mapas teselados, la API de OGC - Tiles se ha diseñado para admitir cualquier forma de datos en mosaico. Aun así, la esencia del conjunto de matriz de teselas no ha cambiado con respecto a la utilizada en el WMTS. Como tales, las teselas generadas por una implementación del nuevo estándar, y que se basan en el mismo conjunto de matriz de teselas, son totalmente interoperables con las generadas por una implementación de WMTS.

    El lanzamiento de la API de OGC - Tiles como un estándar de OGC marca el comienzo de una nueva era en la forma de servir la información geoespacial en teselas a través de la Web. Esto viene tras varias iniciativas de investigación y desarrollo (I+D) de OGC, incluido el piloto de teselas vectoriales de OGC y varios bancos de pruebas de OGC.
    API de OGC - Tiles - Part 1: Core es la primera parte de una serie de API de OGC - Tiles que utilizan el modelo de núcleo y extensiones. Las partes futuras ampliarán esta primera parte para brindar nuevas funcionalidades (sin romper la interoperabilidad), como la forma de recuperar múltiples teselas en una sola solicitud. Otros estándares o extensiones proporcionarán mecanismos para tratar con dimensiones adicionales, como la elevación, o capacidades temporales más avanzadas que las definidas en la clase de conformidad de fecha y hora de este estándar.

    Para permitir que los desarrolladores de software implementen rápidamente productos compatibles con OGC API - Tiles, se han publicado archivos de definición de API de ejemplo y esquemas asociados en la página web de OGC API - Tiles que se ajustan a la versión 3.0 de la especificación OpenAPI y, por lo tanto, se pueden integrar fácilmente en muchas de las API web que se describen mediante la especificación OpenAPI.

    ​​Para obtener más información sobre cómo la familia de estándares API de OGC trabaja para proporcionar bloques de construcción para la localización modulares que aborden los casos de uso simples y los más complejos, se puede visitar la página ogcapi.org.

    Al igual que con cualquier estándar de OGC, la versión 1.0 de la API de OGC - Tiles - Part 1: Core se puede descargar e implementar de forma gratuita desde la página web OGC API-Tiles.

    Publicado por la editora.

    22 nov 2022

    XIV Edición de la Conferencia Asedie sobre Reutilización de la Información del Sector Público


    El pasado jueves 17 de noviembre, en el Colegio de Registradores de la Propiedad y Mercantiles de España, se celebró la
    14ª Conferencia ASEDIE sobre Reutilización de la Información del Sector Público

    Este año, la conferencia ASEDIE, ha recuperado el formato presencial permitiendo que expertos de España y Europa se reúnan para compartir sus conocimientos y trabajos y compartan conocimientos en torno a la transparencia, datos abiertos, protección de datos, Inteligencia Artificial e información geoespacial.

    Entre los diversos actos, se celebraron dos mesas de debate, la primera de ellas, «La economía del dato: derechos, obligaciones, oportunidades y barreras» que fue  moderada por Dionisio Torre, presidente del Sector de Información Comercial de ASEDIE, y la segunda, «El potencial de la información geoespacial como conjunto de datos de alto valor», estuvo a cargo de Emilio López, director del CNIG y Socio Honorario de ASEDIE.

    Durante la conferencia tuvo lugar la entrega de los premios Asedie 2022. Estos premios son un galardón internacional que se entregará anualmente y que tiene como finalidad reconocer a aquellas personas, empresas o instituciones que se distingan por el mejor trabajo o la mayor contribución a la innovación y desarrollo del sector Infomediario en el año en curso. Tradicionalmente este premio ha consistido en una única categoría, «Impulsando la Economía del Dato», que este año se le ha entregado al Instituto de Estadística y Cartografía de Andalucía (IECA) por su trabajo en la publicación y difusión de los espacios productivos de Andalucía. Como novedad, este año se ha creado una nueva categoría, centrada en el mundo académico y de investigación, «Impulsando el Conocimiento del Dato», que se le ha otorgado a la Universidad Rey Juan Carlos y la Fundación FIWARE con el Informe sobre el estado de los datos abiertos en España III, por su contribución al ecosistema de los datos al hacer tomar conciencia de la importancia que tiene la apertura y el acceso a la información del sector público.


    Disponible el vídeo de la conferencia en la web de Asedie.

    Publicado por la editora.