GIS / Webmapping

INSERTANDO NUESTRO PRIMER MAPA BASE CON LEAFLET.

La clase L.map de Leaflet nos permite crear un mapa y manipularlo, estableciendo una serie de opciones para personalizar nuestro proyecto cómo el nivel de zoom o el centro del mapa.

En la primera parte del proyecto nos introdujimos en Leaflet, viendo las características de la librería y el lenguaje utilizado y aplicarlo para obtener una plantilla en nuestro diseño web. En esta segunda parte trataremos de enseñar como crear un mapa base de Open Street Maps en nuestro visor y configurar las opciones de zoom y límite del marco a visualizar.

La clase L.map de Leaflet es la clase central de la API permitiéndonos crear el mapa y manipularlo. Podremos definir una serie de opciones para configurar nuestra vista, pero muchas otras vienen por defecto con la clase L.map. De todas las opciones quizás las más importantes sean: center y zoom. Con Center definimos las coordenadas del centro del mapa mediante su longitud y latitud y con Zoom el nivel de zoom inicial del mapa.

var map = L.map(‘map’, {center: [38.085, -0.946], zoom: 15});

En el siguiente ejemplo podemos ver cómo hemos definido la clase L.map en nuestro Proyecto para centrarnos en el casco histórico del municipio de Orihuela y estableciendo las coordenadas que restringe la visualización dentro de las coordenadas del término municipal.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
	<style>
		#map {
			width: 700px;
			height: 600px; }
	</style>
</head>
<body>
	<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
	<div id ="map">  </div>
	<script>
		var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
		var map = L.map('map', {
				center: [38.085, -0.946],
				zoom: 15,
				maxBounds: [
					//sureste
					[37.879, -0.713],
					//noroeste
					[38.338, -1.093]
					],
				layers: osm					});
	</script>
</body>
</html>

Desgranando el código utilizado podemos ver que se ha creado primero el objeto osm, al que asignamos la capa de OpenStreetMap, mediante la utilización de L.tilelayer. A continuación, añadimos la capa al objeto map con la opción layer: osm. Además de añadir la opción Center, Zoom y maxBounds (limitar el mapa a las coordenadas de entrada). Recordemos que los navegadores leen el Javascript siguiendo el orden de escritura y que, por lo tanto, necesitamos añadir primero la capa para evitar errores de lectura.

Add Comment

Click here to post a comment

¡SIGUE MI PROYECTO!