Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Cell Towers Map Block for Vue

A phone-shaped pin you drag or move with the arrow keys across a drawn hill country, with three rings per tower, a ridge shadow and a carrier toggle; the readout gives bars, technology and the nearest tower.

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

Let people check their signal before they sign, with this cell towers map for Vue with Ark UI. Signalbrook, a signal checker, draws a hill country with contour lines, a lake, a street grid and four towers for the chosen carrier, each with three hairline rings at 1.5, 3 and 4.5 km (solid, dashed, dotted). A hatched patch is the shadow of a ridge, where no signal arrives. A phone-shaped pin is the one movable control: drag it with a mouse, pen or finger, or focus it and move it with the arrow keys, six units a step and thirty with Shift, and press Escape to put it back. A Toggle Group picks the carrier (Kestrel Mobile, Plover Wireless or Brindle Net), and the readout under the map shows four bars, filled by the distance bands, with the technology, the nearest tower and its distance ("3 of 4 bars, 4G, tower K2 at 2.1 km") or "No service" past the last ring or inside the shadow. A polite message speaks the result once the pin rests. It's built from Toggle Group and Guides, with a CSS entrance only. For carriers, network checkers and travel apps.

FAQ

How do I move the pin without a mouse?

Focus the phone with Tab. The arrow keys move it 6 units, Shift with an arrow moves it 30 and Escape returns it to where it started; it stays inside the map. The pin is named by where it is ("Your phone, 2.1 km from tower K2"), described by a hint that lists the keys, and its role is announced as a movable pin. Pointer drag uses pointer capture, so it keeps following the pointer outside the pin.

How are the bars worked out?

From the straight line to the nearest tower of the chosen carrier, in drawing units over UNITS_PER_KM. BANDS lists the rings: within 1.5 km is 4 bars on 5G, within 3 km is 3 bars on 4G, within 4.5 km is 2 bars on 3G, and past that, or inside the shadow polygon, there is no service. It is a sketch for the demo, not a propagation model; in your app use measured coverage maps.

How do I use my own carriers and towers?

Edit CARRIERS (each has towers with a code and a position in the drawing's 480 by 360 units), BANDS, and SHADOW, the polygon with no signal; the contours and hatching are drawn from it. The toggle, rings and towers read the same lists.

Does it use my real location?

No. Nothing asks the browser for the device's position, and the pin starts at a fixed place. If you add a "use my location" button, call the Geolocation API from its click handler, handle a refusal in words, and project the result onto your map.

What stays local in the demo, and how do I wire it up?

All of it. The carriers and towers are invented, nothing is requested, and the readout is computed in the page. In your app read the signal for the pin's place from your coverage service when the pin rests and keep this readout as the display.

How does it look on a phone?

The map comes first at a fixed height and the pin can be dragged with a finger without scrolling the page while it is held. The readout and the carrier toggle stack under the map, and the readout keeps its height whatever it says.

All 100 map blocks