Map With Pins Blueprint
Static office locations map with an SVG grid surface, five absolutely-positioned pins, zoom controls, and a side list of pinned locations.
Static office locations map with an SVG grid surface, five absolutely-positioned pins, zoom controls, and a side list of pinned locations.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? 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.