Search blocks by description or jump to a page.
Static office locations map with an SVG grid surface, five absolutely-positioned pins, zoom controls, and a side list of pinned locations.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Map With Pins Blueprint is the office locations panel, a bg-muted/40 map surface with an SVG grid and faint continent silhouettes, five absolutely-positioned MapPin markers (HQ in San Francisco highlighted and labelled, with NYC, LDN, SYD, and SGP dimmed beside it), zoom-in and zoom-out controls, and a side list that mirrors each pin with city, street address, and a Selected badge on the active row.
Pins are one array with x/y percentage coordinates and a highlighted flag. The side list stays in sync automatically; the pairing is what makes the blueprint convincing without any tile provider.
Reach for this block on offices, coverage, or deployment-region pages where a visual layout of locations matters more than precise cartography. Wire the pin positions and side list to your locations endpoint; the zoom controls are decorative in the blueprint.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the global offices panel. Other map-with-pins surfaces:
Tip: keep the highlighted pin to one; selecting multiple at once collapses the visual hierarchy that makes the panel readable at a glance.