Skip to main content
OCLC Support

Display items on clickable maps

  1. Last updated
  2. Save as PDF

Overview

The Website Configuration Tool supports creation and display of maps with pins corresponding to the location 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 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 pins for up to 1,000 records.

 Note:

  • The amount of time it takes the map to load depends on the number of results in your search query. To shorten the load time, redefine your query with 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 for building your map. This interface is accessible from your CONTENTdm website. To be able 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 popup 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 it to be parsed correctly by the map widget. 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, which can be placed into any page of your CONTENTdm website that support HTML customization. This includes the home page, any collection landing page, the site About page, and any fully custom page.

  1. Sign in 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 as 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 through the HTML source code editor dialog, 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 have published your map and return to the Website Configuration Tool there will be a graphic icon representing your map. If you want to modify or remove the map you can delete the icon or open the HTML source editor, and then modify the HTML code.

Step 3: Preview and refine the map

You can preview your maps in the same way that you do any change you make in the Website Configuration Tool using the built-in Preview function. This allows you to see how your map looks on different sizes of screens 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 fit the full width of the content section of the page and will be given a height of 200px. If you would like to adjust these sizes, you can add a <style> tag before the <cdm-map> element. In order to preserve the responsive behavior of the map, we do not recommend specifying the width of the map, but you can specify a custom height value. 

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 below:  

<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>