Profile picture for user YvonneH

 

Hello community,

Up from MashZone version 2.0, you can use user-designed vector maps in addition to the supplied maps and display any kind of shape with them.

To do so, create a definition file in xml format and deposit it in the subfolder “maps” of the MashZone installation.

In addition to the <descriptions> block, the definition file also consists of any number of  <poligonitem> elements.

Every <polygonitem> element is drawn as its own polygon in the vector map component. A <polygonItem> always consists of a <polygonName> and a <path> element.

With the <polygonName> element a link between a feed line and the respective polygon is created in MashZone. With this <polygonName> element you can address the polygon directly and with the feed line you can link it to the data.

With the <path> element the actual polygon can be specified.

I would like to show you one example of this great new functionality – namely, the random shapes from the feature overview:

 

 

Using the program Inkscape that can be downloaded for free on http://www.inkscape.org/index.php?lang=en I designed my own map.

For this purpose, I set up an empty map definition file with four <polygonitem> elements in the editor.

Initially, the content of the <path> elements remains empty.



<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE polygons SYSTEM "polygons.dtd">

<polygons xmlns:svg="http://www.w3.org/2000/svg">

            <descriptions>

                        <description language="en" name="Shapes" />

                        <description language="de" name="Formen" />

            </descriptions>

            <polygonItem>

                        <polygonName>polygon1</polygonName>

                        <path></path>

            </polygonItem>

            <polygonItem>

                        <polygonName>polygon2</polygonName>

                        <polygonName>polygon3</polygonName>

                        <path></path>

            </polygonItem>

            <polygonItem>

                        <polygonName>polygon4</polygonName>

                        <path></path>

<path></path>

            </polygonItem>

 </polygons>

Now start Inkscape. Make sure that the checkbox “Allow relative coordinates” under “Inkscape Preferences” – “SVG Output” is deactivated. Otherwise, Inkscape will create SVG paths, which MashZone can't display correctly.

 

To ensure optimum line thickness, we recommend that you adjust the size of the graphic to an A4 format.

 

 

The first shape can now be placed – in my case a star. To do so, choose the star in the toolbar on the left side and draw it on the work space. In my model, l I also drew three other shapes.

 

 

Then I copied all of the objects of the graphic with STRG A and converted the drawn objects into complete SVG paths.

To ensure that the coordinates of the polygons start at about 0,0, the whole graphic must be moved to the upper left corner of the work space.

To do so, mark all of the elements (STRG A) and then group them with “Object – Group”.

Now the whole graphic can be moved and modified in size. Make sure that the graphic remains within the work space (all coordinates are positive). Otherwise, the map will not be displayed correctly in MashZone.

After moving the graphic and adjusting its size, reverse the grouping with “Object – Ungroup”.

You can simplify the generated SVG paths with “Path – simplify”.

Now save the graphic with "File – Save As". Select “Plain SVG” as the file type (NOT Inkscape SVG).

Now, you can transfer the created SVG paths to the XML definition file. To do so, display the XML editor with “Edit – XML Editor”.

 

 

 

Then you can select the respective objects in the graphic and copy the content of the attribute “d” from the XML Editor to the XML definition file as content of the <path> element (text marked red).

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE polygons SYSTEM "polygons.dtd">

<polygons xmlns:svg="http://www.w3.org/2000/svg">

            <descriptions>

                        <description language="en" name="Shapes" />

                        <description language="de" name="Formen" />

            </descriptions>

<polygonItem>

                        <polygonName>Star</polygonName>

            <path>M 133.14285,148.07647 C 116.65869,140.82672 100.17452,133.57698 83.690351,126.32723 67.949311,135.07403 52.208277,143.82082 36.46724,152.56761 38.26827,134.64994 40.069299,116.73227 41.870329,98.8146 28.687387,86.54689 15.504444,74.279182 2.321502,62.011474 19.918768,58.18749 37.516034,54.363507 55.113299,50.539523 62.70683,34.21087 70.300361,17.882216 77.893891,1.553563 86.968571,17.107881 96.04325,32.662199 105.11793,48.216518 122.99393,50.392563 140.86993,52.568608 158.74593,54.744653 146.75713,68.181734 134.76832,81.618815 122.77951,95.0559 126.23396,112.72942 129.68841,130.40295 133.14285,148.07647 z</path>

            </polygonItem>

