Marker

MglMarker is a directive ([mglMarker] or mgl-marker) that uses its host element as the marker element. Style and annotate the host directly.

<mgl-map [mapStyle]="style" [center]="center" [zoom]="12">  <mgl-marker [lngLat]="center" class="rounded-full bg-primary px-2 py-1 text-xs">    Hamburg  </mgl-marker></mgl-map>

Give it an exportAs="mglMarker" reference to anchor a popup to it, or to call togglePopup().

<mgl-marker [lngLat]="center" #marker="mglMarker">Hamburg</mgl-marker><mgl-popup [marker]="marker">Hello from Hamburg</mgl-popup>

When the host has no children, MapLibre's default marker is used. Add any content (or style the host) to render your own marker.

MapLibre appends markers to the canvas container in DOM order and sets no z-index, so the last marker renders on top by default. Control the stacking with a z-index on the host.

A marker's stacking can be controlled through the host's class (e.g. the Tailwind z-10 utility) or its style directly:

<!-- Tailwind utility --><mgl-marker [lngLat]="[lng, lat]" class="z-10">…</mgl-marker><!-- or bind the style --><mgl-marker [lngLat]="[lng, lat]" [style.zIndex]="level">…</mgl-marker>

Markers share the canvas container with the popup and control layers. Give the container its own stacking context so a high marker z-index can't leak above the popup or controls layer:

/* styles.css */.maplibregl-canvas-container {  isolation: isolate;}

provideMglMarkerConfig sets defaults (offset, anchor, color, draggable, …) for every mgl-marker within its injector scope. Per-marker inputs still win.

// app.config.ts or a component's providersproviders: [provideMglMarkerConfig({ offset: [0, -14] })];