Crear un web mapping con Leaflet

El web mapping puede definirse como el proceso de diseñar, aplicar, generar y visualizar u ofrecer datos geoespaciales en internet. Es decir, se basa en la creación de mapas interactivos alojados en la nube que ofrecen a los usuarios la capadidad de acceder a la información que va más allá de los datos espaciales. La expansión de los web mappings comenzó cuando empezaron a usarse imágenes teseladas, ya que aumentaron la velocidad de carga de los mapas en internet. Aquí os voy a enseñar a crear un web mapping con Leaflet, aunque ya veremos cómo personalizarlo en entradas posteriores. Y aquí podéis ver una breve introducción a Leaflet.

Crear un web mapping con Leaflet

Para poder crear un web mapping con Leaflet vamos a necesitar de la integración de tres lenguajes de programación básicos: HTML, CSS y JavaScript. No os preocupéis por ellos, hemos redactado una breve introducción a los mismos focalizados especialmente a Leaflet. Por ejemplo, aquí tenéis la entrada sobre el lenguaje HTML, aquí la del lenguaje CSS y por último aquí podréis ver la entrada del lenguaje JavaScript. De la lectura y comprensión de lo mostrado en esas tres entradas, comprenderéis a la perfección lo que se expone en esta. ¡Veréis que crear un web mapping con Leaflet es facilísimo!

Estructura básica de un web mapping

Antes de aprender cómo crear un web mapping con Leaflet, vamos a hacer un breve repaso de la estructura básica de un mapa online.

Clasificación de las capas según su función

Un web mapping se compone principalmente de 3 elementos principales:

  • Capa base: dan contexto geográfico al web mapping. Es básicamente la capa que vemos de fondo en cualquier mapa online. Es interesante mencionar que se pueden incluir varias capas base dentro de un solo mapa.
  • Capa temática: capa que contiene la información a destacar. Normalmente es contenido específico desarrollado por los creadores del web mapping. Esta capa básicamente se superpone a la capa base para destacar aquéllo que los desarrolles quieran mostrar. Al igual que con la capa base, pueden incluirse también varias capas temáticas.
  • Elementos interactivos: permiten ayudar a interpretar las capas temáticas, o a ampliar información. Pueden ser ventanas emergentes, tablas, gráficos. Son los elementos que hacen que un mapa tenga vida y sea atractivo. Es importante no abusar de su uso.

Clasificación de las capas según su tipología en Leaflet

Las capas de un web mapping, independientemente de si son bases o temáticas, pueden distinguirse en 4 tipos:

  • Capas raster: cualquier imagen digital. Pueden existir diferentes tipos de capas raster, necesitando cada una una clase concreta de Leaflet:
    • Capas teseladas: se usa la clase L.tileLayer, mostrando las imágenes suministradas por un proveedor. En la siguiente sección las veremos en detalle.
    • Capas con especificaciones WMS: se usa una extensión de la clase anterior, L.tileLayer.WMS. Son suministradas por proveedores.
    • Capas con imágenes fijas o estáticas (.jpg, etc): se usa la clase L.imageOverlay. Por ejemplo mapas antiguos o planos de excavaciones, etc.
  • Capas vectoriales: representan figuras mediante coordenadas y vectores.
  • Capas de interfaz de usuario: marcadores.
  • Otro tipo de capas: como por ejemplo GeoJSON.

Capas teseladas en detalle y comprendiendo su dirección URL

Cuando navegamos por un mapa virtual, por ejemplo por OpenStreetMap o por alguna de sus variantes (por ejemplo OpenCycleMap, proyecto del que ya hablamos aquí), el mapa que vemos está compuesto por varias imágenes (teselas) unidas, siendo todas de igual tamaño. Estas teselas son pedidas al proveedor dependiendo del nivel de zoom, cargándose unas u otras. Estas teselas descargadas se almacenan en la caché del navegador, haciendo la navegación más rápida ya que no necesita descargarlas de internet.

Crear un web mapping con Leaflet

Para crear un web mapping con Leaflet sencillo, necesitamos editar el código HTML. Vamos a ir viendo por partes cómo crearlo, de un modo sencillo y estructurado.

Indicar que se use la librería Leaflet (<head></head>)

Para utilizar la librería Leaflet, tenemos que añadir estas dos líneas en el <head></head>, como ya vimos anteriormente. La primera hace un enlace un archivo CSS en internet (por eso se pone <link>) y la segunda a un archivo JavaScript en internet (por eso se pone <script>):

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> 

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

Creamos un estilo CSS para el mapa (<head></head>)

Como veremos a continuación, crearemos un objeto con el nombre identificativo map en el <body></body>. Por lo tanto, en el <head></head> añadimos el estilo CSS de este objeto identificado como map. Recordamos que la personalización de un objeto identificado se hace añadiendo una almohadilla delante (#).

<style> 
    #map { 
       width: 800px; 
       height: 600px; 
       } 
</style>

Con estilo CSS le estamos diciendo que el objeto map tiene que tener una anchura de 800 px y una altura de 600 px.

Colocando el mapa en la web (<body></body>)

Ahora nos toca definir el lugar donde queramos que aparezca el mapa. Para ello nos valemos de las etiquetas <div></div>, identificándolas con un nombre particular de map.

<div id="map"></div>

Este es el objeto (map), cuyo estilo viene definido con CSS en el apartado anterior.

Añadimos el código JavaScript del mapa (<body></body>)

