Creating Custom Map chart from Images

The Vitara Map tool is used to generate custom layouts. This tool functions similarly to all other SVG drawing tools.

The benefit of using this tool is that you can now complete the process of creating and configuring a custom Vitara map in this single tool. That means you’ll be creating a shape file, configuring groups, and configuring all related mappings at the same time.It could be any geographical map that plots a location or a map of a shopping mall that shows different sectors of items such as children’s clothing, menswear, groceries, and so on.

We’ll use a football stadium as an example. In a football stadium, we want the Vitara map chart to show the availability of seats in various seating areas.

Assuming the data is already available, we’ll label the layouts using the dataset’s attribute. For example, we used sections as the attribute, and metrics as the availability % of seats you want to show.

Check the following dataset for an example of how we prepared it in the above-mentioned manner:


1. Steps to Create SVG file from an Image:

Step 1:

To create SVG file for custom map we need any SVG drawing tool. Below is the URL of the page where the layout creation tool is available. Open this URL in your browser.

Vitara Map Tool

Step 2:

When the tool is first opened, it looks like this.


Step 3:

If you want your own custom image to use Vitara map chart, upload the custom image to the layout creation tool. Go to File menu and select Import Image option to upload custom image. We’ll use a football stadium as an example. In a football stadium, we want the Vitara map chart to show the availability of seats in various seating areas.



Step 4:

After the image has been uploaded, start drawing shapes/partitions on the image using the path tool.


Nodes can be removed and added if you make any mistakes.

Step 5:

Once you start drawing a shape/partition at the end of the shape you link to the starting point, then the entire shape will be highlighted and in the right side panel you can see the the text input box. Enter the name of the shape you just drawn in this box.


For example, Section 219 is the name we gave to the layout based on an attribute we already had in the dataset.

Step 6:

In Order to distinguish the above drawn area with other lines, in the lower left corner of editor, you will find
‘Color Bar’(Click the text None to bring up the Fill and Stroke dialog). Choose a colour that appeals to you.

map image layout11

Step 7:

Similarly repeat the steps 5, 6 and 7 for creating shapes for all the sections needed. The boundary between the two shapes must align in this case, so that when we zoom in, we don’t see borders that are close but not on top of each other. Selecting the Snap to path button in the right toolbar ensures this.

Step 8:

After we label all the layers we need to name the background image in order to Export it(background image label can be anything irrespective to the image) , download the layout using the Export option.


Give a name to your layout. The file will be downloaded as a zip file.


2. Configure VitaraMaps folder

Step 1:

Finally, upload the exported zip file to the VitaraMaps chart deployment in your MicroStrategy server. For example, below is the MicroStrategy web application path where you have to copy the zip file.


If you’re using library and mobile apps as well, then you’ll need to copy into the library and mobile deployment directories as well.


After copying at the above location, unzip it.

The custom map, for example Stadium, will then appear in the ‘Map’ tab of the property editor. Take a look at the image below for an example.


Step 2:

Launch Microstrategy web. Create Vitara map visualization in a dossier or document. The Vitara map visualisation defaults to a world map.

map configure maps folder 2

Drag the ‘Section’ in map attribute and ‘Availability %’ in Color by to include the dataset you mentioned in the start.

The ‘Edit’ button appears when the cursor is hovered over the visualization. Open the Vitara map chart’s property editor by clicking on ‘Edit’ button. In the properties window select the ‘Map’ menu. In the ‘Map Layer’ drop down list box select the map layer you just created.

If all goes according to plan, the end outcome will look like this.

map configure maps folder 4

Integration of Background

From version, we added a new feature that allows us to integrate background images. To make this point more apparent, we’ve used the example of the “Stadium” once more , the above mentioned steps are same to create custom map chart from images.

When a picture is uploaded and specific shapes are drawn in the new layout creation tool ( Vitara Map Tool ), the complete image can be seen in the Vitara map chart. Earlier, you could only see the shapes you had drawn on the picture. But now , from version background image can be integrated.


Color Picker with Opacity

From version , we have the option to adjust the slider to change the opacity of the desired class.


Edit Custom SVG Map

Once you’ve generated a Custom SVG map layout and need to make changes to it, follow the steps below:

  1. An SVG image will be included in every exported Custom SVG map zip file. Use the Vitara Map Tool to open it in the manner outlined below.


  1. Make the necessary adjustments to the SVG layout and re-export the zip file.
  2. Upload the zip file to the server and extract it to the MicroStrategy/plugins/VitaraMaps/custom/svgmaps/ folder. The new map will appear in the Property editor, which you may use to see the changes.