The Simple Guide to Angular Leaflet Maps
The Basics
Leaflet is one of the main Javascript-based mapping frameworks. It is widely used across the Industry to add interactive maps to web sites and applications.
However, it can be tricky to include in Angular.io apps. It does not exactly play nicely with either Angular or Typescript. After I had the adventure of migrating a Leaflet map-based site to Angular 8 it was clear to me that there was no really good reference for this task. These posts are my attempt to document the learnings. (UPDATE: Although this article was written for Angular 8 — the applications and methods are still working in Angular 11).
This is going to be a multi-part post :
- The basics (this post),
- Adding Controls,
- Functions & Dynamic Controls,
- Custom Controls, and
- Going PWA — service workers and more
The objective of this series is to that you will be able to create a Leaflet map in an Angular-CLI based project without hassle, fuss and dead-ends.
Background
It turns out that, although adding Leaflet to Angular.io is not significantly hard it is very “fiddly” since Leaflet is not particularly Angular (or Typescript) friendly. Leaflet…
