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