Table of Contents
Introduction
Leaflet supports _popups_. When clicking on markers or specified regions on the map, popups containing text will appear. This provides a way to display additional information on a map.
Note: This is Part 3 of a 4-part series on using Angular and Leaflet.
In this tutorial, you will learn how to add popups to your map using a service to manage the popup logic.
Prerequisites
To complete this tutorial, you will need:
- This tutorial builds directly upon the installation and steps in previous parts.
Step 1 — Creating the Popup Service
At this point, you should have a working implementation of Leaflet in an Angular application.
Use your terminal window to navigate to the project directory. Then, run the following command to generate a new service:
npx @angular/cli generate service popup --skip-tests
This will create a new file: popup.service.ts.
Next, you will add this new service as a provider in your app.module.ts.
Open app.module.ts in your code editor and make the following changes:
[label src/app/app.module.ts]
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { MarkerService } from './marker.service';
<^>import { PopupService } from './popup.service';<^>
import { AppComponent } from './app.component';
import { MapComponent } from './map/map.component';
@NgModule({
declarations: [
AppComponent,
MapComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
MarkerService,
<^>PopupService<^>
],
bootstrap: [AppComponent]
})
export class AppModule { }
Your application now supports your new PopupService.
Step 2 — Displaying the Popups
Open your newly created popup.service.ts in your code editor. And declare a makeCapitalPopup function:
[label src/app/popup.service.ts]
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PopUpService {
constructor() { }
<^>makeCapitalPopup(data: any): string { }<^>
}
This function will create popups that contain data from the GeoJSON file that was used in Part 2.
Add the capital's name, state, and population:
[label src/app/popup.service.ts]
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class PopUpService {
constructor() { }
makeCapitalPopup(data: any): string {
<^>return `` +<^>
<^>`<div>Capital: ${ data.name }</div>` +<^>
<^>`<div>State: ${ data.state }</div>` +<^>
<^>`<div>Population: ${ data.population }</div>`<^>
}
}
Then, you will need to revisit the MarkerService and import the PopupService:
[label src/app/marker.service.ts]
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as L from 'leaflet';
<^>import { PopupService } from './popup.service';<^>
And inject the PopupService:
[label src/app/marker.service.ts]
constructor(
private http: HttpClient,
<^>private popupService: PopupService<^>
) { }
By adding the services to the providers stanza within app.modules.ts, you are creating the services as singleton providers to the entire application, so Angular will not complain about dependency.
While still in the MarkerService file, add the bindPopup() method:
[label src/app/marker.service.ts]
makeCapitalCircleMarkers(map: L.map): void {
this.http.get(this.capitals).subscribe((res: any) => {
const maxVal = Math.max(...res.features.map(x => x.properties.population), 0);
for (const c of res.features) {
const lat = c.geometry.coordinates[0];
const lon = c.geometry.coordinates[1];
const circle = L.circleMarker([lon, lat], {
radius: MarkerService.ScaledRadius(c.properties.population, maxVal)
});
<^>circle.bindPopup(this.popupService.makeCapitalPopup(c.properties));<^>
circle.addTo(map);
}
});
}
Save your changes. Then, stop your application and relaunch it. Open the application in your web browser (localhost:4200) and interact with one of the markers:
You now have a map that supports popups.
Conclusion
In this post, you created a popup service that constructs popups. You learned how to attach popups to markers with L.bindPopup.
Continue to Part 4 of this series on using Angular and Leaflet.
