Playground

Pick a component, edit its inputs and watch the real map update. The snippet below always matches what you see, ready to paste into your app.

A polyline through coordinates, styled with color, width and dashes.

Popups, terrain, vector and image sources and draw are not in the playground; see the component docs.

Code

<ng-map [center]="[-73.99, 40.74]" [zoom]="10.8">
  <ng-map-route id="route" [coordinates]="coordinates" />
</ng-map>

Basemaps, projection and tilt, each previewed live. Pick one to apply it to the playground map above and copy the matching snippet.

Carto (default)
Positron in light mode, Dark Matter in dark mode. No configuration needed.
Default: no input needed. © CARTO, © OpenStreetMap contributors.
Carto Voyager
The colorful Voyager basemap for light mode, Dark Matter for dark mode.
© CARTO, © OpenStreetMap contributors.
OpenFreeMap
Free vector tiles with no key or limits: Positron and Dark.
© OpenFreeMap, © OpenMapTiles, data from OpenStreetMap.
OpenStreetMap
Standard OSM raster tiles. Light only: the same tiles show in dark mode.
© OpenStreetMap contributors. Dev/demo only (OSM tile usage policy).
MapTiler
MapTiler Streets vector tiles, light and dark. Needs your API key.
Paste your key in the header map style picker. © MapTiler, © OpenStreetMap contributors.
Stadia Maps
Alidade Smooth vector tiles, light and dark. Key optional on localhost.
© Stadia Maps, © OpenMapTiles, © OpenStreetMap contributors.
Blank
A transparent, tile-less canvas for your own layers.
Globe projection
The default basemap on a 3D globe instead of Web Mercator.
3D tilt
A pitched, rotated camera, the starting point for 3D buildings.

<!-- No inputs: the built-in Carto basemap follows the light/dark theme -->
<ng-map />