MicroStrategy ONE

Customize the Image Layout Visualization

The Image Layout visualization is recommended for uses such as rendering the interior of a store or the layout of seats in a theater. The Image Layout visualization is provided out-of-the-box, but it is disabled by default. To customize it, you must first enable it. To enable it, you create a plug-in.

If you want to visualize data as regions on a geographic map, the recommended practice is to use the Map visualization and configure it to show areas. However, while it is not recommended to use the Image Layout visualization to display regions on a geographic map, there may be instances where you want to do this. For example, you may want to display custom regions on the map, instead of the regions that are provided out-of-the-box, or you may want to use different names for the regions. Once you have enabled it, you can use the Image Layout visualization to perform customizations such as these.

Enable the Image Layout Visualization

To enable the Image Layout visualization for use in a document or dashboard, create a plug-in. If you have the Web Customization Editor installed in Eclipse, see KB278784: How to Enable the Image Layout Visualization in MicroStrategy Web. Otherwise, follow the instructions below.

  1. Create a plug-in with the folder structure shown below. Give the plug-in a meaningful name, such as ImageLayoutPlugin. The instructions below assume that you are using this name for your plug-in.

    ImageLayoutPlugin

    WEB-INF

    xml

    config

  2. Create a file called visualizations.xml in the path shown below.

    3. ImageLayoutPlugin

    WEB-INF

    xml

    config

  3. Copy and paste the code shown below into visualizations.xml to ensure the visualization appears in your dashboard.

    4. Copy 
    <visualizations>
      <visualization-list name="ajax">
        <visualization desc="Image Layout" desc-id="mstrWeb.8976" id="ImageLayout" is-mojo="true" propsEditor="visPropsImageLayoutStyle" scope="19" style-name="ImageLayoutVisualizationStyle" includeMDProperties="1" widget-type="4"/>
      </visualization-list>
    </visualizations>

  4. Restart your Web server. When you choose Select a Visualization on a dashboard, the Image Layout visualization is available as one of the map visualization choices.  
  5. To enable the Image Layout visualization for use in MicroStrategy Library, copy the ImageLayoutPlugin folder you just created and put it in the plugins folder of your Library server. Restart the Library server.

  6. To enable the Image Layout visualization for use in MicroStrategy Workstation, copy the ImageLayoutPlugin folder you just created and put it in the plugins folder located at <Workstation Install Path>\Code\plugins. For example, C:\Program Files\MicroStrategy\Workstation\Code\plugins.

    In the xml directory, create a file named styleCatalog.xml. Copy and paste the code shown below into the file and save it. Restart Workstation.

    Copy 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <!DOCTYPE StyleCatalog SYSTEM "styleCatalog.dtd">
    <StyleCatalog version="2.0">
        <Styles>
        <Style name="ImageLayoutVisualizationStyle" description="Image Layout Visualization" transform="ReportAjaxMojoVisualizationTransform">
              <ActualParameters>
            <ActualParameter name="documentStyle" type="1" value="RWGridJsonStyle" />
            <ActualParameter name="reportXMLStyle" type="1" value="VisualizationServerJsonDataStyle" />
            <ActualParameter name="mojoClassName" type="1" value="HtmlMultipleImageLayout" />
            <ActualParameter name="containerWidth" type="1" value="800"/>
            <ActualParameter name="containerHeight" type="1" value="350"/>
              </ActualParameters>
              <Layouts>
            <Layout layout_source="AppLayoutSourceFile" order="1">
              <![CDATA[/WEB-INF/xml/layouts/MojoVisualizationLayout.xml]]>
               </Layout>
              </Layouts>
        </Style>
        </Styles>
    </StyleCatalog>

Customizing the Image Layout Visualization to Act as a Map

While it is not recommended to use the Image Layout visualization to display regions on a geographic map, there may be instances where you want to do this. For example, you may want to display custom regions on the map, instead of the regions that are provided out-of-the-box, or you may want to use different names for the regions. You can use the Image Layout visualization to perform customizations such as these, as described below: 

  1. Using the plug-in you created to enable the Image Layout visualization, add a new VisFramework/Map folder, as shown below.

ImageLayoutPlugin

VisFramework

Map

WEB-INF

