Web services

Maps

It’s possible to embed a map with one or more place markers on a page. These are used for things such as showing an office location at different campuses. We used to use Google Maps (and still do for the campus maps), but due to view limits, we’ve switched over to using OpenStreetMaps.

Styling

Embedded maps, in most cases, look just like they do on OpenStreetMaps (similar to Google Maps).

Responsive behavior

Embedded maps shrink or expand with the window size. They also use a responsive touch feature:

  • Use two fingers to move the map.
  • Use one finger to move the page (scroll).
Development info
  • Stylesheet location: /_source/styles/components/_maps.scss
  • In WordPress, use the placemarks shortcode – you’ll also need to activate the Placemarks plugin for the site.
  • We’re phasing out embedding maps on plain HTML pages.

Map examples

Campus maps

We also have a custom individual campus map style on the location pages.

Screenshot of the Cascade Campus map

Accessible features maps

This map style can also be used for other maps, like the emergency phone maps.

Screenshot of the accessible features map

Simple maps

Screenshot of four maps with one placemark each, for each of the campus bookstores