Por último, nos toca añadir el código JavaScript del mapa en el <body></body>. Esto lo conseguimos añadiendo 2 líneas de código, que describiremos en detalle después del código.

var map = L.map('map', { 
        center: [40.418889, -3.691944], 
        zoom: 6, 
        maxBounds: [[39.53, -13.09], [40.00, 6.24]], 
        minZoom: 5, 
        maxZoom: 7 }); 

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

Primera línea

var map = L.map()

En la primera línea se ha generado una variable map (var map; ¡OJO! Esta variable tiene que llamarse map, y no está relacionada con el identificador map del <div>). Esta variable es una instancia de la clase L.map de Leaflet, en la que se pueden editar varios atributos, pero siempre siguiendo esta estructura:

L.map(“id”, {opción1, opción2…})

  • Indiciamos al principio el id del objeto (map) situado en las etiquetas <div></div>
  • center: coordenadas del centro del mapa que queremos representar.
  • zoom: nivel de zoom al inicio de la carga del mapa.
  • minZoom: nivel mínimo de zoom.
  • maxZoom: nivel máximo de zoom.
  • maxBounds: coordenadas límite para desplazarnos por el mapa, para que no se vea el mapamundi completo. Si no está puesto, no hay límites.
  • crs: nos permite cambiar el sistema de referencia de coordenadas. Por defecto es EPSG:3857 (Proyección WGS84).

Podemos añadir también varios métodos JavaScript a L.map():

  • setView(): define las coordenadas del centro del mapa que queremos representar y el nivel de zoom al inicio. Tendremos que eliminar de las opciones anteriores los atributos center y zoom.
  • setZoom(): establece el zoom del mapa.
  • zoomIn(): indica los saltos de zoom hacia dentro. Por defecto es 1.
  • zoomOut(): indica los saltos de zoom hacia fuera. Por defecto es 1.
  • setZoomAround(): zoom al mapa desde un punto previamente definido.
  • fitWorld(): establece una vista del mapa con el máximo nivel de zoom posible.

Por ejemplo, usando setView():

var map = L.map('map', {
   maxBounds: [[39.53, -13.09], [40.00, 6.24]],
   minZoom: 5,
   maxZoom: 7 
   }).setView([40.41889, -3.691944], 6);

También se puede hacer especificando la variable en el método, pero esta vez fuera de la función L.map():

var map = L.map('map', { 
   maxBounds: [[39.53, -13.09], [40.00, 6.24]], 
   minZoom: 5,
   maxZoom: 7 
   });
   map.setView([40.41889, -3.691944], 6);

La diferencia entre el primero y el segundo es que en el segundo está fuera de la función L.map() y en el primero está dentro, por eso es necesario indicar sobre qué objeto hay que hacer el setView().

Segunda línea

L.tileLayer()

La segunda línea del código es la función L.tileLayer(), que presenta la siguiente sintaxis:

L.tileLayer(urlTemplate, opciones)

  • urlTemplate: es la dirección web de la capa teselada que se cargará en el mapa. En este caso es la capa de OpenStreetMap.
  • opciones: entre otras, está la de attribution, donde se indica quiénes son los responsables de la capa teselada.
  • minZoom: indica el valor mínimo del zoom.
  • maxZoom: indica el valor máximo de zoom.
  • opacity: nivel de opacidad. Predeterminado = 1.

El último método que aparece es .addTo(map), cuya función es añadir la capa al mapa.

Orden de las dos líneas de código (L.map y L.tileLayer)

Es importante mencionar que hay que escribirlos en este orden, donde primero creamos el mapa con L.map() y luego cargamos la capa teselada de base con L.tileLayer().

Sin embargo, y para poder entender el lenguaje, podemos dar la vuelta a esos códigos sin que den error de este modo:

<script> var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>contributors' }); L.map('map',{center: [40.418889, -3.691944], zoom: 6, layers: osm}); </script>

Primero hemos creado una variable que hemos llamado osm a la función L.tileLayer, que se queda almacenada en la memoria. Posteriormente escribimos la función L.map donde le indicamos cuál es la capa teselada de base, que hemos llamado osm, en layers: osm.

Un web mapping de ejemplo con todo lo aprendido

Vamos a crear un web mapping con Leaflet. De hecho, va a ser nuestro primer web mapping. Sí, ya sé que es muy básico. Pero si no empezamos por lo básico, comprendiendo hasta el último detalle, no podremos adentrarnos en el maravilloso mundo de la creación de mapas online.

Además, vamos a juntar todo lo explicado en esta entrada para que veáis cómo se estructura un mapa web.

<!DOCTYPE html> 
<html>
   <head>
      <meta charset="UTF-8" >
      <title>Crear mapas online en vivaelsoftwarelibre.com</title>
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> 
      <style> #map { width: 800px; height: 600px; } </style>
   </head>
   <body>
      <h1>Nuestro primer mapa OSM con Leaflet</h1>
      <div id="map"></div>
      <script> var map = L.map('map',{ center: [40.418889, -3.691944], zoom: 6, maxBounds: [[39.53,-13.09],[40,6.24]], minZoom: 5, maxZoom: 7 }); L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); </script> 
   </body>
</html>

Así hemos conseguido crear un web mapping con Leaflet. Y esto es lo que tenemos que ver.

Creando nuestro primer mapa online con Leaflet

1 comentario en “Crear un web mapping con Leaflet”

Deja un comentario