How to create custom maps

Your custom map must be in SVG format and must meet Klipfolio-specific requirements.

Prerequisites

Use a web-browser supported by Klipfolio. For more information on supported web-browsers, see Browser compatibility. If you are using Internet Explorer as your web-browser, you must use version 9 or higher.

What you'll need

  • Drawing tool, like Adobe Illustrator, that can output SVG files.
  • Text or code editor.
  • Basic understanding of XML.
  • Sample SVG file.

Preparing your Custom Map SVG

The following assumes that your are using Adobe Illustrator to prepare your map.

  • 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.
  • Markers are not supported in custom maps.
  • Klipfolio will resize the artboard to be as large as possible such that both its height and width are visible in the map component. Any paths that fall outside the artboard will be rendered as overflow where space in the map component exists.
  • Save your file in SVG 1.1 format and upload it upload it in the Klip Editor of the Map component.

Setting up your custom map

  • In the Klip Editor, at the Component Tree, select Map.
  • Navigate to the Properties panel.
  • At Map, select Custom from the drop-down menu.
  • At Custom Map, click the Select Map File button.
  • Upload your SVG file.

Learn more:

Now that you know more about building custom maps, check out the following tutorials:

Important concepts

These articles provide an overview of important concepts for building Klips: