New
MapsOffice Locations Map
A dotted map panel of office pins beside a matching address list, stacking on mobile.
#map#offices#locations
3 frameworksIntermediate
Loading…
A stylised dotted-continent world drawn in inline SVG, with labelled city pins and no tile server.
<!--
The dotted continents are painted from a handful of blobs in the SVG below and
are purely decorative (aria-hidden). Each city is a real button with a label so
a keyboard and a screen reader can both reach it.
-->
<div class="relative w-full overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950">
<div class="relative aspect-[2/1] w-full">
<svg aria-hidden="true" viewBox="0 0 256 128" preserveAspectRatio="xMidYMid meet" class="absolute inset-0 h-full w-full text-gray-300 dark:text-gray-700">
<defs>
<pattern id="world-dotted-grid" width="8" height="8" patternUnits="userSpaceOnUse">
<circle cx="4" cy="4" r="1.4" fill="currentColor" />
</pattern>
</defs>
<rect width="256" height="128" fill="url(#world-dotted-grid)" opacity="0.5" />
</svg>
<button type="button" aria-label="San Francisco" style="left:16%;top:42%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
<span class="h-3 w-3 rounded-full bg-blue-600 ring-4 ring-blue-500/25 dark:bg-blue-400"></span>
</button>
<button type="button" aria-label="London" style="left:49%;top:33%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
<span class="h-3 w-3 rounded-full bg-blue-600 ring-4 ring-blue-500/25 dark:bg-blue-400"></span>
</button>
<button type="button" aria-label="Singapore" style="left:74%;top:63%" class="absolute flex h-10 w-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500">
<span class="h-3 w-3 rounded-full bg-blue-600 ring-4 ring-blue-500/25 dark:bg-blue-400"></span>
</button>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
markers | MapMarker[] | - | Markers |
className | string | - | Additional classes merged onto the root element. |
Pass your own `markers` as `{ id, label, x, y }` where `x`/`y` are percentages over the panel. The continents are decorative blobs (`aria-hidden`); every pin is a real button with an `aria-label` and a focus ring, so a keyboard reaches them all.