Scribd
Cargar
30 vistas

LeafletJS Teórico Módulo I

El documento introduce la librería Leaflet para crear mapas en la web. Explica que Leaflet requiere HTML, CSS y JavaScript. Detalla los pasos para crear un mapa básico con Leaflet: 1) Cargar Leaflet en el encabezado, 2) Usar la clase L.map para generar el mapa dentro de un divisor, configurando opciones como el centro y zoom, 3) Agregar una capa base de tiles como OpenStreetMap usando la clase L.tileLayer.

Cargado por

Romina Rodriguez
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
30 vistas

LeafletJS Teórico Módulo I

El documento introduce la librería Leaflet para crear mapas en la web. Explica que Leaflet requiere HTML, CSS y JavaScript. Detalla los pasos para crear un mapa básico con Leaflet: 1) Cargar Leaflet en el encabezado, 2) Usar la clase L.map para generar el mapa dentro de un divisor, configurando opciones como el centro y zoom, 3) Agregar una capa base de tiles como OpenStreetMap usando la clase L.tileLayer.

Cargado por

Romina Rodriguez
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/ 18

Leaflet 1.

8
Objetivos

● Introducir al estudiante a la librería de mapas Leaflet


● Conocer la estructura necesaria para el funcionamiento de la
librería
Módulo I

● Introducción a Leaflet
● La clase L.map
● Añadir un tile layer
Introducción a Leaflet
Introducción a Leaflet
Leaflet es una librería de Javascript, libre y de código abierto lanzada en 2011 para el
diseño y creación de mapas en la web (web mapping).

Esta librería es compatible con capas provenientes de geoservicios WMS, GeoJSON,


raster, entre otras. A su vez, incrementa sus prestaciones a través de plugins,
desarrollados por la comunidad.
Editores de código para Leaflet
Leaflet ha sido desarrollada para entornos web, por lo tanto, requiere conocimientos
de HTML, CSS y Javascript. Algunos editores creados para estas actividades son:

• Visual Studio Code


• Sublime Text
• Atom

En este curso utilizaremos un editor de texto genérico como es Notepad++ y


comprobaremos el funcionamiento de los scripts con el navegador web que
utilizamos diariamente.

Componentes de una página web Editor de texto


Estructura de un HTML
HTML es un lenguaje de marcado, su nombre proviene de HyperText Markup
Language (lenguaje de marcado de hipertexto). El contenido del documento HTML
se incluye en etiquetas que son interpretadas por el navegador web y mostradas al
usuario.

Un documento HTML tiene tres etiquetas que describen su estructura:

1. <html>: Todo el contenido irá dentro de estas etiquetas


2. <head>: Esta etiqueta contiene información importante como el título de la
página web, descripción, metadatos y otras que utilizaremos para cargar la
librería Leaflet. El contenido de esta etiqueta no es visible por el usuario.
3. <body>: Esta etiqueta incluye el contenido que será visible en la página web,
por lo que alojará el mapa.
Documento HTML básico
En el material de ejemplo podemos acceder al documento HTML que utilizaremos
como base para esta capacitación. El mismo se llama 00_html_basico.html y tiene
la siguiente estructura:
Documento HTML básico
En el documento base se observa:
• Las etiquetas <html> y </html> que envuelven
todo el documento.
• Las etiquetas <head> y </head> que dan inicio y
fin a la información del encabezado:
• <title> contiene el título de la página web
que vemos en el navegador.
• <style> que define el estilo con que se verá
la pagina (CSS).
• <body> y </body> que contiene:
• divisor <div> que alojará nuestro primer
mapa web.
• Etiquetas <script> que contendrán el código
Javascript.
Cargar la librería Leaflet
Para cargar Leaflet a nuestra página web será necesario incorporar las etiquetas
<link> y <script> dentro del encabezado (<head> y </head>). En ellas se
direccionará al sitio oficial de Leaflet que contiene todas las funcionalidades para
crear y manipular mapas. El código deberá quedar de la siguiente forma:

<head>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"


integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40k
iNHxM9vyTtQ==" crossorigin="" />

<scriptsrc="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nA
hlwcDFLGPCQ==" crossorigin=""></script>

</head>
La clase L.map
La clase L.map
La clase L.map genera un objeto mapa dentro de una etiqueta <div> y configura las
opciones iniciales (ubicación, zoom, layers, etc). Este código Javascript debe ser
creado dentro de las etiquetas <script> y </script> contenidas en el <body>.

La utilización de la clase L.map es la siguiente:

var map = L.map('map', opcionesMapa);

En esta línea de código se crea la variable map que contiene el objeto mapa. ‘map’
es el id de la etiqueta <div>, con esta sentencia el navegador reconoce el divisor y
aloja el mapa en él. opcionesMapa son definiciones que veremos a continuación
Opciones iniciales del mapa
Hay 3 opciones fundamentales para un mapa, de las cuales 2 de ellas son
obligatorias:

1. center: Define el centro geográfico del mapa a través de coordenadas WGS84.


2. zoom: Define el nivel de zoom inicial.
3. layers: Son las capas añadidas de manera inicial. No obligatoria.

Otras opciones comúnmente utilizadas son:

• minZoom y maxZoom: Mínimo y máximo niveles de zoom permitidos.


• zoomControl: Muestra los botones de zoom.
• attributionControl: Muestra las fuentes de las capas mostradas en el mapa.

Atribución de un mapa
Opciones iniciales del mapa
Las opciones son definidas como un objeto literal de Javascript. Su estructura es la
siguiente:

var opcionesMapa = { center: [-40.3727, -67.3969],


zoom: 6,
zoomControl: false,
attributionControl: false,
}
Añadir un tile layer
Añadir un tile layer
Las capas teseladas (tile layer) son servicios que descomponen una imagen en
porciones de 256x256 píxeles a distintos niveles de zoom. De esta forma se
disponibilizan las imágenes de una manera ágil.

Incorporaremos OpenStreetMap como base de nuestro mapa. Para ello utilizamos


la clase L.tileLayer de la siguiente manera:

var mapaBase = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',


{attribution:'OpenStreetMap contributors'}
).addTo(map);

Donde 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' es la URL del servicio,


attribution brinda información sobre la fuente de datos y addTo(map) agrega esta
capa al mapa recientemente creado.
Código de ejemplo
El archivo 01_primer_mapa.html contiene el código completo de este módulo.

Se recomienda abrirlo con el navegador y con el editor de textos para reconocer los
tópicos tratados.
Páginas web
• Leaflet Docs: https://leafletjs.com/reference.html

• Leaflet Tutorials: https://leafletjs.com/examples.html

• Leaflet Tips and Tricks: https://leanpub.com/leaflet-tips-and-tricks/read

También podría gustarte