shadcn.io is not affiliated with official shadcn/ui
Broadband Coverage Map Block for Vue
Five providers as coverage circles on a drawn street map, an address select that puts a pin in and a comparison table of the providers that cover it, cheapest per 100 Mbps first, with an empty state for no cover.
Installation
Overview
Answer "who covers my address" in one view, with this broadband coverage map for Vue with Ark UI. Fernlink, an internet comparison site, draws five providers as coverage circles on an SVG street map of an invented town, by technology: fibre solid, cable dashed and fixed wireless dotted, each with a two-letter mark. A native Select of eight invented addresses puts a pin on the map; the providers whose circle holds the pin (a point-in-circle test) get a heavier line and fill a Table with the provider, technology, download speed, monthly price and the price per 100 Mbps, cheapest per megabit first. An address that no circle holds shows an Empty state in a box of the same height, so the page never jumps. On a phone the table keeps the provider, the price and the price per 100 Mbps, with the technology and speed under the name. It's built from Native Select, Table, Empty and Guides, with a CSS entrance only. For internet comparison sites, moving guides and utility finders.
FAQ
How do I use my own providers and addresses?
Edit PROVIDERS (a name, a two-letter mark, the technology, the download speed, the monthly price and a circle with a centre and a radius in the drawing's 480 by 360 units) and ADDRESSES. The map, the table and the sort all read them, and the price per 100 Mbps is worked out from the price and the speed, never typed. In your app replace the circles with a coverage lookup for the address you geocode on your server.
How is the table sorted?
By the price for each 100 Mbps of download speed, lowest first, because the cheapest plan is not always the best value. The column is the last one and is the only bold figure. Change coveringOf to sort by price or by speed.
How is coverage decided?
A provider covers an address when the straight line from its circle's centre to the address is no longer than its radius. Real coverage is a property-level lookup, not a circle, and the caption says the circles show where a provider says it reaches in a sample drawing.
Is it accessible?
Yes. The address select has a label, the table has a name and column headings, and the number of providers is written next to the heading. A polite message says how many providers cover the address and which is cheapest per megabit. The circles and pins are decoration for assistive technology.