Crea mapas interactivos con Leaflet JS
Veremos con detalle la alternativa Open Source a Google Maps para construir mapas de forma fácil y con resultados espectaculares.
01. ¿Por qué Leaflet JS es una buena solución?
Leaflet es una alternativa gratuita para construir mapas interactivos para la web moderna.
02. El primer mapa interactivo
Lanzamos en pocas líneas de código nuestro primer mapa con Leaflet.
03. Añadir marcadores en el mapa
El mapa necesita datos geolocalizados pintados como marcadores.
04. Marcadores personalizados
Crea marcadores en el mapa con imágenes propias o iconos de fuente.
05. Figuras geométricas y límites
Dibuja polígonos y círculos sobre el mapa y marca los límites de visualización.
06. Eventos sobre el mapa
Gestionamos reacciones a eventos que ocurren sobre el mapa como 'click', 'moseout' o 'mouseover'
07. Geolocalización inversa
Captura información del mapa y conviértela en otra de más valor con "reverse geocoding".
08. Marcadores "draggables" (arrastrables)
Los marcadores aún más interactivos: pueden arrastrarse por el mapa.
09. Geolocalización del usuario en el mapa
Leaflet cuenta con un sistema de geolocalización orientado a la visualización en el móvil.
10. Importa datos al mapa con GeoJSON
GeoJSON es un formato de datos espaciales que podemos cargar en nuestro mapa.
11. Muestra datos desde un KML con omnivore
Otro ejemplo de lectura de datos estructurados desde el formato KML.
12. Agrupar marcadores por capas y cambiar de cartografía
En este vídeo generamos un selector con las categorías de los marcadores.
13. Crear un cluster de marcadores
Agrupar marcadores es una solución para mostrar solo lo necesario en el mapa.
14. Añade un buscador con Leaflet Search
Ampliamos nuestro proyecto con la capacidad de buscar entre los marcadores.