Leaflet MAGNA 50


En este tutorial veremos cómo crear un mapa a partir de un SVG con el cliente ligero Leaflet, para ello vamos a utilizar los datos del Mapa Geológico de España a escala 1:50.000 (MAGNA 50) del Instituto Geológico y Minero de España (IGME).


El Mapa Geológico Nacional (MAGNA), desarrollado por el Instituto Geológico y Minero de España (IGME) se distribuye en hojas 1:50.000 a través de su página web http://info.igme.es/. En el Mapa Geológico representan la naturaleza de los materiales (rocas y sedimentos) que aparecen en la superficie terrestre, su distribución espacial y las relaciones geométricas entre las diferentes unidades cartográficas.

El código completo para visualizar el mapa del MAGNA 50 a pantalla competa en formato HTML lo tenéis a continuación, para los que no estén familiarizados con el lenguaje HTML, solo tenéis que copiar y pegar en un editor de texto, (os recomiendo utilizar Sublime Text pero son perfectamente validos otros como el bloc de notas o Notepad++) y guardarlo con la extensión .html

Finalmente, una vez guardado podéis abrirlo con cualquier navegador.

						
<!DOCTYPE html>
<meta charset="utf-8" />
  <head>
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

    <style>
	  body { margin:0; padding:0; }
    	#map { position:absolute; top:0; bottom:0; width:100%; }

    	.leaflet-container {
		    background-color:#fff;}
    </style> 
  </head>

  <body>
   <div id="map"></div>
    <script>
		// center of the map
		var center = [42.58540144, 0.30141376];
		// Create the map
		var map = L.map('map').setView(center, 12);

		// Set up the OSM layer
		L.tileLayer('', {
				    attribution: '<a href="http://info.igme.es/">IGME</a> | <a href="https://geopois.com/">geopois.com</a>',
				    maxZoom: 18
				}).addTo(map);
		var imageUrl = 'Magna50_179.svg',
		  imageBounds = [center,[42.66856231, 0.14654170], [42.50103533, 0.48039042]]

		L.imageOverlay(imageUrl, imageBounds).addTo(map);
		L.imageOverlay(imageUrl, imageBounds).bringToFront();
    </script>
  </body> 
 </html>

						

					

Ahora vamos a saber un poco más del proceso y el formato SVG:

SVG o Scalable Vector Graphics en inglés, es un formato estándar abierto y basado en los gráficos XML utilizado tanto para imágenes como para animaciones, se trata de un formato de gráficos vectorizados en el que las imágenes puedes ser redimensionadas y transformadas sin sufrir pérdidas de calidad ni deformaciones.

La serie se encuentra dividido en hojas:

1. Nos vamos a descargar el Mapa en formato PDF, en nuestro caso el MAGNA 50 - Hoja 179 (BIELSA).

2. Vamos a transformar el fichero PDF descargado llamado Magna50_179.pdf al formato SVG, para ello vamos a utilizar el programa Inskape.

Inkscape es un editor profesional de gráficos vectoriales (SVG) para Linux, Windows y macOS libre y de código abierto.

Para ello vamos a cargar el fichero Magna50_179.pdf y en los Ajustes de importación de PDF, vamos a modificar la Precisión de las mallas de degradados aproximadas:

246.0 muy fino.

Una vez lo tengamos cargado, vamos a guardarlo como Magna50_179.svg, os animo a que modifiquéis el plano y juguéis con el programa.

3. Vamos a cargar el fichero SVG a nuestro cliente ligero Leaflet y realizar unas pequeñas modificaciones:

En primer lugar, en el head, vamos a cambiar el color del fondo aplicando un estilo a todo el contenedor , ya que los SVG tienen un fondo transparente, y el fondo de Leaflet es gris por defecto.

						
<style>
  body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }

	.leaflet-container {
	    background-color:#fff;}
</style> 
						

					

En segundo lugar, la parte del script, vamos a centrar el mapa en la posición central de la hoja MAGNA 50.

Definimos la escala del mapa (12 en nuestro caso).

Añadimos las atribuciones, siempre es recomendable citar la fuente, en nuestro caso Leaflet y el Instituto Geológico y Minero de España (IGME).

Insertamos la url de la imagen SVG, la que hemos editado anteriormente con el programa Inskape.

Y finalmente las coordenadas de la esquina superior izquierda y la esquina inferior derecha de la Imagen georreferenciada del mapa editado recortado de la hoja 179, podéis apoyaros en algún sistema gis para obtenerlas, nosotros hemos usado QGIS.

						
<script>
	// center of the map
	var center = [42.58540144, 0.30141376];
	// Create the map
	var map = L.map('map').setView(center, 12);

	// Set up the OSM layer
	L.tileLayer('', {
			    attribution: '<a href="http://info.igme.es/">IGME</a> | <a href="https://geopois.com/">geopois.com</a>',
			    maxZoom: 18
			}).addTo(map);
	var imageUrl = 'Magna50_179.svg',
	  imageBounds = [center,[42.66856231, 0.14654170], [42.50103533, 0.48039042]]

	L.imageOverlay(imageUrl, imageBounds).addTo(map);
	L.imageOverlay(imageUrl, imageBounds).bringToFront();
</script>
						

					

¡Y esto es todo! Ya lo sabéis, si queréis saber, echad un vistazo al resto de tutoriales de geopois.com. ¡Os esperamos dentro! :)

¿Alguna pregunta? ¿Quieres realizar sinergias o colaboraciones? ¿Te gustaría enviarnos feedback sobre el tutorial? No dudes en contactar a jgabas@geopois.com.



Sobre el Autor


Javier Gabás Jiménez

Soy un apasionado de los mapas y la infraestructura de datos espaciales, me divierto mucho buscando formas de comprender y presentar datos visualmente, así como entender la programación que hay debajo. Ingeniero en geomática y topografía por la Universidad Politécnica de Madrid, cuando no estoy trabajando o estudiando, estaré viajando y disfrutando de la vida junto a mi pareja.



Formamos parte del programa de emprendimiento #17actuaupm