Crea una API con datos abiertos y píntala en un mapa de LeafletJS (II)

Creamos en la sesión anterior una API basada en datos abiertos con lugares geolocalizados.

En esta sesión usamos la potencia de LeafletJS para crear un mapa interactivo.

Añadiremos un cluster para mejorar el rendimiento de la visualización.

Marcas de tiempo

00:00 Repaso de la primera parte

08:50 Forzando un fallo en el orden de items en Laravel

12:10 Cambiando promise por async/await (¡Perla!)

17:00 Corrección del error

19:50 Cluster de marcadores

30:30 Límites geográficos con GeoJSON

44:10 Añadir estilos al mapa

49:30 Overlays, Basemaps y errores

1:30:05 Inyectar datos en JavaScript con PHP

¿Qué necesitas saber?

Trabajaremos con la API que construimos en la sesión anterior con Laravel.

Para el front usaremos JavaScript y la librería de mapas Leaflet.

Nivel de dificultad

Intermedio

Tecnologías utilizadas

• JavaScript
• LeafletJS
• PHP
• Laravel
• MySQL

Código

• Github

Recursos

• MarkerCluster

• Provincias españolas en formato GeoJSON

• Leaflet Providers

• LeafletJS

• Laravel.com

Contenidos relacionados en danielprimo.io

• Crea una API con datos abiertos y píntala en un mapa de LeafletJS (I)
• Curso de LeafletJS
• Introducción a Laravel: Webapp de control de gastos
• WR 35: Leaflet, una alternativa a Google Maps
• WRP 82. Por qué elijo Laravel para crear proyectos web

[Suscríbete][6] o [identíficate][7] para ver el vídeo al completo.