Migrar angular-leaflet-directive a Angular moderno
angular-leaflet-directive envolvía Leaflet en una directiva leaflet que se configuraba con objetos del scope para centro, marcadores, capas y trazados. Está atada a AngularJS.
Qué la reemplaza
| Opción | Cuándo elegirla |
|---|---|
| Leaflet directly in a component | La opción más simple: crea el mapa en un componente y conserva el control total de la API de Leaflet. |
| ngx-leaflet (@bluehalo/ngx-leaflet) | Cuando prefieres directivas y bindings para capas, zoom y centro. |
| MapLibre GL (@maplibre/ngx-maplibre-gl) | Cuando necesitas teselas vectoriales o renderizado WebGL para grandes volúmenes de datos. |
Cómo migrarla
- Lista los proveedores de teselas, las capas y los plugins de Leaflet en uso (clustering, dibujo, mapas de calor) y revisa cada plugin contra la versión de Leaflet que vas a instalar.
- Crea el mapa cuando la vista ya se renderizó y llama a map.remove() cuando el componente se destruye.
- Reemplaza los objetos del scope de marcadores y trazados por inputs del componente, y actualiza las capas de forma explícita cuando cambian los datos.
Cuidado con. Los íconos de marcador por defecto de Leaflet suelen no cargar después del bundling, porque las rutas de las imágenes se resuelven en tiempo de ejecución. Define las URLs de los íconos de forma explícita y copia las imágenes como assets.
Otras librerías
¿Planeas una migración o una plataforma de microfrontends?
En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.
Escríbeme por LinkedIn