In an earlier post we went over the steps to add a LeafletJS map to an Angular application. The example initialized the map to be centered over Europe and then when the user clicked on a button the map would pan over to Philadelphia, Pennsylvania USA and draw a circle marker over the city. To improve the usability of the map we are going to add a custom Angular component as the popup that appears when the user clicks on the circle. We’ll also show how to pass data to the component so it can be customized based on the marker clicks.

Starting off we’ll use the code from the original map project, angular-ivy-leaflet-map, as the base for this project. The completed solution for this post can be found on GitHub and a working demonstration can be seen on StackBlitz.

To show a custom popup we’ll create a new component that will serve as the popup dialog. From the console window generate the boiler plate code for the CustomPopup component via

ng g component CustomPopup

In the CustomPopup folder open the custom-popup.component.html file and add {{customText}} in a paragraph element that will serve as the dynamic text element that we’ll set from the calling component.

<h1>Custom Popup</h1>
<p>
An angular component rendered as a map popup.
</p>
<p>
  {{customText}}
</p>

In order to allow the parent component to set the value of the {{customText}} property we need to add it to the custom-popup.component.ts as an @Input property. This will also require adding Input as an import from @angular/core. This is no different then the normal way to pass data to a component in Angular.

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-custom-popup',
  templateUrl: './custom-popup.component.html',
  styleUrls: ['./custom-popup.component.css']
})
export class CustomPopupComponent implements OnInit {
  @Input() customText: string
  constructor() { }

  ngOnInit() {
  }
}

With the popup component complete the next step is to add code to the map component so it will use this CustomPopupComponent instead of the default LeafletJS popup.

For the Angular component to be usable by LeafletJS we need the component to be “transformed” into its final HTML and JavaScript form. Without the component in its final form, LeafletJS will have no idea what to do with component reference when it renders the popup.

Now I can’t take credit for this code that generates the usable form of the component. Credit goes to Darkguy2008 who had run into the exact same issue with LeafletJS that this post is going over. The code uses Angular’s ComponentFactoryResolver to transform the referenced component into a usable form. What follows is my understanding of how Angular renders the component on the fly.

The resolveComponentFactory() builds a model of the component based on its HTML and TypeScript definition. All external references are verified and linked to model. Then when the create() method is called it iterates through the component and builds its final form based on the model from the factory method result. Finally, the built component is attached to the view via the application reference and surround it with a div element so that no matter how the component is defined it has a single parent element for the popup.

private compilePopup(component, onAttach): any {
   const compFactory: any = this.resolver.resolveComponentFactory(component);
   let compRef: any = compFactory.create(this.injector);

   if (onAttach)
     onAttach(compRef);

   this.appRef.attachView(compRef.hostView);
   compRef.onDestroy(() => this.appRef.detachView(compRef.hostView));

   let div = document.createElement('div');
   div.appendChild(compRef.location.nativeElement);
   return div;
}

The last step is to call the compilePopup() method and pass the rendered view to the marker for the popup. We assign the generated view to the markerPopup variable and then assign it to the marker as the popup view through the bindPopup() method call. One other thing to note is the assignment of the customText variable for the CustomPopupComponent. We pass the assignment as an anonymous function that takes the component as a parameter. It then references the built instance and sets the @Input customText variable.

let markerPopup: any =
this.compilePopup(CustomPopupComponent,
(c) => {c.instance.customText = 'Custom Data Injection'});
// Generate a circle marker for this location
let currentLocation: L.CircleMarker = L.circleMarker([lat,
lng], { radius: 5})
// Add a binding for the popup to show a custom component
// instead of the standard leaflet popup
.bindPopup(markerPopup);

The final solution can be seen in action below or at StackBlitz. If you are running the project you will need to click on the Locate Philadelphia, PA button and then click on the circle marker to display the popup. To see the full project source code go to GitHub.