Oracle Maps example - Displaying dynamic BI data as choropleth map


Instructions

This demo shows how to draw a choropleth map using dynamically generated XML BI data. For each state that has associated business data, it is displayed using a color that corresponds to its revenue number. You can click on such a state to display an info-tip window listing the actual revenue data for that state.
It uses MapViewer's concept of Non-Spatial Data Provider, which is a custom library that is installed on MapViewer server side. A custom data provider basically feeds any business (Non-Spatial) data to MapViewer, which then joins such data with the Oracle Spatial managed geographic boundary data (such as countries, states et al). In other words, you do not need to store the business specific data in a table in order to render theme as thematic maps using MapViewer. Note that if you do have the business data already stored in the database, then doing thematic mapping can be even easier using MapViewer's built-in thematic mapping support.
In this particular demo, we used the default Non-Spatial Data Proiver that comes with MapViewer. This provider accepts business data in a simple CSV or XML format. The XML format data can be saved on a web server and accessible through a URL by MapViewer, or can be generated in your JavaScript code and sent to MapViewer as part of a Theme-Based FOI layer request. This demo shows how to generate and send XML data from the JavaScript application directly.
This demo uses a pre-defined advanced style named "V.WHITE SCHEME" to render the states with revenue data. It is defined as a black-white color series for the numeric range of 0 to 200.

Source code

There main pieces of code that are of interest in this demo is listed below.
  function setupNsdp(themebasedfoi)
  {
    var nsdpInfo = new MVNSDP("defaultNSDP");
    nsdpInfo.setTheme("theme_demo_states");
    nsdpInfo.setKeyColumn("state");

    var xml_data = "<nsdp_xml>"+
  "<table>"+
	"<tr><th>State</th>           <th>Revenue (M)</th></tr>"+
	"<tr><td>Oregon</td>          <td>120.0</td></tr>"+ 
	"<tr><td>California</td>      <td>124.0</td></tr>"+
	"<tr><td>Nevada</td>          <td>70.0</td></tr>"+
	"<tr><td>Arizona</td>         <td>100.0</td></tr>"+
	"<tr><td>Texas</td>           <td>175.0</td></tr>"+
	"<tr><td>Colorado</td>        <td>169.0</td></tr>"+
	"<tr><td>Idaho</td>           <td>50.0</td></tr>"+
	"<tr><td>Iowa</td>            <td>40.0</td></tr>"+
	"<tr><td>Ohio</td>            <td>165.0</td></tr>"+
	"<tr><td>Michigan</td>        <td>180.0</td></tr>"+
	"<tr><td>North Dakota</td>    <td>60.0</td></tr>"+
	"<tr><td>New Mexico</td>      <td>19.0</td></tr>"+
	"<tr><td>Oklahoma</td>        <td>45.0</td></tr>"+
	"<tr><td>Utah</td>            <td>110.0</td></tr>"+
	"<tr><td>Wisconsin</td>       <td>50.0</td></tr>"+
	"<tr><td>Alabama</td>         <td>40.0</td></tr>"+
  "</table>"+
"</nsdp_xml>";

    var ps = new Object();
    ps["xml"] = xml_data;
    nsdpInfo.setParameters(ps);
    themebasedfoi.setNSDP(nsdpInfo);  
    themebasedfoi.setRenderingStyle("V.WHITE SCHEME");
  }
In the above code, we first create a NSDP object (using the Oracle Maps API), tell it the name of the MapViewer pre-defined theme that should be joined with the business data (theme_demo_states in this case). You must also specify a key column from the base table of the pre-defined theme, so that MapViewer can fetch the join key values from the theme's base table. In this case the "state" column will be used to match the business data provided by the Non-Spatial Data Provider.
Next we stuff the actual business data into a JavaScript string variable. The data is in a very simple XML format that follows the HTML Table syntax. Each <tr/> tag corresponds to one business record, in this case it is the sales number for five product items for a particular state. The first <tr> tag however is used to specify the column heading for the business data, which are displayed in the info-window when you click on any pie chart on the map. Note each state record also contains the name of that state. This is the value that MapViewer will use to "join" with the actual state boundary data stored in Oracle Spatial through its "state" table column.
The next step in the above code sets the XML data into the Non-Spatial Data Provider object as the value of the built-in 'xml' parameter. If you store the XML data in a file and make it accessible through a URL, then you should set the URL as the value of a different bult-in parameter named 'xml_url'.
The final step is associating the Non-Spatial Data Provider with the theme-based FOI object, and setting the rendering style to "V.WHITE SCHEME" (a style that comes with the MVDEMO data set).