XCELSIUS FORMATTING TRICK6-Any Image to Map Type Component


Here I am trying to convert an image (any image as long as it has specific hot spots or regions which have been clearly divided into different parts) to a “map type” component. When I say a “map type” component I mean a clickable image that can generate results which are specific to the part of the image that is clicked. Some initial details of this were present on the SAP website, which are no longer available and I would also like to take it a step further in this post. Keep Reading...

By now you must have read about Flex 2.0.1 SDK and how it can be used to create custom Xcelsius components. Before I start explaining I must be absolutely clear that I am not going to use Flex for this component, I am using a series workarounds to get this done. I want to accomplish two things in this process:
1.         a)I want the Hot spots on the image to be clickable and I want to get relevant results on clicking the same.
2.         b) I want the Hot spot or that specific region to change when it is clicked. By change I mean a change in      color or being highlighted etc. This is a bit tricky but is achievable.
Dashboard: Click on the hot spots of the car below to get information relevant to that part.

These are the steps to be followed:
1.     1)First choose your image. If you are choosing a map or an image from the net I suggest you take an image that has its hotspots in different colors. So for example hot spots for a country may be the states, so for this I suggest you choose a map which already has a clear demarcation of the states in different colors or at least has borders to separate out the hot spots. The image I have used is the following.

2.          2)  Now use icons on these hot spots, Use one icon to cover most part of the hot spot, or on the part most likely to be clicked by the user.

 If you still have a lot of unsymmetrical space left on the hot spot then you can use more than one icon as shown below.

Here I have Spains map, see how three icons are required to cover the entire map

3.      3)Now once you are done with arranging the icons, each icon on each hot spot (or the set of icons on the same hot spot) should have an unique number as their both checked and unchecked value in source data as shown below. So here I have 7 hot spots (the two tiers are counted as one), to each of this set I will assign a unique value from 1 to 7. Below is the value shown for icon 4

4.     4)Then assign the same destination to all the icons. Here I have assigned A2 to all the icons. Once this is done make all the icons transparent.
5.     5)Go to the spread sheet and use a Vlookup in any one of the cells to get the names from a table (which you will have to create). Based on the cell A2 which is the destination of all the icons.For example I have used the following formula in the cell A3 “=VLOOKUP(A2,D1:E7,2,0)” and the table D1 to E7 looks like this. This will finish our first aim to make the image clickable

6.     6)Now we come to accomplishing the process in which we need to make the image “change” when it is clicked. This process might become a bit infeasible for some if the map has very unsymmetrical hot spots. I have seen many dashboards which just have clickable images which do not change on clicking, so the process described above should suffice to accomplish this requirement.
7.     7)But if you have relatively symmetrical hot spots then you can follow this procedure. You need to have the various hot spots cut into separate pictures. Of course my job was easy with the dashboard given above as it has simple square hot spots, but when you are dealing with state or country borders which are seldom straight lines, you either need cut the same or get images from the net which are already cut. To crop irregular portions of images you can use a free software called Paint net (download here).
8.     8)Once you have cropped the hot spot sections, Import them and place them exactly on the hot spots, as shown in the picture.

       then change the dynamic visibility according to the source data of the set of icons on the same hot spot. So for example if a hot spot has an icon on it which has source data as 4 then the cropped image placed over it will have its key as 4 and the status will be cell A2. For all the images just the key will change according to the source data of the corresponding Icon. (see picture below)

9.     Finally select all the icons using the objects browser and bring them to front. Then add other information that you would like to display using the vlookup or any other function and you are done.

  1. gravatar

    # by Anonymous - March 4, 2010 at 7:59 AM

    Thanx~. you are such a genius. I have learned many tip and tricks. Thank you for your explain. have a nice day

Blog Widget by LinkWithin

Search this blog..