Skip to main content
OCLC Support

Display items on clickable maps

  1. Last updated
  2. Save as PDF

Overview

The Website Configuration Tool supports creating and displaying maps with pins indicating the locations of records in your collections. This is a good way to give geographic context to your data and present your collections in a visually appealing way.

Placing the pins on the map requires that the records contain latitude and longitude values in two separate metadata fields. Through the Website Configuration Tool you can place maps on your home page, on collection landing pages, on your site’s about page, or on any fully custom pages you have created.

The set of records to display on the map is defined by a search query (or a browse). At this time, the query used for a map must contain records from only a single collection. This is to avoid conflicts with Dublin Core field mapping across different collections. You can create as many maps as you want, so you could create one for each collection that contains the necessary geographic metadata.

The map you configure will display inline on the page you choose. The map pins will render dynamically whenever the page is viewed. This means that your query will pull in additional records as you add them to the collection in the future. A map will display up to 1,000 pins for records.

 Note:

  • The amount of time it takes the map to load depends on the number of results in your search query. To shorten load time, refine your query to a smaller record set.
  • Records that lack valid latitude or longitude data will be ignored when the map is generated.

The process

Step 1: Define the map

There is a new administrative wizard to help you build your map. This interface is accessible from your CONTENTdm website. To use this administrative UI, your user account must have the server right to access the Website Configuration Tool, as specified in CONTENTdm Administration.

  1.  Sign in to your public-facing CONTENTdm website.
  2. Run a search or browse to define the set of records you want to display on a map.
  3. On the results page, you should see a Generate Map button above your results.
  4. Click Generate Map to activate the admin wizard.
  5. The admin wizard asks you to specify which metadata fields you want to display in the previews that pop up when a map pin is selected by an end user. The pin pop-up window will display the record thumbnail and the three metadata fields you choose.
  6. You will also need to specify the two metadata fields that contain the latitude and longitude data in your collection. The values in the latitude and longitude fields will define the placement of the record’s pin on the map. Note that latitude and longitude data must be in decimal format for the map widget to parse them correctly. If your geographic data contains degree symbols or other non-standard characters or notation, it is unlikely to be interpreted correctly.
  7. After choosing the fields, click the Get HTML button. This will generate the HTML snippet that you will need to use in the Website Configuration Tool.
  8. Copy the HTML to your clipboard, and then proceed to step 2.

Step 2: Place the map in the Website Configuration Tool

Your map is defined by a snippet of HTML code that can be placed on any page of your CONTENTdm website that supports HTML customization. This includes the home page, any collection landing page, the site About page, and any fully custom page.

  1. Sign in to the Website Configuration Tool.
  2. Using the Website Configuration Tool menus, navigate to the page where you want to place the map.
  3. In the web editor for the page in question, paste the HTML code you copied from the map wizard in Step 1. This HTML snippet can be treated like any other content you have created in the web editor. Be sure to move the code into a single block if you would like to arrange it with other HTML content on your landing page or other custom pages. It might be easier to place the map using the HTML source code editor dialog, which is the HTML button at the far right of the web editor toolbar.
  4. Once you like the placement of your map, click Save and Publish in the Website Configuration Tool to activate your changes.

Note that the map will not render within the Website Configuration Tool. You will only be able to preview the map on your website.

After you publish your map and return to the Website Configuration Tool, a graphic icon representing your map will appear. If you want to modify or remove the map, you can delete the icon or open the HTML source editor to modify the HTML code.

Step 3: Preview and refine the map

You can preview your maps in the same way that you do any changes you make in the Website Configuration Tool using the built-in Preview function. This allows you to see how your map looks on different screen sizes and on mobile devices.

Stock HTML snippet generated by the map administrative wizard:

<cdm-map
query="/digital/api/map/collection/p20500coll1/search/order/title/ad/asc?metadataField1=title&amp;
metadataField2=subjec&amp;metadataField3=descri&amp;latitudeField=publis&amp;longitudeField=creato" center="0,0" zoom="0">
</cdm-map>

By default, the map will be sized to the full width of the page's content section and set to 200px in height. If you would like to adjust these sizes, you can add a <style> tag before the <cdm-map> element. To preserve the map's responsiveness, we do not recommend specifying the map's width; you can specify a custom height instead. 

For example, add the following before the <cdm-map> snippet:

<style><!--
cdm-map {
  height: 400px;
}
--></style>

The resulting HTML snippet with a custom height value should look like the following:  

<style><!--
cdm-map {
  height: 400px;
}
--></style>
<cdm-map
query="/digital/api/map/collection/p20500coll1/search/order/title/ad/asc?metadataField1=title&amp;
metadataField2=subjec&amp;metadataField3=descri&amp;latitudeField=publis&amp;longitudeField=creato" center="0,0" zoom="0">
</cdm-map>

You can also add other CSS rules, such as a solid border and a margin to push down the browse button:

<style><!--
cdm-map {
  height: 400px;
  border: solid;
  margin-bottom: 10px;
}
--></style>