Inicio Rápido de Leaflet ¶

Leaflet es una biblioteca de JavaScript para mapas interactivos basados en navegador y optimizados para dispositivos móviles. Es ligero, pero cuenta con todo la que mayoría de los desarrolladores nunca necesidad de mapas en línea. Folleto está diseñado con simplicidad, rendimiento y usabilidad en mente.

Contenidos

Inicio Rápido de Leaflet

Ejecución ¶

Antes de ejecutar este inicio rápido, debe iniciar MapProxy. En OSGeoLive esto se puede encontrar en Geospatial\Web Services\MapProxy\Start MapProxy. Esto proporcionará mosaicos de fondo que se utilizarán en esta demostración.

Ver el ejemplo

Truco

Si está leyendo esta guía de inicio rápido fuera de OSGeoLive puede preferir leer la demo original en: https://leafletjs.com/examples/quick-start/, ya que esta demostración utiliza Tilestache en OSGeoLive.

Preparando su página ¶

Antes de escribir cualquier código para el mapa, tienes que hacer los siguientes pasos de la preparación en tu página:

Incluya archivos Leaflet CSS de folleto en el encabezado de su documento

<link rel="stylesheet" href="/leaflet/leaflet.css" />

Incluye archivo Leaflet JavaScript:

<script src="/leaflet/leaflet.js"></script>

Ponga un elemento div con cierto id donde quiera que esté su mapa:

<div id="map"></div>

Asegúrese de que el contenedor del mapa tiene una altura definida, por ejemplo configurándolo en CSS:

#map { height: 180px; }

Ahora estás listo para inicializar el mapa y hacer algunas cosas con él.

Configurar el mapa ¶

Vamos a crear un mapa de Florencia, Italia con una indicación de la conferencia FOSS4G 2022. Primero inicializaremos el mapa y estableceremos su vista en las coordenadas geográficas elegidas y un nivel de zoom:

var map = L.map('map').setView([43.77913, 11.24938], 15);

De manera predeterminada (al no pasar cualquier opción al crear la instancia de mapa), todas las interacciones con el mouse y el tacto en el mapa están habilitadas, y tiene controles de zoom y de atribución.

Tenga en cuenta que la llamada a setView también devuelve el objeto de mapa - la mayoría de los métodos de Leaflet actúan de esta manera cuando no devuelven un valor explícito, lo que permite el conveniente encadenamiento del método jQuery-like.

A continuación, agregaremos una capa de mosaico a nuestro mapa. En este caso, utilizaremos las imágenes de mosaico proporcionadas por MapProxy en el DVD en vivo. Tenga en cuenta que el uso de mapas de fondo más agradables, como openstreetmap, dará como resultado una experiencia de usuario mucho mejor.

La creación de una capa de teselas generalmente implica configurar la plantilla de la URL de las imágenes de azulejo, el texto de atribución y el máximo nivel de acercamiento de la capa:

L.tileLayer('http://localhost:8011/wmts/mapnik_tile/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png',{}).addTo(map);

Si usted tiene acceso en línea, puede que desee utilizar un tilemap mejor como fondo:

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:18, attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

Asegúrese de después de la inclusión div and leaflet.js. ¡Eso es!. Ahora usted tiene un mapa de folleto en funcionamiento.

Cabe destacar que Leaflet es independiente del proveedor, lo que significa que no impone una opción particular de proveedores para las teselas y ni siquiera contiene una sola línea de código específica del proveedor, por lo que puede usar otros proveedores si lo necesita.

Marcadores, círculos y polígonos ¶

Además de capas de teselas, udted puede puede agregar fácilmente otras cosas a su mapa, incluyendo marcadores, polilíneas, polígonos, círculos y ventanas emergentes. Vamos a añadir un marcador:

var marker = L.marker([43.77913, 11.24938]).addTo(map);

Para añadir un círculo es igual (excepto para especificar el radio en metros como un segundo argumento), pero le permite controlar cómo se ve pasando opciones como el argumento pasado al crear el objeto:

var circle = L.circle([43.777, 11.255], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Agregar un polígono es tan fácil:

var polygon = L.polygon([
    [43.775, 11.247],
    [43.784, 11.240],
    [43.778, 11.238]
]).addTo(map);

Trabajando con ventanas emergentes ¶

Las ventanas emergentes se utilizan generalmente cuando se desea adjuntar alguna información a un objeto determinado en el mapa. Leaflet tiene un atajo muy útil para esto:

var popup = L.popup()
   .setLatLng([43.77913, 11.24938])
   .setContent("FOSS4G is here this year!")
   .openOn(map);

Aquí utilizamos openOn en vez de addTo porque maneja el cierre automático de una ventana emergente previamente abierta al abrir una nueva que es buena para la usabilidad.

Tratando con eventos ¶

Cada vez que algo sucede en Leaflet, por ejemplo, el usuario hace click en un marcador o cambia el acercamiento del mapa el objeto correspondiente envía un evento que puede suscribirse a una función. Esto le permite reaccionar ante la interacción con el usuario:

function onMapClick(e) {
   alert("You clicked the map at " + e.latlng);
}

map.on('click', onMapClick);

Cada objeto tiene su propio conjunto de eventos - vea documentation para más detalles. El primer argumento de la función del oyente es un objeto de evento - contiene información útil sobre el evento que sucedió. Por ejemplo, el objeto de evento de un click en el mapa (e en el ejemplo anterior) tiene una propiedad latlng que es una ubicación en la que se produjo el click.

Vamos a mejorar nuestro ejemplo mediante una ventana emergente en lugar de una alerta:

var popup = L.popup();

function onMapClick(e) {
   popup
        .setLatLng(e.latlng)
        .setContent("You clicked the map at " + e.latlng.toString())
         .openOn(map);
}

map.on('click', onMapClick);

Pruebe haciendo click en el mapa y verá las coordenadas en una ventana emergente. Ver el ejemplo completo

¿Qué sigue?¶

Ahora usted ha aprendido lo básico sobre Leaflet y puede empezar a construir aplicaciones mapa enseguida! No te olvides de echar un vistazo a la documentation detallada u otros ejemplos.