Oracle Maps example - Thematic mapping: applying multiple styles on dynamic BI data
Instructions
This demo shows how to draw pie charts on top of the states using
dynamically generated XML BI data, while also displaying these states as a choropleth layer. Basically, for each state that has associated business data, a pie chart is drawn based on the first 4 data columns, while a Color Scheme style is applied based on the 5th data column. You can click on each pie chart or the state boundary behind it to display an info-tip window listing the actual business data associated with 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.
This demo also utilizes a new feature called "stackable rendering style" which essentially means you can assign multiple (thematic) styles to a single theme and ask MapViewer to apply all of them for each feature of that theme. What's really useful is that you can also assign different "info" or data columns to each such style. For instance in this demo we assign four data columns from the XML data set to be consumed by the pie chart style, while a fifth column's values are used to render the states using an advanced color series style.
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 also shows how to dynamically define a Pie Chart style for MapViewer to use. You can specify its overall size, number of slices it contains, and the color for each pie slice. Note that the color series style is a pre-defined advanced style that comes with your mvdemo data set. It's name is "V.WHITE SCHEME".
Source code
There are 2 main pieces of code that are of interest in this demo.
1. Setup the dynamic Pie Chart style
function setupDynamicPieChartStyle(themebasedfoi)
{
var slices = new Array(5);
slices[0] = new MVPieSlice("Item 1", "2a00ff");
slices[1] = new MVPieSlice("Item 2", "00ffcb");
slices[2] = new MVPieSlice("Item 3", "00ff21");
slices[3] = new MVPieSlice("Item 4", "ccff00");
slices[4] = new MVPieSlice("Item 5", "ff9900");
var piechart = new MVPieChartStyle("mypc", 25, slices);
//now add the piechart style
themebasedfoi.addStyle(piechart);
themebasedfoi.setRenderingStyle("mypc");
}
In the above code, after creating the Pie Chart style using the Oracle Maps API, it is set on the target theme-based FOI layer as the rendering style.
2. Setup a Non-Spaial Data Provider and the actual XML business data on the theme
Note espeically the custom rendering element where we are specifying two different rendering style to be applied, and the names of the value columns that they depend on.
function setupNsdp(themebasedfoi)
{
var nsdpInfo = new MVNSDP("defaultNSDP");
nsdpInfo.setTheme("theme_demo_states");
nsdpInfo.setKeyColumn("state");
var xml_data = "<nsdp_xml>"+
"<rendering>"+
" <style name='V.WHITE SCHEME' value_columns='Item 5' />"+
" <style name='mypc' value_columns='Item 1,Item 2,Item 3,Item 4' />"+
"</rendering>"+
"<table>"+
"<tr><th>State</th><th>Item 1</th><th>Item 2</th><th>Item 3</th><th>Item 4</th><th>Item 5</th></tr>"+
"<tr><td>Oregon</td><td>500.0</td><td>200.0</td><td>1000.0</td><td>345.0</td><td>700.0</td></tr>"+
"<tr><td>California</td><td>624.0</td><td>275.0</td><td>800.0</td><td>154.0</td><td>200.0</td></tr>"+
"<tr><td>Nevada</td><td>200.0</td><td>396.0</td><td>900.0</td><td>347.0</td><td>400.0</td></tr>"+
"<tr><td>Arizona</td><td>100.0</td><td>458.0</td><td>10.0</td><td>369.0</td><td>70.0</td></tr>"+
"<tr><td>Texas</td><td>375.0</td><td>10.0</td><td>800.0</td><td>245.0</td><td>501.0</td></tr>"+
"<tr><td>Colorado</td><td>469.0</td><td>999.0</td><td>60.0</td><td>545.0</td><td>350.0</td></tr>"+
"<tr><td>Idaho</td><td>50.0</td><td>167.0</td><td>200.0</td><td>45.0</td><td>842.0</td></tr>"+
"<tr><td>Iowa</td><td>400.0</td><td>234.0</td><td>1500.0</td><td>845.0</td><td>696.0</td></tr>"+
"<tr><td>Ohio</td><td>100.0</td><td>555.0</td><td>100.0</td><td>35.0</td><td>444.0</td></tr>"+
"<tr><td>Michigan</td><td>800.0</td><td>473.0</td><td>300.0</td><td>30.0</td><td>1200.0</td></tr>"+
"<tr><td>North Dakota</td><td>260.0</td><td>609.0</td><td>50.0</td><td>90.0</td><td>340.0</td></tr>"+
"<tr><td>New Mexico</td><td>900.0</td><td>108.0</td><td>1000.0</td><td>1345.0</td><td>70.0</td></tr>"+
"<tr><td>Oklahoma</td><td>1050.0</td><td>168.0</td><td>1500.0</td><td>124.0</td><td>750.0</td></tr>"+
"<tr><td>Utah</td><td>10.0</td><td>1200.0</td><td>1040.0</td><td>34.0</td><td>600.0</td></tr>"+
"<tr><td>Wisconsin</td><td>650.0</td><td>500.0</td><td>880.0</td><td>2450.0</td><td>800.0</td></tr>"+
"<tr><td>Alabama</td><td>440.0</td><td>10.0</td><td>900.0</td><td>34.0</td><td>700.0</td></tr>"+
"</table>"+
"</nsdp_xml>";
var ps = new Object();
ps["xml"] = xml_data;
nsdpInfo.setParameters(ps);
themebasedfoi.setNSDP(nsdpInfo);
}
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. Before the actual data, we defined two custom rendering rules in our data set that will be picked up and applied by the MapViewer server when processing this theme.
"<rendering>"+
" <style name='V.WHITE SCHEME' value_columns='Item 5' />"+
" <style name='mypc' value_columns='Item 1,Item 2,Item 3,Item 4' />"+
"</rendering>"+
"<table>"
As for the data itself, 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, which is performed by the last statement in the above code.