Maps: Adding a uOttawa map widget to your page

Example of the uOttawa map widget as used on the Maps website

Example of the uOttawa map widget as used on the Maps website

About this tutorial

The following tutorial will teach you how to add a uOttawa map widget to a Panel page on your site. As an example, the main uOttawa Maps website leverages this widget. Note that this tutorial is provided as reference only; you may need to modify some options and settings to meet your own needs.

Prerequisites

For the purpose of this tutorial, the following criteria need to be met:

  • Your user account needs to have the role Webmaster or higher to be able to work with Panel pages.
  • You need to be able to add the University Map widget as content. If it is not available on your site, please ask your primary webmaster to enable the module uOttawa Map, or request that a member of the Support team enable it for you using the Service Desk request form.

Step 1 – Create the taxonomy terms

Map Reference

The map reference is essentially the term that identifies a map. If you expect that you will need multiple maps, create more than one map reference.

  1. Navigate to Structure and then Taxonomy.
  2. Locate the vocabulary named "Map Reference" and click on the associated link add terms.
  3. On the page that follows, provide a title for your map in the Name field (e.g. "uOttawa Food Map").
  4. Once done, click on the button Save.

Point of interest (POI) group

The POI group is a taxonomy term that you will use to group related points of interest. For example, if I were creating a "uOttawa Food Map", then I might want to create a group for "Coffee shops" and another one for "Restaurants".

  1. Navigate to Structure and then Taxonomy.
  2. Locate the vocabulary named "POI group" and click on the associated link add terms.
  3. On the page that follows:
    1. Provide a title for your grouping in the Name field (e.g. "Coffee shops").
    2. Add an image to the Cluster Icon field. This icon will be what users see when they click on an item that is part of this group.
  4. Once done, click on the button Save.

Map POI Category

The map POI category is a taxonomy term used for sub-grouping points of interest under a larger group. For example, under "Coffee shops", I could have categories for "Express coffee locations", "Sit-down cafés", "Off-campus coffee shops", etc.

  1. Navigate to Structure and then Taxonomy.
  2. Locate the vocabulary named "Map POI Category" and click on the associated link add terms.
  3. On the page that follows, provide a title for your category in the Name field (e.g. "Express coffee locations").
  4. Once done, click on the button Save.

Step 2 – Create the points of interest

Example of a map point of interest

Example of a map point of interest showing the title, the address, the primary image and the map note.

The next step is to create the actual points of interests (i.e. the locations) that you want to add to your map.

  1. Navigate to Content and then click on the link Add content.
  2. Select the node Map POI.
  3. In the form page that appears, fill out all the values, as necessary.
    • Title: This is the name of your point of interest.
    • Map Note: The information in this section will be displayed when a user clicks on the point of interest on the map.
    • Body: This field will not render on the map itself, but it describes the location in further detail. This field is primarily used by the Hours module.
    • Address: This is the address that will be displayed to users when they click on the point of interest on the map.
    • Hours: This is a legacy field that no longer works.
    • Link: Optionally provide a link to a full page providing more information on the location. The link will be displayed when a user clicks on the point of interest on the map.
    • Map (Geofield): Click on the pencil icon to mark the exact location of the point of interest. If you made a mistake, click on the move icon (in the shape of four arrows crossed), click on your marker and then hit the "delete" key.
    • Icon: This is a legacy field that no longer works.
    • Primary Image: This is an image that showcases the establishment, so you may want to provide an actual photo or a logo. The image will be displayed when a user clicks on the point of interest on the map.
    • Map POI Category: Select the categories to which this point of interest belongs.
    • Map Reference: Select the map on which you wish to have this point of interest displayed.
    • Map Groups: Select the groups to which this point of interest belongs.
    • Floor: Select the floor on which to find this point of interest.
    • Building: If any exist, select the one that applies.
    • Operation Schedule: This is used by the Hours module.
    • Gender: This is used by the Hours module. The field specifies the French grammatical gender of the location.
    • Number: This is used by the Hours module. The field specifies the French grammatical number of the location.
    • Parent Location Schedule: This is used by the Hours module.
  4. Once done, save your point of interest.

Step 3 – Add the map widget to a Panel page

The final step is to add the map widget to a Panel page.

  1. Navigate to Structure and then Pages.
  2. Locate the page on which you wish to add the map widget and click on the associated link Edit.
  3. In the left navigation menu, click on Content.
  4. At the top-left corner of one of the regions, click on the gear icon. From the dropdown list, click on "Add content".
  5. In the window that appears, click on uOttawa Widgets and then select University Map.
  6. On the following configuration page, modify the values as necessary:
    1. Display: "Condensed" will render the map with the navigation pane below it. "Full" will render the navigation pane to the right of the map.
    2. Nodequeue machine name: Leave this at "map_reference_queue".
    3. Subqueue name: This is the same as the Map Reference taxonomy term you created in Step 1, except that it must be in lowercase and spaces must be replaced by underscores.
    4. Map height in pixels: You can leave this value at 600 as it has no effect.
    5. Map settings: At minimum, you will need to select the option "Enable POI list".
  7. Once done, click on the button Finish.
  8. If necessary, add Component Styles to configure the widget's spacing.
  9. Once satisfied, click on the button Update and save to save all your changes.
» Submit feedback
    Types: 
  • Tutorials
Back to top