How to build a Map component (+videos)

The Map component is used to display regional information on maps. This article describes how to build a map component using the standard maps provided by Klipfolio. You can also create custom maps. For details, see How to create custom maps.

The following videos describe working with Regional IDs and Map Markers.

How to use the map component with Regional IDs.

How to use the map component with Map Markers.

This article includes the following sections:

Component Structure

The following image shows the Map component structure, with both Region Hyperlinks and Marker Hyperlinks enabled:

Map configuration options

Here are some of the options you can configure when building maps:

  • Colour-code regions according to assigned values.
  • Display values and descriptions as tooltips.
  • Direct users to specified URLs using region hyperlinks.
  • Add Map markers to identify specific locations by latitude and longitude. See which maps support Map Markers in the section below.

Map building

Klipfolio provides regional maps, each associated with a unique set of Region IDs that identify the regions on their corresponding map. Before building your map, go to this Knowledge Base article to locate the download links for our region ID files and to learn how to create a data source using these files.

To build a map component:

  1. Drag and drop the Map component into the Klip Editor building space.
  2. Open the Properties tab.
  3. Choose a region from the Map drop-down menu.

  1. Add the corresponding Region ID file data source (Region IDs for the Map Component) to assign to your map. The maps are designed to work with the region IDs listed in these files so it is necessary to reference this data source to correlate your data with the regions on the map.
  2. Enable Map options as required:
  • Select Size of map to display.
  • Selecting Show zoom controls enables the user to zoom in and out when viewing the map.
  • Set the Focus of the map according to region or X and Y coordinates.
  1. Add the formulas to the Regions' subcomponents. When building a map, you must ensure the data in every Region subcomponent is aligned. Using the World by Region map as an example, if the order of the ID subcomponent is APAC, EMEA, and AMER, then the data in the Color, Description and Link subcomponents must follow the same order.
  • ID - List the IDs used by the map: select the IDs from the Region IDs file (typically column A) and SLICE off the header: SLICE( A:A )
  • Color - The map will be shaded from light to dark according to the numeric values assigned to each region and the values will be displayed as tooltips when the cursor is hovered over the map. To align these values with their corresponding region, use the LOOKUP function, for example:
    LOOKUP( ID, GROUP(Country), COUNTDISTINCT(Country) )
    where ID is a REFerence to the ID subcomponent and Country is selected from your data. Note that the second and third LOOKUP parameters must be the same size. The GROUP and COUNTDISTINCT functions all return data in the same order which results in data alignment.
  1. In the Properties panel, set the options to Show values in tooltips and Colorize as required.
  • Description - If required, add per-region descriptions which will display as tooltips. As with the Color subcomponent, the values in the Descriptions subcomponent must be in the same order as the region IDs listed in the ID subcomponent. Under the Properties tab, set the option to show values in tooltips as required.
  • Link - If required, add per-region links. To enable this option, select the Regions subcomponent, go to the Properties tab and select Enable region hyperlinks. As with the Color subcomponent, the hyperlinks must be in the same order as the region IDs in the ID subcomponent. Under the Properties tab, select Open link in current tab/page/window if required.

Specifying position with Map Markers

Map Markers allow you to specify positions on your map by latitude and longitude and are supported on the following standard maps:

  • World
  • Europe
  • Africa
  • Canada
  • Germany
  • India
  • USA

To use Map Markers:

  1. Select Markers from the component tree and go to the Properties tab. If required, select Enable marker hyperlinks. As with the Region subcomponent, you must ensure the data in every Markers subcomponent is aligned.
  2. Set subcomponents as required:
  • Latitude and Longitude - Require values with decimal degrees. Depending on the co-ordinates, these may be negative values. For example, Ottawa’s latitude and longitude are 45.4111700 and -75.6981200.
  • Name - A name for the location on the map.
  • Color -  A range, specified according to the numeric values assigned to each marker. These values will display as tooltips when you hover over the marker. To align these values with the corresponding region, use the LOOKUP function:
    LOOKUP( ID, GROUP(country), COUNTDISTINCT(country) )
    where ID is a REFerence to the ID subcomponent. Note that the second and third parameters must be the same size. The GROUP and COUNTDISTINCT (and GROUPBY) functions all return data in the same order, which results in data alignment.
  • Size - Like the Color subcomponent, you can specify a size range for a particular marker.
  • Description - If required, add descriptions for the marker, which will display as tooltips. As with the Color subcomponent, the values in the Descriptions subcomponent must be in the same order as the region IDs listed in the ID subcomponent.
  • Link - If required, add marker links. To enable this option, select the Marker subcomponent, go to the Properties tab, and select Enable marker hyperlinks. As with the Color subcomponent, the hyperlinks must be in the same order as the region IDs in the ID subcomponent. Under the Properties tab, select Open link in current tab/page/window if required.

Learn more