Los mejores plugins para Leaflet

Leaflet es una librería JavaScript open source que se centra en un conjunto básico de características, de esto modo pretende mantenerse lo más ligera posible. Para extender su funcionalidad podemos hacerlo mediante el uso de plugins.

Aquí encontrarás una lista de treinta plugins para Leaflet que consideramos muy recomendables por su utilidad.

Al final del post también te mostramos cómo incorporar estos plugins en nuestros mapas web.

Si aun no sabes cómo crear un mapa web con Leaflet te recomendamos que repases el pequeño tutorial de cómo crear una sencillo mapa con Leaflet.

Plugins para trabajar con capas

• heatmap.js Este plugin crea fácilmente mapas de calor web. Los mapas de calor son totalmente personalizables: elegir el gradiente de color, cambiar la opacidad, el radio del punto y mucho más.  Trabaja bien con grandes conjuntos de datos.

• Leaflet.MultiTileLayer. Permite componer mapas base de varias fuentes de teselas. Cada fuente está activa sólo en los niveles de zoom que hayamos definido
• Leaflet Animated Marker. Este es un plugin sirve para animar marcadores a lo largo de una polilínea. Utiliza animaciones CSS3 para mover el marcador de punto a punto en un ratio específico (metros por milisegundo).
• Leaflet.awesome-markers. Iconos coloristas, basados en los iconos de Font Awesome y Twitter Bootstrap.

• Leaflet Data Visualization Framework (DVF). Nuevos marcadores, capas y utilidades para realizar mapas temáticos y visualizaciones de datos. El objetivo de este plugin es convertir los datos en bruto en mapas convincentes. Aquí tienes varios ejemplos.
• Leaflet.Graticule. Este plugin sirve para crear una graticula, es decir , una malla de líneas delatitudes y longitudes para nuestros mapas. Mas info en el blog del autor (Bjørn Sandvik): Creating a Graticule with Leaflet

• leaflet-omnivore. Leaflet soporta por defecto GoJSON. Pero y qué pasa con el resto de formatos. Leaflet-omnivore carga y convierte los formatos CSV, KML, GPX, TopoJSON, WKT.
• Leaflet. Indoor. Este plugin proporciona una capa destinada a la visualización de los datos en interiores (habitaciones, pasillos, …). También proporciona un componente de control para cambiar el nivel mostrado. Aquí tienes un ejemplo.

Servicios, Proveedores y formatos

• Proj4Leaflet. Plugin que integra la librería Proj4js, lo que permite utilizar cualquier tipo de proyección en Leaflet. Imprescindible si trabajas con capas que tienen distinto tipo de proyección.
• Plugins by Pavel Shramov. Se trata de un conjunto de plugins para añadir capas GPX y KML; capas de teselas de Bing; capas de Yandex y de Google, enlaces permanentes y controles para medir distancias. 
  • Revisa este tutorial en el que te mostramos cómo añadir las capas de Google en Leaflet. 
• leaflet-providers. Un plugin que contiene configuraciones para varios proveedores de teselas: HERE (anteriormente Nokia), Mapbox, OSM, OpenCycleMap, MapQuest, Stamen o Esri /ArcGIS.
• leaflet.wms Soporte mejorado para WMS, y la opción de identificar capa a través de GetFeatureInfo.

Geocodificación

• Leaflet GeoSearch. Pequeño plugin para geocodificar que contiene un buscador de direcciones para Leaflet. Tiene soporte para Bing, Esri, Geocode Earth, Google, LocationIQ, OpenCage, OpenStreetMap, Pelias, Mapbox, GeoApiFR, Geoapify.
  

Rutas

Hay varios plugins para trabajar con rutas: Leaflet Routing Machine, Leaflet.Routing y Leaflet RouteBoxer.

• Leaflet Routing Machine. Control para búsqueda de rutas a través de puntos, visualización de itinerarios y rutas alternativas. Utiliza OSRM por defecto, pero también soporta GraphHopper, la API de Mapbox Directions y alguno más.

