How to build a Map component

The Map component is used to display regional information on one of ten standard maps provided by Klipfolio or on a custom map uploaded to Klipfolio.

  • Regions are color-coded according to assigned values.
  • Values and descriptions appear as tooltips on your dashboard.
  • Region hyperlinks direct a user to specified URLs.
  • Map markers identify specific locations by latitude and longitude and are supported on the following standard maps:
    • Canada
    • Europe
    • Germany
    • India
    • USA
    • World

Component Structure

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

Standard Maps

Klipfolio provides ten regional maps, each associated with a unique set of Region IDs that identify the regions on their corresponding map. Each map's Region IDs can be downloaded as a CSV file from Klipfolio's Knowledge Base. To get your Region ID's, see Region IDs for the Map Component.

To build a map component

Select Map from the component tree and go to the Properties tab.

  1. Select the Map: drop-down menu and choose a region.
  2. Add the corresponding Region IDs file data source (see Standard Maps above) 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.

  1. Enable Map options as required:
    • Select Size of map to display
    • Zoom controls allow 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
  2. Add the formulas to the Region 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.
  3. In the Properties panel, set the options to show values in tooltips and colorize as required.
    • Description - If required, add per-region descriptions which are displayed as tooltips. As with the Color subcomponent, the values in the Descriptions subcomponent must be in the same order 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.

Map Markers

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

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

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 - To apply, click on Latitude or Longitude and then select Insert Literal String from the Formula Bar. Note: You must use values with decimal degrees and depending on the co-ordinates, these may be negative values. For example, Ottawa’s latitude and longitude are 45.4111700 and -75.6981200.
    • Name - To apply, click on Name and then select Insert Literal String from the Formula Bar to enter a name for the location you entered on the map.
    • Color - This is a range specified according to the numeric values assigned to each marker and the 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 are displayed as tooltips. As with the Color subcomponent, the values in the Descriptions subcomponent must be in the same order 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. To specify that the link should open in a new browser tab, click Link properties and select Open new tab.

Custom Maps

You can upload a custom map contained in an SVG file. For details, see How to create custom maps.

For more information on building map components

Feedback and Knowledge Base