Portland Community College | Portland, Oregon Portland Community College

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

Default map

Hover state

Map hover state, with Sylvania Campus's name above its marker

Hover animation

Hover animation when interacting with campus and center links

Loading animation

Loading animation, the markers fall into place on the map