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.

heatmap

  • 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-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
  • cartodb-leaflet. Plugin de CARTO para Leaflet que nos permite interactuar con los servicios de CARTO. Conectar a las visualizaciones o crear nuevas, añadir interaciones personalizadas o acceder a lo datos en bruto alojados en CARTO.
  • Leaflet Vector Layers. Este plugin permite crear de forma sencilla capas vectoriales de geo servicios web como ArcGIS Server, Arc2Earth, GeoCommons, CartoDB y GIS Cloud.

  • leaflet-providersUn 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 Google, OpenStreetMap Nominatim, Bing, Esri y Nokia.

Rutas

Hay 4 plugins para trabajar con rutas: Leaflet Routing MachineRoute 360°Leaflet.Routing y Leaflet RouteBoxer. Pero el mejor sin duda es el primero:

  • 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:

leaflet_plugins

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

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:

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

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

Listo.

Echa un vistazo a nuestro curso de visores web mapping con Leaflet.

Let’s connect!

Date de alta en nuestro newsletter
y recibe este ebook gratuito

Y una vez al mes recibirás las últimas novedades del sector GIS y de nuestros cursos

10 comentarios en “Los mejores plugins para Leaflet”

  1. Espectacular post, muchas gracias por esta información tan valiosa, estoy empezando un nuevo proyecto donde requiero el uso de mapas y esto me ha sido de gran ayuda. Quisiera preguntarte si conoces algún plugin que me permita agrupar los pin de una zona cuando alejo el zoom. Por ejemplo si en una zona hay unos 5 pines, al alejarme con el zoom me gustaría mostrar un segundo icono con el numero de pines en esa zona (5) y que al darle clic se acerque nuevamente hasta poder mostrar los 5 pines (esto con el fin de evitar que los pines se vean remontados) no se si me hago entender.. si me puedes ayudar te lo agradecería enormemente

  2. Buenas tardes,
    Estoy intentando cargar el plugin mouse coordinate (https://gitlab.com/leaflet/mouseCoordinate) que te da coordenadas entre otras en formato UTM pero no consigo que funcione. Sigo los pasos tal como se indican en la página del desarrollador, es decir…
    1. Cargo los ficheros js y css
    2. Escribo la siguiente linea: L.control.mouseCoordinate({utm:true,utmref:true}).addTo(map);

    Alguien sabe como funciona?

Los comentarios están cerrados.