Skip to content

How to customise popup from mapbox

I have angular 8 application and I can show a popup.

But I want to style the popup. But how to do that?

SO I have this template:

      type: 'geojson',
      data: {
        type: 'FeatureCollection',
    (click)= "onClick($event)"
    [layout]="{'icon-image': 'camera', 'icon-size': 0.25}"
  <mgl-popup *ngIf="selectedPoint" [feature]="selectedPoint">
    <span [innerHTML]=""></span>

and ts:

 allWifiPoints = => ({
    type: 'Feature',
    properties: {
      // eslint-disable-next-line max-len
    geometry: {
      type: 'Point',
      coordinates: wifi,
  onClick(evt: MapLayerMouseEvent) {
    this.selectedPoint = evt.features![0];

and css:

  .mapboxgl-popup-content-wrapper {
    width: 89px;

but nothing change. The popup stays white

see image.

So what I have to change?

Thank you

So in css: toggle-layer.component.scss

I have this:

:host ::ng-deep .mapboxgl-popup-content-wrapper {
  width: 89px;


Should work:

:host ::ng-deep .mapboxgl-popup-content-wrapper {
    width: 89px;
    height: max-content;
    border: 2px solid #BF0404;
    background-color: rgba(243, 207, 207, 0.7);
    border-radius: 18px;
    margin-bottom: 3px;