xml

  1. Create an HTML file to provide the coordinates for the regions on your custom map. The code should look like the code shown below. The value of the ALT attribute in each <AREA> node must match the names of the region attributes in your dataset. You can use a third-party tool to create your map coordinates file.

    Copy 
    <HTML>
       <HEAD>
          <TITLE>untitled</TITLE>
       </HEAD>
       <BODY>
          <P>
             <IMG 
     SRC="" USEMAP="#World" WIDTH="636" HEIGHT="472" 
     BORDER="0" />
             <MAP>
                <AREA 
     SHAPE="POLY" HREF="#" ALT="South" 
     COORDS="196,219, 194,211, 194,202, 206,194, 218,188, ..., 
     196,219"/>
                <AREA 
     SHAPE="POLY" HREF="#" ALT="Northeast" COORDS="355,119, 
     300,119, 306,113, 304,106, 305, ..., 355,119"/
             </MAP>
          </P>   
       </BODY>
    </HTML>

Save the map coordinates file in your plug-in folder. For example, save it as plugins/ImageLayoutPlugin/VisFramework/Map/MapCoords.html

  1. Create an XML file to provide the list of available regions on your custom map, with pointers to the HTML files that hold the coordinates for each region file. Use the code shown below as a guide to create the contents for your file.

    Copy 
    <ShapeFileMaps>                    
        <ShapeFileMap 
     shapeKey="CustomMapCoords1" shapeType="Polygon" 
     role="Country" name="Custom 
     Countries of the World" 
     descWeb="" descFlash="" descDesktop="" shapeFile="plugins/ImageLayoutPlugin/VisFramework/map/CustomMapCoords1.html"/>
                        
        <ShapeFileMap 
     shapeKey="CustomMapCoords2" shapeType="Polygon" 
     role="State" name="Custom 
     States" 
     descWeb="" descFlash="" descDesktop="" shapeFile="plugins/ImageLayoutPlugin/VisFramework/map/CustomMapCoords2.html"/>
                        
        <ShapeFileMap CustomMapCoords3" shapeType="Polygon" 
     role="Country" name="Custom 
     Countries of Europe" 
     descWeb="" descFlash="" descDesktop="" shapeFile="plugins/ImageLayoutPlugin/VisFramework/map/CustomMapCoords3.html"/>
                        
    </ShapeFileMaps>

Save the shape file in your plug-in folder. For example, save it as plugins/ImageLayoutPlugin/WEB-INF/xml/config/ShapeFileMap.xml.

  1. Create a file called pageConfig.xml. You use this delta configuration file to tell the application not to use the default shape file map. In the <ShapeFileMaps> node, you set the use-default attribute to "false". Copy and paste the code shown below into the file.

    Copy 
    <framework 
     desc="This is the framework definition xml for mstr Web application" 
     name="mstrFramework" version="1.0">
                        
      <ShapeFileMaps 
     config-src="@ImageLayoutPlugin:/WEB-INF/xml/config/ShapeFileMap.xml"use-default="false"/>
    </framework>

Save pageConfig.xml under plugins/ImageLayoutPlugin/WEB-INF/xml. 

  1. Create a file called styleCatalog.xml. You use this delta configuration file to tell the application to use the shape file map in the plug-in, instead of the default file. In the <ActualParameter> node, you set the value attribute to the relative path to ShapeFileMap.xml in the plug-in. Copy and paste the code shown below into the file.

    Copy 
    <?xml 
     version="1.0" encoding="UTF-8" standalone="no"?>                    
    <!DOCTYPE 
     StyleCatalog SYSTEM "styleCatalog.dtd">                    
    <StyleCatalog>                    
      <Styles>                    
        <Style 
     name="visPropsImageLayoutStyle">                    
          <ActualParameters>                    
            <ActualParameter 
     name="shapeFilePath"value="/plugins/ImagelayoutPlugin/WEB-INF/xml/config/ShapeFileMap.xml"/>                    
          </ActualParameters>                  
        </Style>                   
      </Styles>                   
    </StyleCatalog>

Save styleCatalog.xml under plugins/ImageLayoutPlugin/WEB-INF/xml. 

  1. Restart your Web server. Your custom map appears when you use the Image Layout visualization.