Un mapa no geográfico con Leaflet

Un mapa es la representación gráfica de una superficie que generalmente es la de la tierra. Esa representación para que la podamos considerar un mapa tiene que tener además capacidad métrica; es decir, podemos tomar medidas de distancias, ángulos o superficies sobre el mapa y obtener un resultado que se puede relacionar con las mismas medidas realizadas en el mundo real.

Los mapas que antes se publicaban en pergamino o en papel ahora lo hacen en  la WEB. La cartografía en internet se ha popularizado con la aparición de Google Maps y de algunas librerías Javascript como Leaflet. Pero: ¿podemos utilizar leaflet para crear otro tipo de mapas que no sean geográficos? ¿Y con que fin?

Se puede utilizar Leaflet para realizar mapas de imágenes en que mantengamos su propiedad métrica. Esas imágenes pueden ser representaciones del sistema solar, de una radiografía o de una fotografía.

Para ilustrar lo que estamos diciendo utilizaremos una imagen sobradamente conocida. El Guernica es un cuadro de gran tamaño (776,6 cm × 349,3 cm) pintado por Pablo Picasso el año 1937, cuyo título alude al bombardeo de la población de Guernica, ocurrido el 26 de abril de dicho año, durante la Guerra Civil española.

Definiendo un sistema de referencia

En la representación de coordenadas geográficas, Leaflet utiliza por defecto el CRS 3857 (WGS84/Pseudo Mercator). Para saber más sobre sistemas de coordenadas de Leaflet echa un vistazo a este post.

Un CRS (Coordinate Reference Sistem) es un sistema de coordenadas que nos permite situar un punto sobre el mapa. El sistema de coordenadas habitual de Leaflet no nos sirve para nuestro propósito, por lo que tendremos que utilizar otro.

Por suerte, Leaflet dispone de CRS.Simple que se utiliza para representar una cuadrícula de píxeles.

CRS.Simple

Nos convierte unas coordenadas de longitud y latitud en x e y directamente. CRS.Simple toma la forma de [y, x] en lugar de [x, y], de la misma manera que Leaflet utiliza [lat, lng] en lugar de [lng, lat] Por ejemplo, si queremos insertar un punto en la ciudad de Salamanca (España) sus coordenadas serían (40.965,-5.664). Traducido esto a unas coordenadas cartesianas, tendríamos el par [y , x]. Además, en un CRS.Simple, una unidad de mapa horizontal se asigna a un píxel horizontal, y lo mismo para la vertical. Una vez que conocemos estos datos podemos empezar a construir nuestro mapa no geográfico.

La imagen que utilizaremos tiene unas dimensiones de 1016×460 píxeles. Esas dimensiones son las que definimos en la hoja de estilos CSS para nuestro mapa.

A continuación creamos una instancia al clase L.map y en las opciones definimos el crs.

Creando el mapa

El paso siguiente será añadir una imagen. En nuestro caso el Guernica. Esto lo hacemos utilizando L.image.Overlay que nos permite insertar imágenes en el mapa. Para hacerlo tenemos que indicar primero primero unas coordenadas que son las que se utilizan como referencia para insertar la imagen. ImageOverlay utiliza las coordenadas de las esquinas inferior izquierda y superior derecha. Es lo que leaflet llama “bounds”. Esas coordenadas según explicamos antes tienen la estructura [y , x] por lo tanto si queremos hacer que la imagen ocupe todo el mapa serán las siguientes:

Coordenada inferior izquierda: [ 0, 0 ]              Coordenada superior derecha: [490, 1016 ]

Si hemos seguido estos sencillos pasos se nos mostrará una imagen del cuadro como si fuese un mapa de Leaflet, con sus opciones de zoom, pan, atribución, etc.

Insertando elemento a la imagen

Ya hemos creado nuestro “mapa del Guernica” ahora vamos a hacer algo con él. En primer lugar insertamos un marcador en el centro. Las coordenadas del centro del mapa [y , x] son [ 230,  508 ].

Acudimos de nuevo a image.Overlay para añadir otras imágenes al mapa. Son dibujos preparatorios que Picasso realizó durante la ejecución del Guernica y las localizamos sobre las figuras del cuadro, para de este modo poder comparar como era el boceto del dibujo y cual fue el resultado al final.

Cambiando el sistema de ejes

El modo habitual de representar un punto en coordenadas cartesianas es con el formato [x y] , que como hemos visto es el contrario al que utiliza Leaflet. Si nos encontramos más cómodos trabajando en el sistema “normal” podemos intentar realizar su conversión. Para eso necesitaremos escribir una función de transformación.

La clase L.Util es utilizada internamente por Leaflet con múltiples propósitos y la función isArray nos proporciona un mecanismo para gestionar una matriz. Lo que hace esta función es utilizar una matriz en que sus valores son [y] [x] para devolvernos otra matriz con el orden cambiado.

Aprovechando que ahora podemos manejarnos en el espacio xy vamos a dibujar dos diagonales en el cuadro. La composición que Picasso utilizó en el Guernica es en forma de tríptico. El genial artista dividió el espacio en tres partes mediante el uso de unas diagonales ficticias. El espacio central estaría formado por un triángulo cuyo vértice coincidiría con la vela que sostiene la mujer que sale de la ventana.

Para dibujar las diagonales definimos primero los puntos [ x y] . Luego creamos las líneas y las añadimos al mapa.

El resultado es un mapa como este:

Si quieres aprender a crear visores web con Leaflet, inscríbete ya a nuestro curso online de visores webmapping con Leaflet.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos