8080.AI
DesignReqsTasksUser Flow
Architecture
Log inSign up for free

address-list-map

byKshitij Virola

Create a clean, responsive address list UI where each address is displayed in a single line with the **Name, Mobile Number, and Full Address**. Show all saved addresses as markers on **one map displayed beside the address list**. When a user clicks an address, highlight the corresponding location marker on the map and center the map on that location. Keep the layout clean, compact, and easy to scan on both desktop and mobile.

No preview

Comments (0)

No comments yet. Be the first!

Architecture

No Services Diagrams Yet

Architecture diagrams will be automatically generated when the Project Manager creates tasks for your project.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open application anonymously
Landing: Read live saved count
Landing: Scan populated list rows
Landing: Observe pre-selected marker
Address List: Enter working view
Address List: Read NAME MOBILE ADDRESS columns
Address List: Scan one-line rows
Address List: Hover row to preview marker
Address List: 1. Select address row
Address List: 2. Read expanded detail strip
Address List: 3. Copy full address
Address List: 4. Open route to location
Address List: 5. Read highlighted orange marker
Address List: 6. Read map centered on location
Address List: 7. Retry map tiles
Address List: 8. Read map unavailable notice
Address List: 9. Select another address
Address List: Scroll list against sticky map
Address List: Activate Add address control
Address List: Read creation unavailable notice

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

Landing: Open application anonymously
Landing: Read live saved count
Landing: Scan populated list rows
Landing: Observe pre-selected marker
Address List: Enter working view
Address List: Read NAME MOBILE ADDRESS columns
Address List: Scan one-line rows
Address List: Hover row to preview marker
Address List: 1. Select address row
Address List: 2. Read expanded detail strip
Address List: 3. Copy full address
Address List: 4. Open route to location
Address List: 5. Read highlighted orange marker
Address List: 6. Read map centered on location
Address List: 7. Retry map tiles
Address List: 8. Read map unavailable notice
Address List: 9. Select another address
Address List: Scroll list against sticky map
Address List: Activate Add address control
Address List: Read creation unavailable notice