UO Maps

The UO’s copyrighted, campus map can be added to UO websites by adding the map url to an iframe. Website editors can easily display each campus and/or different map apps. 

The main map url is https://map.uoregon.edu.

To display a specific campus, add a campus code to the end of the URL. Example: https://map.uoregon.edu/nepdx

Campus codes are:

  • Eugene - /main
  • NE Portland - /nepdx
  • Oregon Institute of Marine Biology - /oimb

To display a map app use one of the urls below:

To display a map app on a specific campus, add a campus code to the end of the url. Note some apps are not currently available on all campuses. Here’s an example using the trees app for the Eugene campus: https://map.uoregon.edu/trees/main

How to add an iframe with a campus map:

1. Click the "Iframe Embed" option located in the top toolbar in the CKEditor.  

screenshot of iframe embed button in editor

2. In the URL box, paste the map URL you got from the instructions above. Example: https://map.uoregon.edu/trees/main 

Tips:

To hide the search bar UI: Add ?hel=010 to the end of the url when adding in the iframe. Here’s an example using the trees app for the Eugene campus: https://map.uoregon.edu/trees/main/?hel=010

To hide both the search bar UI and the UO map UI: Add ?hel=000 to the end of the url when adding in the iframe. Here’s an example using the trees app for the Eugene campus: https://map.uoregon.edu/trees/main/?hel=000

3. Add the size you want to display your iframe. Sizing is dependent on page type, placement, and device. We recommend adjusting the height and width to meet the needs of your page and audience. 

A starting place for laptop/desktop sizing on a basic page is 800 width x 500 height while many mobile devices run around 400 width x 800 height.

You can also use the same instructions found on our Video help pages to make your map embed have a responsive size instead of a fixed size.

screenshot of an iframe toolbox in the editor

4. Add a relevant description in the Advisory Title field, related to the content of your map. This is required so that screen readers and search engines know what the embedded iframe contains.

 

Here is an example of what the above iframe will look like when embedded in a Drupal content editor window:

An embedded iframe example inside a Drupal content editor window. The iframe example shows a map of various trees types on the Eugene UO campus.

More complex customizations are possible using the Map API documentation. Web Developers can request access to the Map API by logging in to map.uoregon.edu, selecting the cube icon, selecting View the Map API docs, and submitting the brief form. 

Questions about the campus map can be emailed to the Location Innovation Lab.