shadcn.io is not affiliated with official shadcn/ui
Service Coverage Map Block for Radix UI
Five towers on a drawn valley with three ring tiers each and a reach slider from 2 to 8 km; a sampled grid finds the unserved areas, which are hatched, numbered and listed with their area and nearest tower.
Installation
Overview
Find where a network does not reach, with this service coverage map for React with Radix UI. Farreach, a rural wireless provider, draws five towers on a valley with contour lines and a river, each with three hairline rings: Full solid, Basic dashed and Weak dotted. A Slider sets the tower reach from 2 to 8 km. The gaps are found by sampling rather than by geometry on the page: a 40 by 30 grid of points is tested against the towers, the points inside the valley that no weak ring holds are drawn as hatched dots, and neighbouring misses merge into numbered gaps. The header says "Covers 85% of the valley, 3 gaps", and a list under the slider gives every gap its area in square kilometres and its nearest tower; an empty state replaces it when nothing is missed. The map is a fixed view with decoration only, and the list is the way in for the keyboard. It's built from Slider, Empty and Guides, with a CSS entrance only. For telecoms, utilities, rural broadband and any coverage planner.
FAQ
How are the gaps found?
SAMPLES is a grid of 40 by 30 points over the drawing, kept where a point falls inside the valley's outline (a ray-casting test). For each reach, a point is missed when its nearest tower is further than the reach, the share covered is the points held over all the points, and gapsOf merges touching misses into gaps with a flood fill. A gap smaller than three points is treated as noise and left out of the list, though it still counts against the percentage.
How do I use my own towers and valley?
Edit TOWERS (a name and a position in the drawing's 480 by 360 units) and VALLEY, the outline of the area you measure; the contours are drawn from the same outline. TIERS sets the three rings as shares of the reach. In your app use projected coordinates and keep the sampling functions, replacing the distance with a propagation model or a measured signal map.
Are the distances real?
No. A distance is drawing units divided by UNITS_PER_KM, so the kilometres and the areas are only as good as that typed scale, and the caption says the drawing is not to scale and the data is a sample. The rings are circles, which no real radio signal is; the block is for planning conversations, not for engineering.
Can I use it without a mouse?
Yes. The slider takes the arrow keys and speaks its value in kilometres. The towers and gap markers are decoration, hidden from assistive technology, because the header sentence and the numbered list say the same things in words. A polite message gives the new result once the slider settles.