Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Map blocks

Pro

Telecommunications Map Block for Radix UI

Seven towers on a drawn town; choose one to draw its three sector wedges, set 4G or 5G and a down-tilt from 0 to 10 degrees, and each sector says how far it reaches by a typed rule.

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

Tilt a tower and watch its sectors shrink, with this telecommunications map for React with Radix UI. Pylonwell, a tower company, draws seven towers as triangles on a street map of an invented town. Choose a tower, from the list or the map, and its three sectors are drawn as 70 degree wedges at their typed azimuths. A Toggle Group sets 4G (solid outlines, long reach) or 5G (dashed, short reach) and a Slider tilts the antennas down from 0 to 10 degrees. Each sector's reach follows a typed rule: the technology's base reach, times the mast height over 40 m, times the sector's terrain factor, less 5.5 percent for every degree of tilt. The list says how far each tower reaches now, and a card lists the chosen tower's sectors in words ("Sector 1, faces north-east, reaches 4.1 km"). It's built from Toggle Group, Slider and Guides, with a CSS entrance only. For tower companies, radio planners and coverage reviews.

FAQ

How is a sector's reach worked out?

reachOf multiplies the technology's base reach (6 km for 4G, 2.4 km for 5G) by the mast height over 40 m and the sector's terrain factor, then by one minus 5.5 percent per degree of tilt. It is labelled Simplified in the caption: real reach depends on frequency, power, clutter and antenna patterns.

How do I use my own towers?

Edit TOWERS (a name, a mast height, a position in the 480 by 360 units and three sectors with an azimuth and a terrain factor) and TECHS for the base reaches. UNITS_PER_KM sets the drawing's scale.

How is this different from the cell towers block?

That block moves a phone across the map and reads the signal at a point. This one holds the map still and changes the tower: which sectors it has, how it is tilted and which technology it serves.

Can I use it without a mouse?

Yes. The list of towers is the keyboard route (each row is a button), the toggle group and slider are labelled controls, and a polite message gives the sector reaches once the controls settle. The triangles on the map are a pointer shortcut and are hidden from assistive technology.

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

All of it. The towers and the rule are invented and nothing is sent to an antenna. In your app read heights and azimuths from your asset records and replace reachOf with a prediction from your planning tool.

How does it look on a phone?

The map comes first at a fixed height, the controls and the two lists stack under it with fixed row heights, so changing the tilt never changes the length of the page.

All 100 map blocks