Advanced Interactive Maps in Angular with Leaflet

Adding more advanced controls and interactivity

Photo by Cam DiCecca on Unsplash

This is the third part of a series about Including Leaflet javascript interactive maps into Angular.io applications. The other parts of the series are :

• Part One: The Basics,
• Part Two: Adding Controls,
• Part Three: This Part,
• Part Four: Custom Controls, and
• Part Five: 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.

Part Three

In this part, we will look at:

• Advanced Control with interactivity, and
• Passing data backwards and forwards.

In particular, we will create an interactive sidebar menu with a dynamic map legend that changes as the zoom level of the map changes and which can be opened from a popup triggered from a marker on the map. This shows data interchange between components and from the map to control as well as triggering API access to the control.

We are also in passing going to show how to use Angular Structural Directives to…