<polygonItem>

                        <polygonName>Circle</polygonName>

            <path>M 401.32623,90.12841 C 399.26276,125.69885 365.38375,158.88501 328.67781,151.43987 286.31804,143.91127 265.07048,91.9803 281.27031,54.257763 292.25832,22.102119 331.87962,1.871188 363.29169,17.85214 388.52086,29.612928 402.95533,58.070913 401.65869,85.305597</path>

            </polygonItem>

<polygonItem>

                        <polygonName>Spiral</polygonName>

                        <path>M 77.428571,329.50505 C 75.513142,346.47935 54.796954,319.26447 71.94437,313.5723 88.63337,302.89306 107.90961,323.06648 102.32241,340.09057 96.8098,364.9168 60.40335,369.12565 46.476006,349.2103 28.040044,327.45473 41.953776,290.81313 69.433557,284.98403 99.54229,275.36923 131.07107,302.10061 130.56893,332.6189 132.62914,366.65723 98.24944,394.37488 65.410567,389.1702 27.009533,385.67772 1.694833,342.5662 12.815954,306.66889 23.488557,263.62406 78.017231,242.79329 116.07732,263.57918 156.11397,283.04208 170.12466,337.70744 147.42859,375.21929</path>

            </polygonItem>

<polygonItem>

                        <polygonName>Rectangle</polygonName>

                        <path>M 268.85712,263.79077 C 317.42854,263.79077 365.99997,263.79077 414.5714,263.79077 414.5714,303.79077 414.5714,343.79077 414.5714,383.79077 365.99997,383.79077 317.42854,383.79077 268.85712,383.79077 268.85712,343.79077 268.85712,303.79077 268.85712,263.79077 z</path>

            </polygonItem></polygons>

Afterwards I saved the map in the directory [MashZone installation directory]\maps.

Now you can select your own vector map in the Mashup.

 

After doing this, I created a separate data feed for the map.

 

 

After creating the data feed, I linked the columns with the vector components and entered threshold values.

 

 

Last but not least, I integrated a spin box with the names of the shapes and filtered the vector map with this spin box to address the shapes directly.

 

 

Now the vector map is finished.

 

Attention:

If you export the Mashup, user-defined maps will NOT be exported!

 

Have fun creating your own user-defined maps!

Note: See this post for a list of other articles about MashZone 2.0. You might be also interested to join the ARIS MashZone group at ARIS Community.

by Stephan Freudl
Posted on Wed, 09/15/2010 - 17:34

This way MashZone became really flexible. And you can even reuse your very own map-images within MashZone -- read more...

0

Featured achievement

Rookie
Say hello to the ARIS Community! Personalize your community experience by following forums or tags, liking a post or uploading a profile picture.
Recent Unlocks

Leaderboard

|
icon-arrow-down icon-arrow-cerulean-left icon-arrow-cerulean-right icon-arrow-down icon-arrow-left icon-arrow-right icon-arrow icon-back icon-close icon-comments icon-correct-answer icon-tick icon-download icon-facebook icon-flag icon-google-plus icon-hamburger icon-in icon-info icon-instagram icon-login-true icon-login icon-mail-notification icon-mail icon-mortarboard icon-newsletter icon-notification icon-pinterest icon-plus icon-rss icon-search icon-share icon-shield icon-snapchat icon-star icon-tutorials icon-twitter icon-universities icon-videos icon-views icon-whatsapp icon-xing icon-youtube icon-jobs icon-heart icon-heart2 aris-express bpm-glossary help-intro help-design Process_Mining_Icon help-publishing help-administration help-dashboarding help-archive help-risk icon-knowledge icon-question icon-events icon-message icon-more icon-pencil forum-icon icon-lock