Installation

An Angular 22+ project. Tailwind CSS is optional but recommended for styling marker and popup content.

Run the following command to add the map components:

pnpm ng add ng-mapcn

This copies the component sources into your app (shadcn-style), installs maplibre-gl and registers its CSS.

Alternatively, install it as a regular npm package:

npm install ng-mapcn maplibre-gl

Import and use the map components:

import { Component } from '@angular/core';
import { MapComponent, MapControlsComponent } from 'ng-mapcn';

@Component({
  selector: 'app-my-map',
  standalone: true,
  imports: [MapComponent, MapControlsComponent],
  template: `
    <div class="h-[320px] overflow-hidden rounded-lg border">
      <ng-map [center]="[-74.006, 40.7128]" [zoom]="11">
        <ng-map-controls />
      </ng-map>
    </div>
  `,
})
export class MyMapComponent {}

Using a coding agent (Claude Code, Cursor, Codex, GitHub Copilot, Windsurf, Gemini and others)? Install the ng-mapcn skill so it uses the real API (selectors, inputs, outputs, setup and recipes) instead of guessing:

npx skills add juanvieiraprado99/ng-mapcn

It works with the skills.sh CLI. Pass --list to preview the skill, or --skill ng-mapcn to install it explicitly. Agents that do not support skills can read llms-full.txt instead.