Introduction

ng-mapcn provides beautifully designed, accessible, and customizable map components. It is an Angular port of mapcn, built on MapLibre GL, styled with Tailwind CSS, and designed to feel native to modern Angular: standalone components, signals, and zero configuration.

ng-mapcn follows the shadcn model for maps: components you can own, with zero lock-in and sensible defaults that work immediately.

Maps are often treated as black boxes hidden behind wrapper libraries and configuration-heavy SDKs. ng-mapcn takes a different approach. It stays close to MapLibre, keeps the API familiar, and lets you drop down to the raw map instance whenever you need more control.

The goal is simple: make maps feel like the rest of your UI stack - composable, themeable, accessible, and easy to customize.

Most Angular map setups are either too opinionated or too heavy. ng-mapcn is built for teams that want to ship quickly without giving up control:

• Own Your Code: Install via schematics and copy the components into your project - or use the npm package.
• Start Fast: Run one command and render your first map with production-ready defaults.
• Scale Safely: Build on top of MapLibre directly, then drop to raw APIs when needed.
• Angular Native: Standalone components, signal inputs/outputs, and OnPush change detection throughout.

ng-mapcn works with any MapLibre-compatible tiles - set them per map with the styles input, or app-wide with provideMapStyles(). There is a working example for each provider on the Map Styles page (and the basemap picker in the header switches this whole site live):

• Carto - Clean, minimal basemaps perfect for data visualization. The default; no API key.
• OpenFreeMap - Free vector tiles from OpenStreetMap data. No key, no request limits.
• OpenStreetMap - Community-driven map data. Serves raster tiles rather than a hosted style.json, so the style is written by hand (dev/demo use only, per the OSM tile usage policy).
• MapTiler - Beautiful vector tiles with extensive customization options. Requires an API key.
• Stadia Maps - Fast, reliable tile hosting with multiple styles. Keyless on localhost; API key or domain auth in production.
• And any other provider that supports the MapLibre style spec