Creating an SVG for the Custom Map Chart

Owned by Tiago Correia (Unlicensed)
Last updated: Nov 02, 2021 by Karen Hogan (Unlicensed)
5 min read

The Panintelligence Custom Map Chart works by loading an SVG image as a chart. This SVG image must obey some rules:

  • The image must be an SVG

  • The SVG must contain some vector shapes

  • The image must contain a way to identify the shapes that relate to the data (usually the id)

Getting an SVG Image to use

Using an existing SVG

You can find many freely available SVG images on the internet. As an example I’ve searched for “World Map” and found this map on mapsvg.com:

This image already defines all the shapes, and each shape does have a property we can identify it with. We can see that id is unique. Take a look at the snippet below for Austria:

<path xmlns="http://www.w3.org/2000/svg" d="M1070.6 190.8l-0.3 0.8 0.7 2.1-0.2 2.6-2.8 0 1.1 1.4-1.3 4-0.9 1.1-4.4 0.1-2.4 1.5-4.2-0.5-7.3-1.7-1.3-2.1-4.9 1.1-0.5 1.2-3.1-0.9-2.6-0.2-2.3-1.2 0.7-1.5-0.2-1.1 1.4-0.3 2.7 1.7 0.6-1.7 4.4 0.3 3.5-1.1 2.4 0.2 1.7 1.3 0.4-1.1-1-4.1 1.7-0.8 1.6-2.9 3.8 2.1 2.6-2.6 1.7-0.5 4 1.9 2.3-0.3 2.4 1.2z" id="AT" name="Austria"> </path>

Assuming the data contains these IDs, or can be transformed into such a shape, this SVG is now ready to be used with the dashboard.

Creating your own Custom SVG

Being able to load any SVG means you can create your own designs for the Custom Map Chart.

In this example, I’m going to create a layout of our Panintelligence office using a free vector image editing program called Inkscape.

Preparing the document

By default it starts with an A4 sheet of paper, but since this will be purely digital, I’ll change all my measurements to Pixels, ensure the scale is set to 1 and I’ll make it landscape.

To do this I went to File> Document Properties:

And then made the highlighted changes:

Drawing your image

Now, I can start drawing some shapes, starting with the edges of the office. Using the Rectangle shape tool, I’m going to draw two squares, one for the upstairs section and another for the downstairs section:

Next I’ll make some desks, some rectangular, others a bit more complex by making a path:

Now place these tables around the office and remember to block some areas for the kitchen, hall and meeting rooms. I also made a little house to represent those who are working from home:

Each one of the shapes I want to be mapped to the data should have an ID.

To do that, I’m selecting each shape with the Selection Tool, and then changing its ID onto the Object Properties window (if you don’t see it, click Object → Object Properties on the menu options along the top):

Remember to press the Enter key after typing the new ID for the shape, or Inkscape won’t save it. Additionally, each ID must be unique and Inkscape will let you know if you’ve entered a duplicate.

When all the shapes have an ID, the SVG is now ready to be used in the dashboard.

Finally, all shapes should be converted to paths. Select all the shapes by clicking the selection tool, then click and dragging across all the shapes:

With all shapes now selected, got to Path → Object to Path:

Using the image in the dashboard

In the dashboard, when creating a new chart, select the Custom Map chart:

Using an external URL

The dashboard can load SVGs via an external URL:

Using a local URL

The dashboard automatically looks for SVGs in the following path:

your-dashboard-installation/tomcat/webapps/panMISDashboardResources/svg/

If an image is added to this location, the dashboard can automatically pick it up when you type the file name:

Using the new Custom Map

Now I can add the new Custom Map Chart to a dashboard.

In this example, I’ve made the Custom Map a Parent Chart so that I can control the rest of the charts in this category by clicking on the shapes. Below I’ve clicked on Desk22 and I can see that Myles is sitting there: