AÑADIENDO FUNCIONALIDAD AL PROYECTO LEAFLET (MAPA DE LOCALIZACIÓN Y CONTROLES).

En la presente publicación trataremos de añadir funcionalidad al proyecto con Leaflet mediante la inclusión de un mapa de localización y una serie de controles para interactuar con la vista (escala y opción de pantalla completa).

Hoy os traemos una tercera de entrega de “Cómo realizar un Proyecto de Visor de mapas con Leaflet”, esta vez añadiendo funcionalidad al mapa mediante la inclusión de un mapa de localización y controles de escala y opción de pantalla completa. Podéis echarles un vistazo a las publicaciones anteriores en relación a este proyecto:

1era Parte. Cómo empezar con un Proyecto de Visor Webmapping. Trabajando con la librería Leaflet.
2da Parte. Insertando nuestro Primer mapa base con Leaflet.

Como hemos comentado en más de una ocasión, una de las grandes ventajas de utilizar esta librería para publicar mapas en la web es el gran catálogo de plugins disponibles para añadirlos a nuestro proyecto. Se acceden a ellos desde la página oficial de Leaflet https://leafletjs.com/plugins.html

La funcionalidad objeto de este post se realiza mediante la descarga de la carpeta localizada en un repositorio con el paquete de archivos y códigos de llamada que harán funcionar al complemento. Lo probamos buscando el plugin denominado leaflet.fullscreen de Bruno B y accediendo a su repositorio.

Nos lleva directamente al perfil de github del desarrollador con los archivos que componen el plugin y un pequeño resumen con las especificaciones del complemento y su utilización con la librería Leaflet. Pinchamos en Code y seguidamente descargamos el plugin clicando en Download ZIP.

Se habrá creado una carpeta denominada leaflet.fullscreen-master, que contiene las instrucciones y los archivos necesarios para instalar el plugin. Los archivos que realmente nos interesan con Control.FullScreen.css (archivo de estilo css) y Control.FullScreen.js (funcionalidad mediante javascript). Dales un directorio fácil de reconocer pues tendremos que hacer referencia a estos archivos, en mi caso los ordeno por carpetas según formatos.

De esta manera incluimos las referencias a los archivos en la cabecera de nuestro código:

<!-- Leaflet Plugins -->
     <!-- CSS  --> 
	   <link rel="stylesheet" href="recursos/css/Control.MiniMap.css"/>
	   <link rel="stylesheet" href="recursos/css/Control.FullScreen.css"/>	
    <!-- Libreria JS -->		
	   <script src="recursos/js/Control.MiniMap.js"type="text/javascript"></script>
	   <script src="recursos/js/Control.FullScreen.js"></script>

Utiliza el archivo README que te guiará mediante ejemplos e indicaciones que aparecen en el plugin para insertar nuestro código. El plugin para insertar nuestro mapa de localización encontraremos el plugin en la documentación de la API con el nombre Leaflet.MiniMap.

Por último, para insertar la escala acudiremos de nuevo a la API de Leaflet dónde nos indicará que mediante el siguiente código podemos incluir un control simple de escala que puede ampliarse utilizando diferentes opciones.

L.control.scale().addTo(map);

El Código completo sería el siguiente:

<!DOCTYPE html>
<html>
	<head>
<link rel="stylesheet"href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
		<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

<!-- Leaflet Plugins -->
		<!-- CSS  --> 
			<link rel="stylesheet" href="recursos/css/Control.MiniMap.css"/>
			<link rel="stylesheet" href="recursos/css/Control.FullScreen.css"/>
			
		<!-- Libreria JS -->		
			<script src="recursos/js/Control.MiniMap.js"type="text/javascript"></script>
			<script src="recursos/js/Control.FullScreen.js"></script>		
				<style>
					#map {
					width: 700px;
					height: 600px; }
				</style>
	</head>
	<body>
		<div id ="map"> </div>
		<script>
			var map = L.map('map', {center: [38.085, -0.946],zoom: 15,maxBounds: [
					//sureste
					[37.879, -0.713],
					//noroeste
					[38.338, -1.093]
					] });
			var osm = new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
				
	<!-- Añadiendo Mapa de Localización -->	
		
var osm2 = new L.TileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {minZoom:
					0, maxZoom: 13});
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);
				
	<!-- Controles -->	
	// Añadir control de escala
		var escala = L.control.scale({ position: 'bottomleft', metrical: false, maxWidth: 200});
		map.addControl(escala);	 
	// Añadir FullScreen									
		map.addControl(new L.Control.FullScreen());	
</script>
	</body>
</html>