Adjust Leaflet popup to table size in angular leaflet

Question

I have a popup for a layer on the Leaflet map and a popup appears when you click on a point on the map. The popup should display a table with the data for that specific layer. However, the popup does not adjust to the table size:

But when I do get rid of the default width for the leaflet-popup-content the popup does not appear right above the point and gets shifted to the right:

The way I am displaying the popup is the following (in my popup service):

let popupOptions = {
   className: "popup",
   maxWidth: 250 // This doesn't do anything for some reason
};

L.popup(popupOptions)
   .setLatLng(latLng)
   .setContent(this.compilePopup(PopupComponent))
   .openOn(map);

You can see that I am injecting the PopupComponent into the Leaflet popup rather than just hardcoding the html. Here is how the this.compile function looks like:

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

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

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

and this is how my PopupComponent HTML looks like:

<ng-template>
    <table class="table table-striped table-bordered table-condensed table-hover">
        <tr>
            <th *ngFor="let col of columns;">
                {{columns}}
            </th>
        </tr>
        <tr>
            <td *ngFor="let col of columns;">
                {{columnDetails[columns]}}
            </td>
        </tr>
    </table>
</ng-template>

popup-component.ts:

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

@Component({
  selector: 'app-popup',
  templateUrl: './popup.component.html',
  styleUrls: ['./popup.component.css']
})
export class PopupComponent implements OnInit {
  columnDetails: any;
  columns: Array<string> = ["Column 1", "Column 2", "Column 3"];


  constructor(
    private popupService: PopupService,
    private popupStore: PopupStore
  ) {
    this.columnDetails= this.popupService.columnDetails;

  }
}

and the way I am initializing my Leaflet map is in my map-component.ts where I have:

  options: MapOptions = {
    center: latLng(47.5786262, -122.1654623),
    minZoom: 4,
    layers: [
      L.gridLayer.googleMutant({
        type: 'roadmap', // valid values are 'roadmap', 'satellite', 'terrain' and 'hybrid'
        styles: [
          {
            featureType: "poi.business",
            elementType: "labels",
            stylers:
              [
                {
                  visibility: "simplified"
                }
              ]
          }
        ]
      }),
    ],
    zoom: 5,
    zoomControl: false
  };

map-component.html:

<div id="map"
    leaflet [leafletOptions]="options"
    (leafletMapReady)="onMapReady($event)"
    (leafletMapMove)="onMapMove($event)"
    (leafletMapZoom)="onMapZoom($event)"
    (leafletClick)="onMapClick($event)">
</div>

Now I found another question with the exact same problem as mine and saw that you can set the maxWidth: "auto" or use update(), but these two solutions do not work for me since that's specifically for Leaflet javascript and I'm using ngx-leaflet, angular leaflet.

How can I get it so the popup adjust to my table size AND that the popup is right above the marker that I click on? or is there a way to translate the other solution to my code? Any help is greatly appreciated!

Call `update()` on the popup after having called `setContent()`. If the content nodes change, use DOM mutation observers, or angular events, or whatever, to call `update()` again. — IvanSanchez, Sep 14 '21 at 23:16
@IvanSanchez so I would do `L.popup(this.popupOptions).setLatLng(latLng).setContent(this.compilePopup(PopupComponent)).update()`? What should I do after calling `update()`? — fairlyMinty, Sep 15 '21 at 00:13

Shaya · Answer 1 · 2021-09-23T19:10:41.920

0

You can pre-calculate the total width of the columns and then use that value as a minWidth for the popupOptions:

const columnsWidth: number = columns.length * 80 // assuming each column width is 80px

const popupOptions = {
   className: "popup",
   minWidth: columnsWidth // use the calculated width
   ...
};

L.popup(popupOptions)

For this to work, you should assign a fixed width to the columns (using inline styling here just for example purposes):

<table>
    ...
    <td *ngFor="let col of columns" style="width: 80px">
        {{columnDetails[columns]}}
    </td>
    ...
</table>

It will enable Leaflet to render the popup layout properly and position the pin correctly on the map.

Reference: the Leaflet documentation

edited Sep 23 '21 at 19:10

answered Sep 23 '21 at 12:49

Shaya

2,792
3
26
35

Where could I get the columns length from? – fairlyMinty Sep 23 '21 at 18:27
Hey @fairlyMinty, I updated my answer. If `columns` is an array you should be able get its length by using `columns.length`. The solution I'm suggesting above will work if the columns will have a fixed width. However, if the content of the columns is dynamic and can't have a fixed width, it's a bit more complicated, and this solution may not fit. – Shaya Sep 23 '21 at 19:26
Hi @DotBot, I appreciate the answer. The content of the column is dynamic so it can't necessary have a fixed width. The width length will vary on the content or information – fairlyMinty Sep 23 '21 at 21:15

Adjust Leaflet popup to table size in angular leaflet

1 Answers1

Linked