Homepage map
The homepage includes a simple map showing the location of PCC’s campuses and centers. The goal is to show how PCC is “near you” and that we have many locations across the metro area, not to provide detailed location information.
Guidelines
The map only shows locations where students can take credit classes. It doesn’t include Community Ed off-campus locations or locations that are for staff only or for very specific audiences, like the Downtown Center and Maritime Welding Trading Center.
Styling
The map shows a very simplified overview of Portland’s main highways and the Willamette River. It’s meant to show enough information to convey the general location of each campus or center, but not provide the exact address or directions about how to get there.
When you hover over a campus or center marker on the map, the marker highlights and the location’s name appears above the marker. If you hover over one of the campus or center links, the corresponding marker on the map highlights and the name appears above the marker.
Responsive behavior
None, other than the map shrinks to fit the screen width and stacks on small screens along with the other location content.
Development info
- Stylesheet location:
/_source/styles/homepage/_map.scss - The map and interactions are controlled by the script.
- Short descriptions of the general location are included as visually-hidden text for each of the campus and center links, acting as an accessible alternative to the map.
Homepage map examples
Default map
Hover state
Hover animation
Loading animation
