View All Library Branches in a List and on a Map

[lianilychee]

Description

As a visitor to the Austin Public Library website, I want to view a list of all library branches next to a map of library branches, So that I can easily see which branches have available rooms and where they are located.

Acceptance Test

Scenario: Viewing the List of Library Branches

• Given I am a visitor to the Austin Public Library website
• When I am on the "Find a Room" page
• Then I can see a list of all the Austin Public Library branches
• And I can see the name and address of each branch
• And I can see how many rooms are available at each branch

Scenario: Viewing the Map of Library Branches

• Given I am a visitor to the Austin Public Library website
• When I am on the "Find a Room" page
• Then I can see a map showing pins for each of the Austin Public Library branches
• And when I hover over a location in the list of branches, that is reflected in the map pin color change for the hovered location

Implementation Details

• Grab list of libraries from either option:
  • store the data statically in a JSON
  • fetch from API, which is caching somewhere
• For every entry in list, make a library map sub component, which would be every box in the list
• Figure out how to get the pin color change on-hover (which is dependent on static or dynamic map)

Notes

• Prerequisites:

  • 17

  • 23

  • 15

• The library-specific images might be in the Drupal server; if they aren't, we'll have to download them from here
• This view is what Jerri is referring to as the "map-level view"

Attachments

• Link to 4 design mockup:
  • Business: 1 mockup
  • Nonprofit: 3 mockups, horizontally laid out

[julielaursen]

Nit: maybe change "Time" to "Start Time"?

[julielaursen]

@jerrizhang-UX under the "Showing available" cards in Find A Room, the wording "X Available" does not look like a link. If not a link, is the mapping from the card to the pin on the map a 1:1 ratio? i.e. should the user click on the available text or the card itself to interact with the map?

[jerrizhang-UX]

@julielaursen Yes, it's not a link. The link is the title of the card which is in Teal. Design-wise, this might change later both depending on user testing and conversations with APL about their design system which is a bit inconsistent on their end.