@m1z23r/ngx-maps

Angular bindings for @m1z23r/maps-core — a provideMaps() config provider, an injectable MapsApiService, and a standalone <ngx-map> component.

npm i @m1z23r/ngx-maps @m1z23r/maps-core

@m1z23r/maps-core is a peer dependency; install it alongside.

Setup

// app.config.ts
import { provideMaps } from '@m1z23r/ngx-maps';

export const appConfig: ApplicationConfig = {
  providers: [
    provideMaps({ apiUrl: '/api/v1' }), // same-origin; add apiKey for the keyed tier
  ],
};

<ngx-map>

<ngx-map
  [theme]="theme()"
  [showRegions]="regions()"
  [pins]="pins()"
  [overlays]="overlays()"
  [location]="location()"
  (ready)="onReady()"
  (mapClick)="onMapClick($event)"
  (labelClick)="onLabelClick($event)"
  (pinClick)="onPinClick($event)"
  (moved)="onMoved($event)"
  (rendered)="hud.set($event)" />

| Input | Type | Default | |---|---|---| | theme | 'light' \| 'dark' | 'light' | | showRegions | boolean | false | | interactive | boolean | true | | pins | Pin[] | [] | | overlays | Overlay[] | [] | | location | LocationSpec \| null | null |

| Output | Payload | |---|---| | ready | void | | mapClick | { x, y } | | labelClick | { kind, name, wx, wy } | | pinClick | { pin } | | moved | { x, y, mpp } | | rendered | RenderStats |

The host element sizes the map — give ngx-map (or a wrapper) a width/height.

Anything not covered by an input is reachable via the mapView escape hatch on the component instance (viewChild(NgxMapComponent).mapView).

MapsApiService

The headless client (autocomplete, geocode, geometry), configured from the same provideMaps() token:

private readonly api = inject(MapsApiService);
const hits = await this.api.streets('kralja', settlementId);