Popup pointer doesn't align with marker

[ferily7]

I am using your function to inject my PopupComponent into the Leaflet popup and 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 set the width for the leaflet-popup-content:

.tmo_popup .leaflet-popup-content {
    margin: 0px !important;
    width: 100% !important;
}

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 using the this.compilePopup(PopupComponent) function to inject the PopupComponent into the Leaflet popup and the this.compile function looks exactly the same as what you have in your file. 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>

Do you know how I can get it so the popup adjust to my table size AND that the popup is right above the marker that I click on? I'm pretty sure the UI is like this because I am injecting the PopupComponent into the Leaflet popup. Any ideas on how to resolve this issue? Any help is greatly appreciated!

[bnolan001]

I'll try to take a look at your example in the next few days to see if I can reproduce the problem and what work arounds there might be. Do you have your version of the code on github that I can clone? If not I'll try to incorporate the code you listed above.

[ferily7]

@bnolan001 Appreciate it! I don't have a version of my code on GitHub unfortunately.. But the code for it is pretty much above. Thanks!

[ferily7]

Hi @bnolan001 do you have any updates?

[bnolan001]

So I put in some of your code to see how the pop up would look and at a basic level it seems to be doing what you want. I see the columns displayed properly and the center being over the point on the map. Take a look at https://stackblitz.com/edit/angular-ivy-leafletjs-map-popup-ob5bxi If you need further help, I ask that you fork the project on Stackblitz and put in the code that you have to demonstrate the pop up not displaying where you expect it. Send me that link and I'll take a look.

[ferily7]

@bnolan001 Ah I should also mention that I modified the css for the leaflet popup as the following:

.leaflet-popup-content-wrapper {
    margin: 0px !important;
    padding: 0px !important;
    border-radius: 0px !important;
}
.leaflet-popup-content {
    margin: 0px !important;
    width: 100% !important;
}

Once you modify the css, I believe you'll see the problem that I have

[bnolan001]

I tried adding that CSS to the project and no changes. At this point I can only help if you create a project in StackBlitz or GitHub that I can clone to see the problem.

[ferily7]

Hmm I don't think the problem shows on the stackblitz link because you are using a popup on a marker and using the .bindPopup() function while in my code I am doing:

let popupOptions = {
   className: "popup",
   maxWidth: 250
};

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

which is basically different from the way you add the popup to the map...

[ferily7]

Hi @bnolan001 I just modified the stackblitz to reproduce the problem: https://stackblitz.com/edit/angular-ivy-leafletjs-map-popup-re5xnr?file=src/styles.css

Are you able to see the error? I commented out the width: 100% to show how the UI looks like without adjusting the width and if you comment back in the width:100%, you'll see the popup shift. This is all in style.css... I hope this helps you!

[bnolan001]

Saw your email. Thanks for creating the stackblitz. I was able to see issue. After a little bit of tweaking I was able to fix the problem of the background not going behind the entire table and getting the popup to center on the location. Take a look at https://stackblitz.com/edit/angular-ivy-leafletjs-map-popup-gkizzs?file=src%2Fstyles.css

.leaflet-popup-content-wrapper { margin: 0px !important; padding: 0px !important; border-radius: 0px !important; width: 100%; / ensures the background of the popup covers the entire width of the table / } .leaflet-popup-content { margin: 0px !important; width: 100% !important; } / This piece moves the popup box to the left, centering it over the location marker / .leaflet-popup { left: -72px !important; }

[ferily7]

Hi @bnolan001

Yes, that works for this specific popup but the problem is that in my case, the width of the popup can changed based on the content of the table so the popup will not always be the same size unfortunately. Therefore, doing the left: px will not work for all cases of the popup...

This is what I'm having issues with and not quite sure how to get the popup to be aligned with the marker.

[bnolan001]

Unfortunately my strengths don't lie with CSS. You may be able to use the translate() or calc() functions to figure out how to position the container. If I think of it I'll ask a fellow dev tomorrow to see if they have an idea on how to do it.

[ferily7]

I appreciate it @bnolan001!! I've been struggling on how to fix this issue and how to get the popup to be aligned with the market..