Leaflet Basemap


En este tutorial veremos como crear un mapa básico con el cliente ligero Leaflet.


El código completo para visualizar el mapa 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%; }
    </style>
    
  </head>

  <body>
   <div id="map"></div>
    <script>
		var map = L.map('map').
		setView([42.55382, 0.258526], 
		13);
		 
		L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
		    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
		    maxZoom: 18
		}).addTo(map);
    </script>
  </body> 
 </html>
						

					

Si queréis saber un poco más sobre el código de Leaflet:

La primera parte del código se inserta en la cabecera o head, en ella aparecen dos enlaces una es los estilos o CSS y otra es el JavaScript necesario para que el mapa sea interactivo.

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

Notaréis que estamos utilizando la nueva versión de Leaflet 1.5.1 lanzada el 8 de Mayo del 2019.

La segunda parte del código que también se incluye en el head, hace referencia a los estilos de este mapa en particular, en nuestro caso le estamos obligando a que el mapa ocupe el 100% de la ventana, sin márgenes ni bordes.

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

Una variante de este estilo es por ejemplo si queremos insertar el mapa en un post o parte de una página web, en ese caso:

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

Donde height es la altura en píxeles.

La tercera parte del código y una vez dentro del cuerpo o body, corresponde al contenedor, veréis que esta directamente relacionado con los estilos (#map), ya que tiene un identificador id=map.

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

Finalmente, la parte del script esta dividida en 3 partes importantes:

La parte que hace referencia a las coordenadas geográficas del punto central del mapa en grados decimales, donde la primera coordenadas es la Latitud y la segunda coordenada es la Longitud.

El numero que aparece a continuación es el factor de escala del mapa, donde 1 es escala pequeña y los siguientes números escalas más grandes.

En el apartado atribución se identifica a los creadores del código Javascript, como Leaflet y la fuente de la base de datos como OpenStreetMap así como la lincencia, en este caso CC BY-SA.

Y para cerrar la parte del Script podemos añadir el zoom máximo del mapa (maxZoom: 18).

						
<script>
	var map = L.map('map').
	setView([42.55382, 0.258526], 
	13);
	 
	L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	    attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
	    maxZoom: 18
	}).addTo(map);
</script>
						
					

Modificando mínimamente este código podemos hacer mapas muy atractivos, rápidos y responsivos.

¿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