@deltabreen/maps-angular

Angular standalone components for Maps by DeltaBreen, for Angular 17 and later: MapLibre maps on our tiles, with the key and its short-lived token handled for you. Free to start, flat plans, and never an overage bill.

npm install @deltabreen/maps-angular maplibre-gl

import { Component } from '@angular/core'
import { DeltabreenMapComponent, DeltabreenMarkerComponent } from '@deltabreen/maps-angular'

@Component({
  selector: 'app-store-map',
  imports: [DeltabreenMapComponent, DeltabreenMarkerComponent],
  template: `
    <deltabreen-map-view apiKey="pk_…" workerUrl="/maplibre/maplibre-gl-worker.mjs" [center]="shop" [zoom]="12"
                         style="height: 480px" (load)="ready($event)">
      <deltabreen-map-marker [lngLat]="shop" popup="Our shop" />
    </deltabreen-map-view>`,
})
export class StoreMap {
  shop: [number, number] = [-6.26, 53.35]
  ready(map: unknown) {}
}

In angular.json, under the build's options, add maplibre's stylesheet and copy its worker where workerUrl points:

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

• apiKey is a publishable key from your dashboard, listing the sites that may use it (or give tokenUrl).
• The map is made in the browser only, so server rendering needs nothing extra, and once per key; changing mapStyle, language, center or zoom moves the same map, so none of that counts another map load.
• (load) hands you the live MapLibre map; options takes anything else createMap from @deltabreen/maps takes.

Docs: https://maps.deltabreen.eu/docs#vue-svelte-angular