Scribd
Cargar
215 vistas7 páginas

INTRODUCCIÓN A LEAFLETjs

Leaflet.js es una librería JavaScript para crear mapas interactivos. Permite usar diferentes fuentes de mosaicos para generar mapas. Crear un mapa con Leaflet.js requiere referenciar la librería, crear un elemento <div> para el mapa, crear un objeto Map y agregar una capa al mapa. Leaflet.js también permite conectarse a servicios WMS para mostrar capas de mapas dinámicas. Se pueden combinar capas WMS con otras como OpenStreetMap y agregar selectores de capas para alternar entre ellas.

Cargado por

Francisco Herrera García
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
215 vistas7 páginas

INTRODUCCIÓN A LEAFLETjs

Leaflet.js es una librería JavaScript para crear mapas interactivos. Permite usar diferentes fuentes de mosaicos para generar mapas. Crear un mapa con Leaflet.js requiere referenciar la librería, crear un elemento <div> para el mapa, crear un objeto Map y agregar una capa al mapa. Leaflet.js también permite conectarse a servicios WMS para mostrar capas de mapas dinámicas. Se pueden combinar capas WMS con otras como OpenStreetMap y agregar selectores de capas para alternar entre ellas.

Cargado por

Francisco Herrera García
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

INTRODUCCIÓN A LEAFLET.

js

¿Que es Leaflet.js?

Leaflet.js es una libreria en java script para la creación de mapas interactivos que
permite el uso de diferentes fuentes de mosaicos para generar nuestros mapas.

¿Cómo se crea un mapa con Leaflet.js?

En realidad es muy simple, la estructura básicas es la misma que las librerias anterio-
res con Java script, primero se crea una página base en HTML 5.

<!DOCTYPE html>
<html>
<head>
<title>My Leaflet.js Map</title>
</head>
<body>
</body>
</html>

Pasos para crear un mapa.

Para poder crear un mapa, se deben seguir los siguientes pasos:

Hacer referencia a la libreria Leaflef.js


Crear un elemento <div> donde se visualizará el mapa
Crear un objeto Map.
Agregar una capa al mapa.

¿Cómo hacer referencia al Leaflet.js en el código?

Se pueden utilizar los 2 métodos ya conocidos:

1. Hacer referencia vía CDN (Content Deliver Network )


2. Descargar la libreria Leaflet.js en el servidor web donde se aloja la página.

¿Cómo se puede acceder a la libreria Leaflet.js vía CDN?

Para tener acceso a la librería, se debe hacer referencia al CSS vía una etiqueta
<link> y al código en JavaScript vía una etiqueta <script>.

<!DOCTYPE html>
<head>
<title>Tutorial leaflet.js</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/lea-
flet.css" />
</head>
<body>
<h1>Leaflet.js Demo</h1>
<div id="map" style="height: 100%"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lea-
flet/1.5.1/leaflet.js"></script>
</body>
</html>

¿Cómo se puede instalar en el servidor web ?

En esta sección se sume, que se está utilizando el servidor web que se instaló en el te-
ma 2 de este curso.

Considerando lo anterior, los pasos son los siguientes:

1.- Se ingresa a la carpeta /var/www/html

2.- Se crea la carpeta leaflet

3.- Se ingresa a la carpeta leaflet.

4.- se descarga leaflet.

wget http://cdn.leafletjs.com/leaflet/v1.5.1/leaflet.zip

5.- Se descomprime el archivo.

unzip leaflet.zip

Creando un objeto map.

Para crear un objeto map, es necesario es necesario crear una función en Javascript y
esperar que todos los elementos del hipertexto se carguen y entonces se manda a lla-
mar.

Es necesario, que se especifique por lo menos el archo del mapa para que este se des-
pliegue.

Ejemplo:

<!DOCTYPE HTML >


<head>
<script type="text/javascript">
function init() {
alert("Listo!");
}
</script>
<style>
#map {
height: 400px;
}
</style>
</head>
<body onload=init()>
<div id="map"> </div>
</body>
</html>

Ahora, se tomará este código como base y se creará un objeto mapa.

<!DOCTYPE HTML >


<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/lea-
flet.js"></script>
<script type="text/javascript">
function init() {
var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
var map = L.map('map').setView([ 18.5222381,-88.3397984], 12);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data &copy;
' + osmLink,maxZoom: 18,}).addTo(map);
}
</script>
<style>
#map {
height: 400px;
}
</style>
</head>
<body onload=init()>
<div id="map"> </div>
</body>
</html>

La forma como funciona la definición del objeto es la siguiente:

L.map('map') : Es el constructor de map. Con respecto a la L, todos los objetos Lea-


