Dot World Map

Dot Map is a polished, no-code friendly world map made of gridded dots. It shows live local time, procedural day/night shading, and beautiful hover cards for your locations.

How to use

1. Drop the component onto your canvas.

2. Turn on Owner and add your details.

3. (Optional) Enable Specials and add locations.

4. Toggle Hourly Message for any dot and fill the 24 slots.

5. (Optional) Enable Time Bar to show live HH:MM:SS under the card, and set its gap.

6. (Optional) Enable Analog Clocks, set Gap between clocks and Banner Gap.

Highlights

• Live time banner with timezone difference

• Hover cards (overlays) for Owner and Special pins

• Optional time bar under overlays (HH:MM:SS) with adjustable gap

• Per-dot hourly messages (24 slots each) for Owner and Specials

• Analog clocks (two) with position, gap, and banner gap controls

• City chooser with search + “Use my location” button

• Optional image, caption, and CTA on cards

• Day/night shading that updates on a schedule

• Light/Dark themes, gradients, borders, radius, shadows, blur

• Smart clustering keeps overlapping pins readable

• Keyboard & screen-reader friendly (Enter/Space to open cards)

What you can customize

• Map: solid/gradient background, dot size & spacing, Antarctica on/off

• Banner: font, size, colors, position, blur, border, shadow

• Owner & Specials (1–4): label, city, color, lat/lon, clamp-to-dots, pulse, border, image block, CTA

• Hourly Messages: toggle + 24 fields per dot (00:00–23:00)

• Overlay: background, text, border, radius, shadow, blur, max width

• Time Bar: show/hide + gap beneath the overlay

• Clocks: show/hide, position (Center/Left/Right/Split), scale, border, radius, shadow, gap, banner gap, hand sizes/colors

• Performance: auto density, max dots, day/night refresh rate

Typical uses

• “Global team” / “Offices around the world”

• “We support you from…” with local hours

• Launch footprint / community map

• Studio or agency contact card with city chooser

Notes

• City chooser includes a curated global list; geolocation uses the browser when allowed.

• Each dot’s hourly message uses the dot’s own local time.

• In Split clock layout, the clocks sit at the sides; for a visible spacing change, use Center/Left/Right—or keep Split and rely on Banner Gap.

• Built for smooth performance with auto density and clustering.