Customizing an Image Layout Visualization

You can add an Image Layout visualization to a Visual Insight quick dashboard, to display an image overlaid with colored areas or bubble markers. For example, you can display a map of the United States, with a bubble marker displayed over each state. You can have states with a high number of stores displayed using large bubble markers, and states with a low number of stores displayed using small bubble markers.

A shape file is an HTML file that contains the visualization's background image, as well as the location of each area or bubble marker you want to display on top of the image. XBRi provides several default shape files for you to choose from, including a map of countries of the world and a map of states in the United States. You can define your own shape file for use in the visualization, as described in the steps below.

Customizing the Image Layout visualization involves modifying configuration files that are provided with XBRi. Subsequent upgrades can overwrite these files. To minimize the impact of upgrades and avoid losing your customizations, create duplicates of your shape files to make sure you have access to them even if the copy provided as part of XBRi is overwritten. In addition, keep a copy of the ShapeFileMap.xml file in case you make an error in modifying the file.

Prerequisite

To define a shape file for use in an Image Layout visualization, you must first create an HTML file that contains the background image to display in the map and a list of the coordinates of each area or bubble marker you want to display in the visualization. This procedure assumes that you have already created this HTML file using an image map tool.

 

To define a shape file for an Image Layout visualization:

  1. Open your HTML file in a text editor, then modify it according to the following steps:

    1. If you want to include a background image in the visualization, the shape file should include an <IMG/> tag, which specifies the name of the background image. To specify an empty background image, the SRC parameter of the <IMG/> tag should be empty. For example, <IMG SRC="" USEMAP="#regionHome1" WIDTH="401" HEIGHT="235" BORDER="0"/> specifies an empty background image. An <IMG/> tag that includes a background image is shown in the example below.

    2. Each area or bubble marker you want to display in the visualization should be defined in a separate <AREA/> tag. This tag should be formatted as <AREA SHAPE="SHAPETYPE" ALT="AREANAME" COORDS="COORDINATES">, where:

      • SHAPETYPE determines whether areas or bubble markers will be displayed in the visualization. Replace SHAPETYPE with one of the following:

        • To display areas in the visualization, replace SHAPETYPE with POLY.

        • To display bubble markers in the visualization, replace SHAPETYPE with TRIANGLE.

      • AREANAME is the name of the area or bubble marker.

      • COORDINATES consists of a single pair of coordinates that define where to display the bubble marker, or a list of comma-separated coordinates that define the boundaries of the area.

  2. Save your changes. An example of a shape file for displaying areas in an Image Layout visualization is displayed below.

  3. For widgets that will be available for exporting as MHT files from XBRi, copy the shape file you just created into VisFramework\map in the Common Files folder.

  4. Copy the shape file to VisFramework\map in the XBRi folder.

  5. If the Image Layout visualization will be displayed on the iPad, copy the shape file to VisFramework\map in the Mobile folder.

  6. Add the shape file to ShapeFileMap.xml. T

  7. Add the following entry to the xml file:

    <ShapeFileMap shapeKey="SHAPEKEYID" shapeType="SHAPETYPE" role="GEOROLE" name="SHAPEFILENAME" descWeb="WEBDESCRIPTION" descFlash="FLASHDESCRIPTION" descDesktop="DESKTOPDESCRIPTION" shapeFile="FILELOCATION"/>.

  8. Replace SHAPEKEYID with the unique shape key identifier to use to identify the shape file. You can determine which shape file the application displays in the visualization by default by associating the attribute used to display the visualization with a shape key, as described in Creating an Image Layout visualization.

  9. Replace SHAPETYPE with one of the following:

  10. Replace GEOROLE with the geo role you want to assign to the shape file. You can have the application automatically display the first shape file in ShapeFileMap.xml that has a specific geo role when the visualization is run. To do this, you must associate a geo role with the attribute used to show the visualization, as described in Creating an Image Layout visualization. Other shape files with the same geo role will be displayed as options in the visualization. The options are:

  11. Replace SHAPEFILENAME with the default name of the shape file. You can select this name from the Shape File drop-down list to specify the shape file to display in the Image Layout visualization, as described in Formatting an Image Layout visualization.

  12. You can customize the name used to represent the shape file in the Shape File drop-down list, displaying a different name depending on whether a user is selecting the shape file for an Image Layout widget, an Image Layout visualization, and so on. For example, you can display the name of the shape file as Northeast Map to users selecting options for an Image Layout visualization in the application, or Northeast Region Map for users selecting options in Desktop. Perform the appropriate steps below:

  13. Replace FILELOCATION with the physical location of the shape file. Each shape file you define must have its own unique folder location.

  14. Save your changes to ShapeFileMap.xml.

  15. For widgets that will be available for exporting as MHT files from the application, copy your ShapeFileMap.xml file back into VisFramework\map in the Common Files folder.

  16. Copy ShapeFileMap.xml to VisFramework\map in the application folder.

  17. If the Image Layout visualization will be displayed on the iPad, copy ShapeFileMap.xml to VisFramework\map in the Mobile folder.

  18. The Web Server must be restarted in order for your changes to be applied to the visualization. If your changes do not appear, be sure to clear your web browser's cache.

Related topics

Creating an Image Layout visualization

Formatting an Image Layout visualization

 

 

_____________________________