---

Creating Custom Map chart from Images

Custom layouts are created using the Vitara Map tool. This tool works in the same way as the other SVG drawing tools.

The advantage of using this tool is that it now allows you to complete the process of designing and setting a custom Vitara map in a single tool. That is, you will be creating a shape file, setting groups, and configuring all related mappings all at once.It could be any geographical map that depicts a location, or it could be a map of a shopping mall that depicts several product sectors such as children’s apparel, menswear, groceries, and so on.

As an example, consider a football stadium. We want the Vitara map chart in a football stadium to reflect the availability of seats in various seating zones.

Assuming the data is already available, we’ll use the dataset’s attribute to label the layouts. For example, we used sections as attributes and metrics as the percentage of available seats.

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

1. Steps to Create SVG file from an Image:

Step 1:

Any SVG drawing tool is necessary to create an SVG file for a custom map. The page’s URL, where the layout creation tool may be found, is listed below. Open your browser and enter this URL.

Vitara Map Tool

Step 2:

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

Step 3:

Upload your own original image to the layout design tool if you want to use the Vitara map chart with your own custom image. To upload a custom image, go to the File menu and click Import Image. As an example, consider a football stadium. We want the Vitara map chart in a football stadium to reflect the availability of seats in various seating zones.

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:

When you begin sketching a shape/partition, at the end of the shape you link to the starting point, the entire shape is highlighted, and the text input box is visible in the right side panel. In this box, type the name of the form you just drew.

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

Step 6:

To distinguish the above-drawn area from other lines, locate the ‘Color Bar’ in the lower left corner of the editor (click the text None to bring up the Fill and Stroke dialogue). Choose a color that you like.

Step 7:

Repeat steps 5, 6, and 7 to create forms for all of the portions required. In this situation, the boundaries of the two shapes must line so that when we zoom in, we don’t see borders that are close but not on top of each other. This is ensured by selecting the Snap to path button in the right toolbar.

Step 8:

After we have labelled all of the layers, we must name the background picture in order to export it (the background image label can be anything irrespective of the image), and then 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 your MicroStrategy server’s Vitara Maps chart deployment. For example, the MicroStrategy web application path where you must copy the zip file is shown below.

      webapps/MicroStrategy/plugins/VitaraMaps/custom/svgmaps/

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.

      webapps/MicroStrategyLibrary/plugins/VitaraMapsLibrary/custom/svgmaps/
      webapps/MicroStrategyMobile/plugins/VitaraMapsMobile/custom/svgmaps/

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.

Drag the ‘Section’ attribute in map attribute and the ‘Availability%’ attribute in Colour by to include the dataset you mentioned at the beginning.

When the pointer is over the visualisation, the ‘Edit’ button appears. By pressing the ‘Edit’ button, you can access the Vitara map chart’s property editor. Select the ‘Map’ menu in the properties window. Select the map layer you just created from the ‘Map Layer’ drop down list box.

If everything goes as planned, the finished result will look like this.

Integration of Background

We implemented a new functionality that enables us to integrate background images starting with version 4.9.2.477. We’ve used the “Stadium” example once more to illustrate this point; the processes for creating a custom map chart from photos are the same as those previously.

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 4.9.2.477 background image can be integrated.

Color Picker with Opacity

From version 5.0.0.484 , 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. Re-export the zip file after making the necessary modifications to the SVG layout.
2. Extract the zip file to the MicroStrategy/plugins/VitaraMaps/custom/svgmaps/ folder after uploading it to the server. The Property editor will display the updated map so you can view the changes.