Creating Custom Map chart from Images

We can create custom maps as per our business need and plot data using Vitara Maps .It can be any Geographical map plotting geo location or any map of Shopping center showing different segments of goods location like kids section, menswear, grocery etc.

The following are the steps to create a custom map.

1.Create SVG (Scalable Vector Graphics) file for map structure (Shopping center, Football Stadium, etc.)

2.Convert the generated SVG file into .json file.

3.Configure the VitaraMaps folder with all the needed files for map creation.

To explain all this process we use the example of a football stadium. We want the Vitara map chart to show the availability of seats in different seating sections in a football stadium.

1. Steps to Create SVG file from an Image:

Step 1:

To create SVG file for custom map we need any SVG drawing tool, for example, Inkscape to draw different shapes of map and its free to download from https://inkscape.org/. Download and install Inkscape in you system. Inkscape is an open-source vector graphics editor similar to Adobe Illustrator, Corel Draw, Freehand, or Xara X. What sets Inkscape apart is its use of Scalable Vector Graphics (SVG), an open XML-based W3C standard, as the native format.

Step 2:

When you open it looks like below ,with a blank document open by default.

map image layout1

Step 3:

Inkscape editors provides ample full of toolset to create and design shapes. Following is the image (.png) of football stadium i will be using to draw shapes.

map image layout2

Step 4:

Open the image in inkscape, it will prompt you asking the image to be Embedded or Linked. Choose either of two (as we just need it as background to draw shapes,so doesn’t matter much)

map image layout3

Adjust the corners of image as per your convenience to make yourself comfortable to draw shapes.

Step 5:

From left toolbar select tool called “Draw bezier curves and straight lines (Shift+F6)”, and start drawing around different seating sections of stadium by clicking repeatedly around the perimeter (highlighted in red in image below).

map image layout4

map image layout5

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

Step 6:

In Order to distinguish this area with other lines ,in the lower left corner of Inkscape editor,you will find
“Fill: None “.Click the text None to bring up the Fill and Stroke dialog.

map image layout6

Select the solid fill button (highlighted in yellow) and pick a color.

map image layout7

Step 7:

Next, we have to give a name and identification for the drawing. In the Object menu, select Object Properties (Shift+Ctrl+O). Set an id and a label, then click the Set button, otherwise Inkscape won’t apply the information.

map image layout8

map image layout9

Step 8:

Similarly repeat the steps 5, 6 and 7 for creating shapes for all the sections needed. Here we have to consider the border between the two shapes to align, so that when we zoom in we don’t see borders lying close but not on top of each other. We ensure this by selecting the Snap to path button in the right toolbar.

Step 9:

Once done with drawing all the shapes save the file. Inkscape saves the file in .svg format by default.

map image layout10

2. Convert SVG file into JSON file

The next step is to convert the SVG file created into JSON file. For this purpose Vitara has a dedicated svg converter tool which can be accessed form the below URL.

https://cloud.vitara.co/maptools/svgconverter.html

upload SVG file and wait for the svg to populate, then click on “Download Definition” to download the json file which contains shape data required to plot the map using vitara maps chart.

Now, we are ready with our custom maps layer, we have to embedded it to Vitara maps visualization.

3. Configure VitaraMaps folder

Step 1:

1.Navigate to Vitara maps folder in your web server

(C:\Program Files (x86)\Common Files\MicroStrategy\Tomcat\apache-tomcat-8.0.30\webapps \MicroStrategy\plugins\VitaraMaps)

map svg to json1

Open folder by name ‘Custom’, all the required custom map configurations should be done here. The folders which we use in the process of defining custom images are highlighted in the screenshot below; ‘shapes’,and ‘mappingLayers’.

map svg to json2

Shape folder: It’s recomended to place all the custom shapes files (.json files) in this folder, (the underlying code looks for shape files in this folder to plot the chart).

mappingLayers.txt: We can create as many custom maps charts as per our needs and each custom map is represented as one mappingLayer, so this file contains all the information of custom map charts.

Step 2:

Copy the ‘stadium.json’ file (which was created using svg to json converter) into the shapes folder

C:\Program Files\MicroStrategy\MicroStrategyDesktop\code\plugins\VitaraMaps \custom\shapes

Step 3:

Open ‘mappingLayers.txt’ file with any text editor to define new stadium map layer. It will be in the custom folder.

*C:\Program Files\MicroStrategy\MicroStrategyDesktop\code\plugins\VitaraMaps\custom*

Here we have to provide details of the new mapping layer. We have to add details for name, type, dictionarykey and shape parameters as shown below.

s.name = Stadium
(you can also use st.name= SR Stadium or any other name )

s.type = svgmap
(as we are using svg shapes, so set s.type =svgmap )

s.dictionarykey = name
(since all the shape of segments are uniquely identified by ‘name’ key )

s.shape = custom/shapes/stadium.json
(here we are providing the path to access different shapes of mapping layer to look for )

Step 5:

We have provided all the parameters,

s.name = Stadium

s.type = svgmap

s.dictionarykey = name

s.shape = custom/shapes/stadium.json

, save the mappingLayers.txt file. All the above details are required for Vitara maps to show our new stadium map layer. Finally all put together the ‘mappingLayer.txt’ file should look like

map configure maps folder 1

Step 6:

Launch Microstrategy desktop/web. By default the map visualization shows World map. Add the data set to your dashboard.

map configure maps folder 2

Hover the cursor on the visualization to get ‘Edit’ button. Click on ‘Edit’ and expand ‘Map’ option click on ‘Map layer’ dropdown and select ‘Stadium’ map layer.

map configure maps folder 3

If everything goes right the result would be like this.

map configure maps folder 4