Leaflet es una biblioteca de JavaScript que se utiliza para crear aplicaciones de mapas web . Permite a los desarrolladores sin experiencia en SIG mostrar mapas web en mosaico alojados en un servidor público, con superposiciones en mosaico opcionales. Puede cargar datos de entidades desde archivos GeoJSON , aplicarles estilo y crear capas interactivas, como marcadores con ventanas emergentes al hacer clic.
Lanzado por primera vez en 2011, [3] es compatible con la mayoría de las plataformas móviles y de escritorio, y admite HTML5 y CSS3 . Entre sus usuarios se encuentran FourSquare , Pinterest , Flickr y el USGS .
Leaflet es de código abierto y está desarrollado por Volodymyr Agafonkin, quien se unió a Mapbox en 2013. [4]
Un uso típico de Leaflet implica vincular un elemento "mapa" de Leaflet a un elemento HTML como un div . Luego se agregan capas y marcadores al elemento del mapa.
< html > < head > < title > Ejemplo de mapa de folleto < /title> <!-- Enlace al archivo CSS del folleto --> < link rel = "stylesheet" href = "https://unpkg.com/[email protected]. 1/dist/leaflet.css" /> <!-- Enlace al archivo JavaScript del folleto --> < script src = "https://unpkg.com/[email protected]/dist/leaflet.js" >< / script > <estilo> # mapa { altura : 250 px ; ancho : 400 píxeles ; borde : 1 px gris sólido ; } < /style> < /head> < body > < div id = "map" >< /div> < script > // Inicializa el mapa var map = L . mapa ( 'mapa' ). setView ([ 51.505 , - 0.09 ], 13 ); // Agrega la capa de mosaico (puedes elegir un estilo de mapa diferente cambiando la URL ) L. TileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { atribución : '© <a href="http://openstreetmap.org /copyright">OpenStreetMap</a> colaboradores' }). agregarA ( mapa ); // Agrega una superposición de círculo con un radio y color específicos var círculo = L. círculo ([ 51.508 , - 0.11 ], { color : 'rojo' , radio : 500 // Radio en metros }). agregarA ( mapa ); // Agrega un marcador con un marcador var emergente = L. marcador ([ 51.5 , - 0.09 ]). agregar a ( mapa ) . bindPopup ( '<b>¡Hola mundo!</b><br/> Soy una ventana emergente.' ); < /script> < /cuerpo> < /html>En este ejemplo de código, se puede acceder a la biblioteca Leaflet a través de la variable L.
Leaflet admite capas de Web Map Service (WMS), capas GeoJSON , capas vectoriales y capas de mosaicos de forma nativa. Muchos otros tipos de capas son compatibles mediante complementos .
Al igual que otras bibliotecas de mapas web, el modelo de visualización básico implementado por Leaflet es un mapa base, más cero o más superposiciones translúcidas, con cero o más objetos vectoriales mostrados en la parte superior.
Los principales tipos de objetos de folletos son: [5]
También hay una variedad de clases de utilidades, como interfaces para gestionar proyecciones, transformaciones e interactuar con el DOM .
Leaflet tiene soporte básico para múltiples formatos estándar SIG, y otros son compatibles con complementos.
Leaflet 0.7 es compatible con Chrome, Firefox, Safari 5+, Opera 12+ e IE 7–11. [11]
OnEachFeature del folleto es bastante útil cuando se trata, por ejemplo, de datos geojson. La función contiene dos parámetros: "característica" y "capa". "Característica" nos permite acceder a cada objeto dentro del geojson y "capa" nos permite agregar ventanas emergentes, información sobre herramientas, etc.
A continuación se proporciona un ejemplo en javascript:
sea geoJson = L . geoJSON ( geoJsonData , { peso : 2 , onEachFeature : getFeature , estilo : getStyle }). agregarA ( mapa ); const getFeature = ( característica , capa ) =>{ if ( ! característica . propiedades . nombre ) devolver capa . bindTooltip ( característica . propiedades . nombre de la ciudad ); capa . bindPopup ( ` <ul> <li>Nombre: ${ característica . propiedades . nombre de la ciudad } </li> <li>Población: ${ característica . propiedades . población } </li> </ul> ` ) También es posible agregar la palabra clave "async" a la función getFeature para utilizar promesas como fetch(). Podemos utilizar propiedades en cada objeto de geojson para crear jsonqueries personalizados y obtener, por ejemplo, información específica de la ciudad y mostrarla usando Layer.bindTooltip, Layer.bindPopup, etc.
Leaflet es directamente comparable con OpenLayers , ya que ambas son bibliotecas de JavaScript de código abierto, solo del lado del cliente. La biblioteca en su conjunto es mucho más pequeña, alrededor de 7.000 líneas de código en comparación con las 230.000 de OpenLayers (a partir de 2015). [12] Tiene una huella de código más pequeña que OpenLayers (alrededor de 123 KB [13] frente a 423 KB [14] ) debido en parte a su estructura modular. La base del código es más nueva y aprovecha las características recientes de JavaScript, además de HTML5 y CSS3. Sin embargo, Leaflet carece de funciones compatibles con OpenLayers, como Web Feature Service (WFS) [15] y soporte nativo para proyecciones distintas a Google Web Mercator (EPSG 3857). [dieciséis]
También es comparable a la API de Google Maps de código cerrado y patentada (que debutó en 2005) y a la API de Bing Maps, las cuales incorporan un importante componente del lado del servidor para proporcionar servicios como geocodificación , enrutamiento , búsqueda e integración con funciones como Google. Tierra . [ cita necesaria ] La API de Google Maps proporciona velocidad y simplicidad, pero no es flexible y solo se puede utilizar para acceder a los servicios de Google Maps. Sin embargo, la nueva parte DataLayer de la API de Google permite mostrar fuentes de datos externas. [17]
Leaflet comenzó su vida en 2010 como "Web Maps API", una biblioteca de JavaScript para el proveedor de mapas CloudMade, donde trabajaba Agafonkin en ese momento. En mayo de 2011, CloudMade anunció el primer lanzamiento de Leaflet, creado desde cero pero utilizando partes del antiguo código API. [18]
En marzo de 2022, el desarrollador instó a tomar medidas sobre la invasión rusa de Ucrania en el sitio web leafletjs. [25]