How to build a Map component (+videos)

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.

Watch the following videos on 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. 

 

  • 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:
    • World
    • Europe
    • Africa
    • Canada
    • Germany
    • India
    • USA

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 at Region IDs for the Map Component.

To build a map component

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

  1. Choose a region from the Map drop-down menu.
  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:

  • 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 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 - 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 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. Under the Properties tab, select Open link in current tab/page/window if required.

Custom Maps

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

For more information on building map components