flet.js, empiezan con una L. Este contrctor toma 2 argumentos que son: El elemento
HTML que se utilizará para su despliegue (en este ejemplo map) y un objeto que de-
fine algunas opciones de depliegue.
.setView(...) : Una vez que se tiene el objeto tipo map, se llama al método setView
para tranferir la extensión (extent) del mapa. La extensión, es el área visible del mapa
que se desea visualizar. Este método recibe 2 parámetros: una arreglo que contiene la
longitud y latitud del centro del mapa y un segundo parámetro que representa el nivel
de zoom inicial.

El constructor L.tileLayer, se conecta a OpenStreetMap e inserta un mapa en la pági-


na. Si se visualiza este código debe poder observerse lo siguiente:

Conexión al servicio WMS.

Debido a al enfoque se ha seguido durante este diplomado, nos enfocaremos a extraer


información de un servidor con servicio WMS (Web Map Service) .

Como se recordará, WMS es un estándar para servir imagenes de mapas sobre Inter-
net y es un estandar definido por el Open Geospatial Consortium. A diferencia de las
capas de mosaico que hemos visto hasta ahora, o GeoServer, el servidor de mapas
consulta una base de datos espacial que contiene todos los datos necesarios para ge-
nerar el mapa dinámicamente, crea las imágenes requeridas y luego las envía al
navegador para mostrar. Los beneficios de generar imagenes de esta manera, es por
ejemplo qe no está limitado a los niveles de zoom a los cuales fueron creados los mo-
saicos.

Un primer ejemplo:

<!DOCTYPE HTML >


<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/lea-
flet.js"></script>
<script type="text/javascript">
function init() {
var map = L.map('map').setView([39.0708885,-101.5592468], 4);
L.tileLayer.wms("http://127.0.0.1:8080/geoserver/wms/topp", {
layers: 'topp:states',
format: 'image/png',
transparent: true,
attribution: "<a href='http://www.boundlessgeo.com'>OpenGeo</a>"
}).addTo(map);
}
</script>
<style>
#map {
height: 400px;
}
</style>
</head>
<body onload=init()>
<div id="map"> </div>
</body>
</html>

Siguiendo la estructura descrita anteriormente, se genera un mapa, con la diferencia


que ahora se utiliza L.tileLayer.wms , para conectarse a un servicio en este caso Geo-
Server.

El resultado final se muestra a continuación.

Un segundo ejemplo: Combinando 2 tipos de capas.

El siguiente ejemplo, combina un mapa en Geoserver con Un mapa en OpenStreet-


Map.

<!DOCTYPE HTML >


<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/lea-
flet.js"></script>
<script type="text/javascript">
function init() {
var map = L.map('map').setView([39.0708885,-101.5592468], 4);
var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution: 'Map data
&copy; ' + osmLink,maxZoom: 18,}).addTo(map);
L.tileLayer.wms("http://127.0.0.1:8080/geoserver/wms/topp", {
layers: 'topp:states',
format: 'image/png',
transparent: true,
attribution: "<a href='http://www.boundlessgeo.com'>OpenGeo</a>"
}).addTo(map);
}
</script>
<style>
#map {
height: 400px;
}
</style>
</head>
<body onload=init()>
<div id="map"> </div>
</body>
</html>

Como se puede observer en el código anterior, el código en café, genera un nuevo


mapa con las cordenadas del centro. El código en azúl agrega la capa en OpenStreet-
Map al mapa y el código en rojo, agrega un mapa de GeoServer para las mismas
coordenadas.

El resultado final se muestra en la siguiente imagen:

Selección entre mútiples capas.

Ahora, se va agregar un selector de capas.

<!DOCTYPE HTML >


<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/lea-
flet.js"></script>
<script type="text/javascript">
function init() {
var map = L.map('map').setView([39.0708885,-101.5592468], 4);
var osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
var OpenStreet =L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribu-
tion: 'Map data &copy; ' + osmLink,maxZoom: 18,}).addTo(map);
var Geoserver= L.tileLayer.wms("http://127.0.0.1:8080/geoserver/wms/topp", {
layers: 'topp:states',
format: 'image/png',
transparent: true,
attribution: "<a href='http://www.boundlessgeo.com'>OpenGeo</a>"
}).addTo(map);
var baseLayers = {
"OpenStreetMap": OpenStreet,
"GeoServer": Geoserver,
};
L.control.layers(baseLayers).addTo(map);
}
</script>
<style>
#map {
height: 400px;
}
</style>
</head>
<body onload=init()>
<div id="map"> </div>
</body>
</html>

Como se puede observar el código en rojo, se han agregado una variable a cada capa,
posteriormente en un arreglo llamado baseLayers en donde se relacionan las capas
con sus etiquetas. y al final se llama a L.control.layers para agregar los controles al
mapa.

Al final el mapa debe ver como se ilustra a continuación:

En la esquina superior derecha, aparece el selector de capas.

También podría gustarte