Dot World Map
A fully customizable interactive world map made of dots with live time info, procedural day/night shading, hover cards, analog clocks, hourly messages, geolocation, and more
Made with Workshop
Build your own component with AI
A fully customizable interactive world map made of dots with live time info, procedural day/night shading, hover cards, analog clocks, hourly messages, geolocation, and more
Made with Workshop
Build your own component with AI
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.
Drop the component onto your canvas.
Turn on Owner and add your details.
(Optional) Enable Specials and add locations.
Toggle Hourly Message for any dot and fill the 24 slots.
(Optional) Enable Time Bar to show live HH:MM:SS under the card, and set its gap.
(Optional) Enable Analog Clocks, set Gap between clocks and Banner Gap.
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)
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
“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
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.
