shadcn.io is not affiliated with official shadcn/ui
Dot Grid Map Logos Block for Vue
A world map for a freight-forwarding tool, drawn as a grid of dots in a framed figure, with six customer pins at their cities and one chip per region carrying its customer count.
Installation
Overview
A global-presence logo map for Vue with Ark UI. Under a centred header, the world is a grid of dots in a framed figure with + marks on its corners, and six customers sit on it as pins at their cities: an icon in a ring that pulses twice when the page loads. Hover a pin and it lifts and opens a card with the customer's wordmark and its city and country. Under the map, one chip per region carries that region's customer count, in a row that wraps from sm and scrolls sideways on a phone. The land is a bitmap at the top of the file, drawn as one SVG path, so there is no image to load and the dots take the theme's colours. The pins are decoration for the pointer and the facts are in text: each pin is a list item that names the customer and its city for a screen reader, and the chips are a list. Built from Badge and Guides, with CSS for the entrance, the pulse and the card.
FAQ
How do I move a pin or add one?
Each entry of PINS has a lat and a lon in degrees, the customer's name, icon and lettering, its city and country, and an anchor for the card (start, center or end, so a card near the map's edge stays on the map). The pin's place on the map is worked out from the coordinates and the bitmap's grid, so a new entry needs nothing else.
How do I draw a different map?
MAP is a list of strings, one per row, where 1 is a dot of land and 0 is sea; each cell is four degrees, 90 columns from the date line and 34 rows from 84 degrees north. Edit the rows to change the shape, or add rows and columns and update DEGREES and NORTH. One path draws every dot, so a bigger map costs only a longer string.
Why doesn't the map mirror in a right-to-left layout?
Geography keeps the Americas on the west side in every language, so the map and its pins sit in a box with dir="ltr". The header, the chips and the page's own lines still follow the page's direction, and the figures in the chips are wrapped in bdi.
Can a keyboard or a touch screen reach the pin cards?
No: the pins are not buttons, so there is nothing to tab through and the card is for the pointer. Nothing is only on the map, though: every pin is a list item that names the customer and its city for a screen reader, and the chips give the regions' counts. If a pin should open something, make it an a to the customer's story and open the card on group-focus-within as well as on hover.