Distance Radius Card
Static map blueprint with a dashed SVG radius circle, a stepped radius control, and a count of locations within the selected distance.
Static map blueprint with a dashed SVG radius circle, a stepped radius control, and a count of locations within the selected distance.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
Already purchased? Log in
Distance Radius Card shows a static map blueprint centered on Acme HQ, San Francisco, CA, with a dashed SVG radius circle at 25 km, twelve secondary location dots plotted inside the circle, a center pin, and abstract city block fills and road lines on a bg-muted grid surface. Below the map a stepped slider-feel control with five options (5, 10, 25, 50, 100 km) shows the active step filled on the track. The footer reads Locations within 25 km and badges the count 12.
Constants RADIUS_KM and LOCATIONS_WITHIN drive both the badge and the footer so the number never drifts out of sync. The map is self-contained inline SVG with no external tile or embed.
Reach for this block on a store locator, service coverage, or delivery-zone page where the user needs to understand how many locations fall inside a selectable radius. Wire the step control to your location-count API and update the badge on change.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the store or office locator radius picker. Other radius cards:
Tip: make the step labels clickable targets as well as the plus and minus buttons; small touch targets on the track are the most common friction point on radius controls.