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

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:

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

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>

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

#map{ height: 180px; }

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

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:

NOTA: Para usuarios de Leaflet anteriores a la versión 1.0 (Leaflet 0.7) es necesario añadir el parámetro «tms» en la definición de la capa para indicar el origen de coordenadas. En este caso, la URL se utiliza sin signo negativo en la coordenada «y», combinado con el parámetro «tms:true». Esto es porque el origen de las capas en L.tilelayer se presupone en la esquina superior izquierda, por lo que el eje Y va hacia abajo. En TMS, el origen de coordenadas se encuentra en la esquina inferior izquierda, por lo que el eje Y va hacia arriba. A parte de esta diferencia, el servicio se comporta exactamente igual de lo esperado para L.tileLayer.

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',
   tms: true,

}).addTo(map);

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:

Publicar un comentario