Migrating angular-leaflet-directive to modern Angular
angular-leaflet-directive wrapped Leaflet in a leaflet directive configured through scope objects for center, markers, layers and paths. It is tied to AngularJS.
What replaces it
| Option | When to choose it |
|---|---|
| Leaflet directly in a component | The simplest option: create the map in a component and keep full control of the Leaflet API. |
| ngx-leaflet (@bluehalo/ngx-leaflet) | When you prefer directives and bindings for layers, zoom and center. |
| MapLibre GL (@maplibre/ngx-maplibre-gl) | When you need vector tiles or WebGL rendering for large data sets. |
How to migrate it
- List the tile providers, layers and Leaflet plugins in use (clustering, drawing, heatmaps) and check each plugin against the Leaflet version you will install.
- Create the map once the view has rendered and call map.remove() when the component is destroyed.
- Replace the scope objects for markers and paths with component inputs, and update the layers explicitly when the data changes.
Watch out. Leaflet's default marker icons often fail to load after bundling, because the image paths are resolved at runtime. Set the icon URLs explicitly and copy the images as assets.
Other libraries
Planning a migration or a micro-frontend platform?
In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.
Message me on LinkedIn