Blocks
Pre-built, ready-to-use map blocks. Browse, preview, and copy them into your app.
The UI in these blocks comes from zard/ui. Cards, badges, buttons, inputs, sidebars and charts are zard/ui components - the Angular port of shadcn/ui, and the kit this site is built with. They are not part of ng-mapcn: every ng-map-* element is ng-mapcn, everything around it is zard/ui and Tailwind.
Each block lists the zard/ui components it uses, and its install button copies the matching npx zard-cli@latest add ... command. Then copy the files from the Code tab into your app.
Analytics Map
Real-time analytics overview with a world map, breakdown cards, and device stats.
Choropleth
World choropleth map shading countries by a metric, with a hover tooltip and legend.
No zard/ui components - built with ng-mapcn and Tailwind only.
Analytics Card
Compact analytics card with a headline metric over a world map.
Delivery Tracker
Live order tracking with route progress, courier position, and order details.
Uptime Monitor
Status-page style map of edge network locations with live health, latency, and uptime.
No zard/ui components - built with ng-mapcn and Tailwind only.
Heatmap
Globe-projected heatmap visualizing earthquake density with zoom-dependent styling.
No zard/ui components - built with ng-mapcn and Tailwind only.
PMTiles Parcels
Vector tiles from a single PMTiles archive: a source component, a layer that waits for it, and hover highlighting.
No zard/ui components - built with ng-mapcn and Tailwind only.
3D City
3D buildings colored by height, with optional terrain and hillshade, on the Carto basemap.
No zard/ui components - built with ng-mapcn and Tailwind only.
Draw
Draw and edit points, lines and polygons with a toolbar and a live readout of the shapes.
No zard/ui components - built with ng-mapcn and Tailwind only.