How can we help?

How to create custom maps

If we don't have a standard map that suits your needs, check out our list of custom maps created for you. If we still don't have what you're looking for, you can create a custom map from scratch.

Note: Map Markers are not supported in custom maps.

This article includes the following sections:

Building maps with Klipfolio's custom map files

Before building a custom map from scratch, check to see if we've already got things started for you! We have several custom map options to choose from, as below. Each of our custom maps includes a map image file and a region ID file. When building a Klip, you add these in addition to the data source that includes your raw data:

To build a map using Klipfolio's custom map files:

  1. Right-click the file link from the list above and select Save Link As to save the files onto your local drive. Do this for both the Image file and the Region ID file.
  2. Create a data source using the relevant Region ID file you just copied to your local drive. To do this, in the side navigation bar, click Data Sources > Create a New Data Source > File Upload. Choose your Region ID file > Click Submit > Click Continue > Name and Save your data source.

The details page for the data source you just created opens.

  1. Click New Klip.

Creating your Klip from the Region ID data source details page automatically associates the data source to your Klip.

  1. In the Klip Editor, drag and drop the Map component on to the palette.
  2. Open the Properties panel.
  3. At Map, select Custom from the drop-down menu.
  4. At Custom Map, click the Select Map File button.
  5. To upload your map image file, click Upload File, locate your .svg file, and click Finished.
  6. In the left navigation tree, under Regions, click ID, to display your Region ID data source.
  7. Add the data source that contains your raw data and you’re ready to configure your custom map!

Go here to see map configuration options. Note that Zoom controls are not supported in custom maps.

Building a custom map from scratch

Before building a custom map from scratch, ensure:

  • The custom map file you want to use is in .svg format.
  • You are using a supported web-browser. For details, see our System Requirements.

What you'll need:

  • A drawing tool, such as Adobe Illustrator, that can output .svg files.

Tip: We’ve successfully used Inkscape - a free license vector-based program. It’s a good option if you don’t have access to Adobe Illustrator.

  • A text or code editor.
  • A basic understanding of XML.

Preparing your custom map .svg file

The following notes assume you are using Adobe Illustrator to prepare your map:

  • Here is an example code snippet that shows the proper syntax for the start of a region path: "<path id="region:latam:Latin_America" d=...."
  • All paths must be compound paths, and not in groups (""). Polygons are not supported. For example, you might have to change <rect> polygon to <path>. Right-click on each object in Illustrator and pick Make Compound Path.
  • Assign IDs and names to your paths by naming objects in the layers palette. The format is: "region:id:name". For example, for a Latin America region, the name of the path would be "region:latam:Latin_America".
  • Colours, stroke, and other path decorations are not supported. For consistency, Klipfolio will assign regions a theme-specific colour and stroke weight.
  • Save your file in .svg 1.1 format. This sample .svg file can be helpful when troubleshooting formatting issues.

Setting up your custom map

Before setting up your custom map, create a data source that includes the information with which you want to populate your map.

Note: Your data source must include region names or region IDs. For example, if you include region names, and you’re accessing Google Analytics geography data, inserting the "region" dimension in your data source will return data that aligns your region names with Klipfolio’s region id files.

To build your custom map:

  1. In the Klip Editor, drag and drop the Map component on to the palette.
  2. Open the Properties panel.
  3. At Map, select Custom from the drop-down menu.
  4. At Custom Map, click the Select Map File button.
  5. To upload your map image file, click Upload File, locate your .svg file, and click Finished.
  6. Add your prepared data source.

You are ready to configure your custom map!

Go here to see map configuration options. (Note that Zoom controls are not supported in custom maps.)

Learn more

 
Updated
Have more questions? Submit a request