Map

A MapLibre map component and controls for Angular.

Installation

The components are a thin wrapper around maplibre-gl.

Install npm install maplibre-gl.

/*  styles.css */@import 'maplibre-gl/dist/maplibre-gl.css' layer(components);

MapLibre GL JS v6 needs its worker files served. Add them to your project's assets:

"assets": [  {    "glob": "maplibre-gl-worker.mjs",    "input": "node_modules/maplibre-gl/dist",    "output": "/"  },  {    "glob": "maplibre-gl-shared.mjs",    "input": "node_modules/maplibre-gl/dist",    "output": "/"  }]

Usage

MglMap is a component (mgl-map) that renders the map container, so the element must be sized.

<mgl-map class="size-full" [mapStyle]="style" [center]="[9.99, 53.55]" [zoom]="8">  <mgl-control mglNavigation position="top-right"></mgl-control></mgl-map>

Continue with Marker, Popup and Controls.

Examples

Map Control

Open in

Looking for spartan/ui styled controls? See Map Controls.