"Stations" and "Project Stations" Maps: add station pop-up for selected station

BACKGROUND

We are looking to evolve our thinking around the portal experience to make the map more prominent, useful and connected to the data (see the Epic overview). As a first step, we added a left hand station listings to the map (per #132 (closed)). And as a second step, we want to implement functionality that adds a station pop-up for a selected station.

USER STORIES

  • Mouse over a station from the left hand station listings menu
  • Select a station from the left hand station listings menu
  • View station page data via the 3 tabs in the pop-up

DESIGNS

https://zpl.io/OX0Q4pP

Notes:

  • Make pop-up fill up vertical height of screen It should be responsive and allow for maximum content seen and minimum scrolling necessary (like Google)
  • Instead of the filter open/close icon, we could instead use the new arrow icon (seeing as we're not implementing filters yet)

Screenshot 2024-09-03 at 16.10.01.png

ACCEPTANCE CRITERIA

Mouse over a station from the left hand station listings menu

  • IF I am on the map page
  • WHEN I mouse over a station listing in the left hand stations listings menu
  • THEN the listing background changes color to #f4f5f7
  • AND the map dot icon changes to the blue pin drop icon

Select a station from the left hand station listings menu

  • IF I am on the map page
  • WHEN I click on a station listing in the left hand stations listings menu
  • THEN the listing background stays the same as the mouseover color
  • AND the map dot icon stays on the blue pin drop icon
  • AND a station pop-up appears for that selected station to the right of the left hand station listings menu

View station page data via the 3 tabs in the pop-up

  • IF I am on the map page
  • AND I have a station pop-up open
  • WHEN I click on one of the tabs (Explore Data, Field Notes, Station Details)
  • THEN I see corresponding content that is pulled through from the Station Page