Components
Place detail dialog
Give a selected map place a readable, action-oriented detail surface outside the map canvas.
On this page
Purpose and placement
Give a selected map place a readable, action-oriented detail surface outside the map canvas.
Anatomy
| Part | Behavior |
|---|---|
| Header/media | Title, eyebrow, contextual image and description. |
| Details | Facts, chip groups and optional content sections. |
| Actions | Named destinations with an optional primary action. |
| Modal shell | Backdrop, close affordance and scrollable content. |
Configuration and contract
| Input or decision | Implementation |
|---|---|
| MapDetailModal | target or null; onClose callback. |
| Target model | href/title, optional image, facts, chips, actions and sections. |
| Save inference | Source can infer save identity from destination URLs on the client. |
States and feedback
- Null target means closed.
- Captured open Greenbelt panel uses real Boise imagery and synthetic descriptive content.
- Missing facts or imagery must not leave empty decorative sections.
Usage rules
- Keep access/condition claims tied to current authoritative data.
- Do not cover a blank map with this dialog and present it as working map functionality.
- Source expects client-origin URL inference; the specimen opens after mounting, matching client-triggered use.
Accessibility and verification
Source includes dialog labeling, Escape and body scroll locking. Focus containment and restoration need manual testing; the screenshot harness does not certify them.
Source references
| File | Responsibility |
|---|---|
| components/map-detail-modal.tsx | Audited Townwell implementation; use this file when extending this interface. |
| components/save-this-control.tsx | Audited Townwell implementation; use this file when extending this interface. |
Examples from the app
Actual Boise Today and Townwell UI with synthetic editorial, business, review, media metadata and analytics. Existing Boise imagery; no live data changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision ce8bc72b96da · Documentation v0.1