7 dic 2022

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


Otra de las librerías usadas en cartografía WEB es
Leaflet. En este articulo vamos a explicar los pasos a seguir para crear un mapa con esa librería:

Partimos de un archivo *.html vacío al que vamos a añadir un <div> preparado para mostrar el mapa.


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

    </head>
    <body>
        <div id="map"></div>
            <script>
            </script>
    </body>
</html
>

    Para la configuración de un mapa de Leaflet nos vamos a basar en los ejemplos de la documentación. Desde https://leafletjs.com/examples/quick-start/ seguimos los pasos que nos indican:
    1. Importamos las librerías CSS y Javascript en la sección <head>, después de <style>. Es importante que el JS esté después del CSS

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"

       integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="

       crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->

    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"

       integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="

       crossorigin=""></script>

      1. En la sección <style> añadimos una altura para el <div> del mapa.

      #map{ height: 180px; }

        1. En la sección <script> vamos a personalizar nuestro mapa centrándolo en la península ibérica (por ejemplo: latitud 40º y longitud -3º) a un nivel de zoom 4.

        var map = L.map('map').setView([40, -3],4);

        1. A continuación cambiamos la URL por la del servicio TMS del PNOA-MA. El parámetro «maxZoom» indica el nivel de escala máximo al que vamos a mostrar el servicio. El parámetro «attribution» nos permite indicar un texto de atribución para la capa.

        L.tileLayer('https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg', {

            maxZoom: 19,
            attribution: 'CC BY 4.0 scne.es'

        }).addTo(map)
        ;

        El código completo sería este:


        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                    <style>
                        #map { height: 98vh; }
                    </style>

                    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
                    integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
                    crossorigin=""/>
         
                    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
                    integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
                    crossorigin=""></script>

            </head>
            <body>
                <div id="map"></div>
                <script>
                    var map = L.map('map').setView([40, -3], 4);

                    L.tileLayer('https://tms-pnoa-ma.idee.es/1.0.0/pnoa-ma/{z}/{x}/{-y}.jpeg', {
                        maxZoom: 19,
                        attribution: 'CC BY SCNE.ES'
                    }).addTo(map);
                </script>
            </body>

        </html>

        Si guardamos y abrimos en un navegador podemos ver el mapa que acabamos de configurar:

        Si quieres aprender más sobre cómo utilizar los servicios TMS en diferentes librerías consulta esta entrada del blog (ver entrada).

        ¿Todavía no has utilizado este servicio en tu cartografía WEB? ¡¡¡Ahora es el momento!!!

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

        No hay comentarios: