Que es Leaflet y cómo usarlo

Leaflet es la biblioteca líder de JavaScript de código abierto para mapas interactivos optimizados para dispositivos móviles. Con un peso de solo 38 KB de JS, tiene todas las funciones de mapeo que la mayoría de los desarrolladores necesitan.

Algunas de las características de Leaflet son:

  • Capas fuera de la caja: Azulejos de capas, WMS, Marcadores, ventanas emergentes, Capas de vectores: polilíneas, polígonos, círculos, rectángulos, Superposiciones de imágenes y GeoJSON.
  • Funciones de personalización: Pura ventanas emergentes CSS3 y controles para un fácil rediseño, marcadores basados ​​en imágenes y HTML, una interfaz simple para capas y controles de mapas personalizados, proyecciones de mapas personalizados (con EPSG: 3857/4326/3395 fuera de la caja) y poderosas instalaciones de OOP para extender las clases existentes.
  • Controles de mapa: Botones de zoom, atribución, conmutador de capas y escala.
  • Funciones de interacción: Arrastre de paneo con inercia, rueda de desplazamiento zoom, pellizcar-acercar en el móvil, doble clic en el zoom, zoom al área (desplazamiento-arrastre), navegación por el teclado, eventos  (clic, mouseover, etc.) y marcador arrastrando.
  • Características de rendimiento: La aceleración de hardware en dispositivos móviles hace que se sienta tan bien como las aplicaciones nativas, utilizando las características de CSS3 para hacer que la panorámica y el zoom sean realmente suaves, la representación inteligente de polilínea / polígono con recorte dinámico y simplificación lo hace muy rápido, sistema de construcción modular para omitir características que no necesita y eliminación de retraso de tap en el móvil.
  • Características visuales: Zoom y pan animación, animación de fundido de azulejos y ventanas emergentes, muy buen diseño predeterminado para marcadores, ventanas emergentes y controles de mapa, soporte de resolución retina.
  • Soporte de escritorio: Firefox, Safari, 5+, Opera 12+, IE 7–11.
  • Soporte Móvil: Safari for iOS 7+, Android browser 2.2+, 3.1+, 4+, Chrome for mobile, Firefox for mobile, IE10+ for Win8 devices.

Que es Leaflet y cómo usarlo


Leaflet está diseñado con la simplicidad, el rendimiento y la facilidad de uso en mente. Funciona de manera eficiente en todas las principales plataformas de escritorio y dispositivos móviles, se puede ampliar con muchos complementos, tiene una API hermosa, fácil de usar y bien documentada, y un código fuente simple y legible.

Tenemos un código html que describe el uso del Leaflet:


<!DOCTYPE html><html>
<meta charset="utf-8" />
<head>
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />

 <style>
  #map { 
  widh: 50px;
  height: 600px; }
 </style>
 </head>
  <body>
   <div id="map"></div>
 <script>
var map = L.map('map').
setView([41.66, -4.72], 
14);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
    maxZoom: 18
}).addTo(map);

L.control.scale().addTo(map);
L.marker([41.66, -4.71], {draggable: true}).addTo(map);

 </script>
 </body> 
 </html>

Si este código lo guardamos en un bloc de notas como un archivo HTML y se abre en un navegador de Internet nos da como resultado lo siguiente:


Si deseas obtener documentación para aprender a utilizar Leaflet más a fondo, puedes utilizar los tutoriales que vienen en el siguiente vínculo.


Algunos complementos que utilizan Leaflet se encuentran el siguiente sitio.

Síguenos en las redes sociales

Blog SIG en Google+ Blog SIG en Facebook @Blog SIG en Twitter

Buscar en este blog

No hay comentarios.:

Publicar un comentario

Tu comentario es muy valioso, participa...