Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

World Map Pin Overlay Features Block for Ark UI

A dot-grid world map with a numbered pin on each of six regions, where choosing a region from the list under it rings its pin and rolls the edge locations, latency and uptime to that region.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A world-map features section for React with Ark UI. The world is a grid of dots in a framed figure, with a numbered pin on each of six regions. The region list under it is the control: choosing a region rings its pin with a soft ping, outlines the others, and makes the closing band read that region (edge locations, median latency, uptime, each rolling to its new value); choosing it again goes back to all regions. The map is a bitmap of rows kept at module scope and drawn as a single SVG path, so there is no image to load. It's built from Guides and Sliding Number, and it follows your theme. For infrastructure and network products, regional availability pages and any feature that is about where.

FAQ

How do I change the regions and their figures?

Edit REGIONS at the top of the file: each has a name, its cities, a longitude and latitude for the pin, and its numbers (locations, median latency, uptime). The pin's place is computed from the coordinates, and the "all regions" figures are derived from the same list: the locations add up, latency is weighted by them, and uptime is the mean. The header counts them too.

How is the map drawn?

MAP is 34 rows of 90 characters, each a 4-degree cell, with 1 for land. A small function turns every land cell into a zero-length round-capped segment, so one path draws all the dots at a width you set with strokeWidth. To redraw the world at another resolution, replace the rows and change DEGREES; the pins follow.

How do keyboards and screen readers get on?

The map and its pins are decoration and are hidden from assistive technology. The regions are a list of buttons that you can reach with Tab and press with Enter or Space; a pressed region says so, and the figures are announced politely when they change. The same facts are in text, so nothing depends on seeing the map.

Does the map mirror in right-to-left languages?

No: a map keeps its geography, so the figure is dir="ltr" and the pins stay where the regions are. The region list and the figures follow the page's direction.

How does it fit on a phone?

The map scales down with its container and the pins shrink with it. The regions are two across, and the three figures stack one per row with a hairline between them.

What moves, and what happens with reduced motion?

The header and the map fade up once on load, the chosen pin pings, and the figures roll to their new values. With reduced motion the fade and the ping are off and the digits change in place.

All 170 features blocks