Popup

MglPopup is a directive ([mglPopup] or mgl-popup) that uses its host element as the popup content. It must be anchored by exactly one of lngLat, feature or marker.

<mgl-map [mapStyle]="style" [center]="center" [zoom]="12">  <mgl-marker [lngLat]="center" #marker="mglMarker">Hamburg</mgl-marker>  <mgl-popup [marker]="marker" class="flex flex-col gap-1 p-4">    <p class="text-sm font-medium">Hello from Hamburg 👋</p>  </mgl-popup></mgl-map>

• lngLat — a fixed position on the map.
• feature — a GeoJSON point (its coordinates are used).
• marker — an MglMarker reference (#marker="mglMarker").

Pass [closeButton]="false", [closeOnClick]="false" or [closeOnMove]="false" to change the default close behaviour.

The popup host is the popup content, so style it directly with class/style:

<mgl-popup [marker]="marker" class="flex flex-col gap-1 p-4">  <p class="text-sm font-medium">Hello from Hamburg</p>  <p class="text-muted-foreground text-xs">Anchored to the marker.</p></mgl-popup>

MapLibre wraps that content in its own .maplibregl-popup-content box and .maplibregl-popup-tip arrow. Those aren't descendants of the host, so target them with the className input (or a config default), which lands on the .maplibregl-popup container:

@Component({  // …  providers: [    provideMglPopupConfig({      className:        'popup-tip:invisible max-w-none! popup-content:bg-popover popup-content:rounded-xl popup-content:overflow-hidden popup-content:p-0 popup-content:shadow popup-content:ring-1 popup-content:ring-gray-950/5',    }),  ],})

The example uses two Tailwind custom variants (defined once in your global stylesheet) so the utilities reach MapLibre's elements:

/* styles.css */@custom-variant popup-content (& .maplibregl-popup-content);@custom-variant popup-tip (& .maplibregl-popup-tip);

provideMglPopupConfig sets defaults (close button, offset, class name, …) for every mgl-popup within its injector scope. Per-popup inputs still win.

// app.config.ts or a component's providersproviders: [provideMglPopupConfig({ closeButton: false, offset: 16 })];