../_images/logo_leaflet.png

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.

Ejecución

Antes de ejecutar esta Guía de Inicio Rápido debe iniciar TileStache. Esto puede encontrarse en Geospatial\Spatial Tools\Start Mapnik & TileStache. Esto proporcionará teselas de fondo que se utilizarán en esta demo.

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" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="/leaflet/leaflet.ie.css" />
<![endif]-->
  • 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 el este de África con una indicación de la Conferencia FOSS4G de 2018. Primero vamos a inicializar el mapa y estableceremos su vista en nuestras coordenadas geográficas elegidas y a un nivel de acercamiento:

var map = L.map('map').setView([44.43743, 26.104], 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 vamos a añadir una capa de teselas a nuestro mapa. En este caso vamos a usar las imágenes de teselas proporcionadas por TileStache en el dvd en vivo. Tenga en cuenta que el uso de mapas de fondo más agradables como openstreetmap dará como resultado una mejor experiencia de usuario.

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:8012/example/{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([44.437 ,26.104]).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([44.435, 26.11], 250, {
   color: 'red',
   fillColor: '#f03',
   fillOpacity: 0.5
}).addTo(map);

Agregar un polígono es tan fácil:

var polygon = L.polygon([
    [44.433, 26.102],
    [44.442, 26.095],
    [44.436, 26.093]
]).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([44.437, 26.104])
   .setContent("I am a standalone popup.")
   .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.