New
MapsDotted World Map
A stylised dotted-continent world drawn in inline SVG, with labelled city pins and no tile server.
#map#world#dotted
3 frameworksIntermediate
Loading…
A responsive 16:9 map frame that renders a styled placeholder and leaves the live iframe commented out.
<!--
Responsive 16:9 frame. The live map is deliberately left commented out so the
component ships nothing that phones home until you opt in - drop your provider's
iframe in and delete the placeholder:
<iframe
title="Office location"
src="https://maps.example.com/embed?place=..."
class="absolute inset-0 h-full w-full border-0"
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
allowfullscreen
></iframe>
-->
<div class="relative aspect-video w-full overflow-hidden rounded-2xl border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950">
<svg aria-hidden="true" class="absolute inset-0 h-full w-full text-gray-300 dark:text-gray-700" preserveAspectRatio="xMidYMid slice">
<defs>
<pattern id="embed-dots" width="14" height="14" patternUnits="userSpaceOnUse">
<circle cx="2" cy="2" r="1.4" fill="currentColor" />
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#embed-dots)" />
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center gap-2 text-center">
<span class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-gray-500 shadow-sm dark:bg-gray-900 dark:text-gray-400" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="h-5 w-5"><path d="M12 21s-6-5.686-6-10a6 6 0 1 1 12 0c0 4.314-6 10-6 10Z" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="11" r="2"/></svg>
</span>
<span class="text-sm font-medium text-gray-600 dark:text-gray-400">Map preview</span>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Map' | Heading text for the card. |
label | string | 'Map preview' | Accessible label announced while loading. |
className | string | - | Additional classes merged onto the root element. |
The frame keeps a fixed aspect ratio so it never causes layout shift, and it ships a placeholder rather than a live `<iframe>` - the real embed is left commented in the code so nothing loads or phones home until you deliberately opt in. Drop your provider snippet in and delete the placeholder.