0

I'd like to make a more involved popup with ngx-leaflet that can make use of Angular directives and generally be treated as any other Angular component. Is there a good way to do this?

You can create a popup using L.popup and setContent however this requires a raw html string.

narthur157
  • 864
  • 1
  • 8
  • 17
  • If you want to use L.popup, you're stuck with dynamically generating raw HTML. If you're ok with generating, positioning, and styling your own popup, you have a bunch of options. 1. Embed a single shared template and update its visibility and position when you want to show it. 2. Use a modal (see one of the answers) 3. Use dynamic component injection or ngFor to add custom popups to the map as needed (but you'll have to position them yourself). We've been looking at ways to make it easy to have native Angular popups in ngx-leaflet, just haven't chosen an implementation yet. – reblace Apr 07 '18 at 23:25

1 Answers1

0

I've been using ngx-leaflet i.c.w. angular material. You can show a dialog by clicking on a marker like so:

marker([geo.latitude, geo.longitude], {
      icon: icon({
        iconSize: [25, 41],
        iconAnchor: [13, 41],
        iconUrl: `assets/marker-icon.png`,
        shadowUrl: 'assets/marker-shadow.png'
      })
    })
  .on('click', this.showPopup.bind(this))

And then on your component the showPopup does:

showPopup(): void {
  const infoDialogRef = this.dialog.open(InfoDialogComponent, {
      width: '250px',
  });
}
pberden
  • 130
  • 3
  • 12
  • I see how that works, unfortunately I'm trying just to display a component within the leaflet popup rather than a modal. Maybe it's possible with cdk Overlay/Portal – narthur157 Apr 12 '18 at 09:23
  • Not really, I ended up just using raw html and css as it's normally done. With Angular 6 it may be possible with angular elements https://angular.io/guide/elements – narthur157 Aug 03 '18 at 21:04