Introducción a la librería Leaflet para crear un mapa online

La librería Leaflet nos permite incorporar y generar mapas para poder visualizarlos en nuestro navegador de internet. En esta entrada os voy a hacer una breve introducción a la librería Leaflet, orientándolo principalmente a la generación de una web HTML. Para poder comprender la parte de programación descrita, os recomiendo que os leáis las entradas sobre introducción al código HTML, JavaScript y CSS. Os van a servir de apoyo.

Introducción a la librería Leaflet para crear un mapa online

Quiero leer...

Leaflet en el contexto cliente-servidor

En un web mapping, los datos geoespaciales se ofrecen a través de internet. Y esto es posible gracias a la “arquitectura” basada en la relación cliente-servidor.

Los servidores contienen los mapas (cartografías, capas rásters o vectoriales, y datos en general), los clientes son los software o apps que los demandan y permiten su visualización y gestión, y los usuarios son los que ven esa información, es decir, las personas que la solicitan. Por lo tanto, los clientes son los intermediarios entre los servidores y los usuarios. La relación se hace de este modo:

Servidor → Cliente → Usuario

Los clientes pueden ser ligeros o pesados:

  • Cliente ligero: pesan poco y se ejecuta en el navegador. Cuando el usuario va a la web, se descarga el programa y lo visualiza. Ejemplos son las librerías JavaScript: Openlayers y Leaflet.
  • Cliente pesado: la aplicación se ejecuta en el ordenador, no en el navegador. Es un programa independiente y ofrece muchísimas funcionalidades, no disponibles en la web, como QGis.

Introducción a la librería Leaflet

Leaflet es una librería en JavaScript, y es software libre. Estos mapas pueden incorporar servicios de capas teseladas, imágenes propias, datos en formatos GeoJSON, plugins, etc. También se pueden crear interacciones con el mapa mediante el uso de ventanas emergentes, entre otras. Las posibilidades son realmente impresionantes. Y poco a poco las iremos viendo.

La librería Leaflet fue desarrollada por Vladimir Agafonkin a principios de 2011 y fue adoptada posteriormente por OpenStreetMap en el año 2012. Por lo tanto, ya tienen un largo recorrido que avala su funcionalidad y su utilidad.

Además del propio Leaflet, también existen una gran cantidad de plugins que nos facilitan el desarrollo de los web mappings, así como una gran cantidad de ejemplos para que podamos aprender sobre la marcha. Asimismo, Leaftlet cuenta con un servidor propio con todos los archivos necesarios para hacer el web mapping, que es justamente lo que veremos a continuación.

Invocar Leaflet en una web HTML

Ahora bien, en esta introducción a la librería Leaflet nos hacemos una pregunta: ¿cómo podemos indicar a nuestra web en HTML que se ponga el mapa de Leaflet interactivo?

Primero, tenemos que enlazar o invocar a los archivos de Leaflet que están en sus servidores. Y eso lo hacemos con las etiquetas <link> (para un archivo CSS) y <script> (para un archivo JavaScript), dentro de la cabecera (<head></head>). Tenemos que incluir entonces estas líneas:

<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
   integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
   crossorigin=""/> 
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
</head>

Es importante mencionar que las líneas anteriores incluyen la versión de Leaflet que se está empleando. En nuestro caso empleamos la versión 1.6.0 (ver leaflet@1.6.0) porque es la última que se ha publicado al escribir estas líneas. Pero recomendamos revisar la guía rápida de inicio para adaptar esos códigos a la última versión.

Dentro de las etiquetas anteriores están los atributos integrity y crossorigin, que en las últimas versiones de Leaflet garantizan que la información entregada a los clientes va íntegra y sin manipulación o hackeo intermedio.

También nos podemos descargar los archivos de su página oficial. En los códigos anteriores, en lugar de poner un enlace web que vaya hacia los archivos, deberemos crear el enlace hacia donde los tengamos descargados. Sin embargo, es altamente recomendable utilizar la opción de llamar a sus servidores en lugar de descargar los archivos. Pero como aquí nos gusta dar todas las opciones, ahí la tenéis.

2 comentarios en «Introducción a la librería Leaflet para crear un mapa online»

Deja un comentario