En este tutorial te enseñamos cómo trabajar con rutas óptimas en Leaflet.

Interacción con geometrías

• Leaflet.draw. Habilita funciones de dibujo como polilíneas, polígonos, rectángulos, círculos y marcadores a través de una interfaz muy friendly, con iconos y consejos. Recomendado!

http://leaflet.github.io/Leaflet.draw/examples/full.html

• Leaflet.Locate. Un control útil para geolocalizar al usuario muchas opciones. Sencillo y efectivo. Prueba la demo.
• leaflet.fullscreen. Este sencillo plugin para Leaflet añade un botón de pantalla completa a nuestros mapas. Recomendado!
• leaflet search. Este plugin nos proporciona un panel para buscar los elementos de una capa GeoJSON o en marcadores.

Insertar un buscador de este tipo es parte de nuestro curso online desarrollo de aplicaciones webmapping.

• Leaflet.MiniMap. Añade un pequeño mapa en una esquina de nuestro visor web de mapas que muestra el mismo mapa a una escala diferente para ayudar a la navegación. Recomendado!
• Leaflet.FileLayer. Este plugin implementa un botón para cargar archivos locales (GeoJSON, GPX, KML) en el mapa utilizando la API de HTML5 FileReader, sin llamada servidor! Juega con la demo.
• Leaflet.MousePosition. Este control muestra las coordenadas geográficas del puntero del ratón, según nos movamos sobre el mapa.
• Leaflet.Sync. Vistas sincronizadas de dos mapas. Sensacional. Toda la información del plugin en el blog de Bjørn Sandvik: Creating a synchronized view of two maps or images with Leaflet.
• Leaflet.TileLegend. Este plugin crea leyendas interactivas para tus capas base. En esta demo puedes ver el panel con la leyenda.
• Leaflet.MeasureControl. Una sencilla herramienta para medir distancias en mapas (depende de Leaflet.Draw).
• Leaflet-sidebar. Un plugin para Leaflet que añade una barra lateral responsiva. Super elegante. En el mapa inferior cierra el panel haciendo clic en la X, y clic de nuevo en el marcador.
• Leaflet.MagnifyingGlass. Permite mostrar una pequeña parte del mapa en otro nivel de zoom, ya sea en una posición fija o vinculado con el movimiento del ratón, para un efecto de lupa. Puedes verlo en acción aquí.
• Leaflet.StyleEditor. Para editar los estilos de los objetos geográficos (líneas, polígonos, etc) y de los marcadores con una interfaz amigable. Aquí un ejemplo.
• Leaflet.easy-print. Un sencillo plugin que añade un icono para imprimir el mapa. La página de impresión resultante sólo imprime el mapa de Leaflet.
• WordPress Leaflet Map. Este plugin para wordpress nos permite crear múltiples mapas en entradas y páginas, y agregar múltiples marcadores en los mapas. Es uno de los mejores plugins para añadir mapas en tu blog de WordPress.

Hasta aquí nuestro listado de plugins.

Sigue leyendo para saber cómo incorporarlos en tus visores web.

¿Cómo incorporo los plugins en mi mapa de Leaflet?

1. Ir a la página de plugins de Leaflet: http://leafletjs.com/plugins.html

2.Ir al plugin que quieres instalar, por ejemplo el plugin para añadir las capas de Google en Leaflet:

3. A continuación nos descargamos el plugin haciendo clic sobre el botón Download ZIP:

4. Descomprimir el archivo y lo colocamos en el directorio en el que se encuentre nuestro HTML.

5. Añadimos la libreria y la API de Google en la cabecera del HTML:

<script src=”http://maps.google.com/maps/api/js?v=3&sensor=false”></script> 
<script src=”leaflet-plugins-master\layer\tile\Google.js”></script>

6. Creamos una variable que contenga la función:

var ggl = new L.Google();

7. Añadimos la capa de Google en el mapa:

map.addLayer(ggl);

Listo.