shadcn.io is not affiliated with official shadcn/ui
Franchise Map Block for React
Twelve bakery outlets along an invented coast as bubbles sized by revenue and shaped by territory; a stage that zooms and pans, a North, Central, South toggle, a revenue ranking with 6 percent royalties and a foot that adds up what is in view.
Installation
Overview
See which outlets carry a franchise, with this franchise map for React with Base UI. Burrowfield, a bakery franchise, draws twelve outlets along an invented coast as bubbles: the area follows the yearly revenue (a key shows three reference circles), the shape says the territory (urban a circle, suburban a square, rural a diamond) and the number inside is the rank. The stage pans and zooms inside its frame with plus, minus and reset buttons, with the arrow keys and plus, minus and zero on the focused map, or with a mouse or pen drag, while touch keeps scrolling the page. A Toggle Group sets the view to the whole coast or to its North, Central or South stretch, and a list at the side ranks every outlet by revenue with the royalty at a typed 6 percent, in whole cents. Pressing a bubble or a row marks the outlet and writes out its royalty and rank; the foot adds up the outlets in view. A polite status line speaks the result once the view settles. On a phone the map comes first and the ranking stacks under it. It's built from Toggle Group, Button and Guides, with CSS transitions only. For franchise, retail-network and territory-planning tools.
FAQ
How do the zoom and the region presets work?
The ground and the bubbles share one wrapper that is moved with a CSS transform: a scale from 1 to 3 and a translation in percent of the stage, so nothing is measured. The pan is clamped so the coast always covers the frame, bubbles are counter-scaled so they keep their size, and the region buttons are four stored views. Drag the map and the toggle clears, because the view is no longer one of the presets.
How do I use my own outlets?
Edit OUTLETS: a name, a territory, the yearly revenue in cents and an x and y in the drawing's 480 by 360 units. The ranking, the bubble sizes, the royalty (ROYALTY, 6 percent) and the foot totals all follow. In your app project each outlet's latitude and longitude onto your map and keep royaltyOf, which rounds to whole cents.
Why are shapes and sizes used and not colours?
Territory is a shape and revenue is an area, so the picture reads in any theme and without colour. The key under the map shows each shape and three sizes, and the list says the territory in words for every outlet.
Can I use it without a mouse?
Yes. The map is one button in the tab order: the arrow keys move the view, plus and minus zoom and zero resets, and the same actions are three named buttons. The region toggle is one tab stop, and each outlet in the ranking is a button. The bubbles are hidden from assistive technology and skipped by Tab because the ranking says the same things.
What stays local in the demo, and how do I wire it up?
All of it. The outlets and their revenue are typed sample data and the royalty is a fixed rule; nothing is read from a till or billed. In your app load revenue from your sales system for the period, and replace the drawing with your map library, keeping the view presets as bounding boxes.
How does it look on a phone?
The map keeps its full width at a fixed height and zooms with the buttons; one finger scrolls the page rather than moving the map, so a phone moves around with the region toggle and the zoom buttons. The ranking stacks under the map in a box that scrolls on its own, and the foot keeps three figures in a row.