Custom Controls in Angular Leaflet Maps

Adding Custom Controls to your Angular Leaflet Map

Photo by Simon Migaj on Unsplash

This is the fourth 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: Functions & Dynamic Controls,
• Part Four: This Part, 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 Four

The final act in the mapping part of creating an app is to add your own custom controls.

In this part, we will simply look at how to do that with a custom control that uses the OpenStreetMap Nominatim Geocoding API to access data about a point and creates an info screen that looks like this:

Background

Part one of this series explained the basics of how to add a Leaflet based map to Angular.io applications using @asymmetriks/ngx-leaflet.