Oracle Maps example - Dynamic BI data, dynamic (JDBC) theme and dynamic Piechart style


Instructions

This demo shows how to plot dynamically created business attribute data on a dynamic query-based FOI layer using dynamically created Pie chart style. It relies on the concept of Non-Spatial Data Provider to join business data (obtained on the fly from outside the database) with the base spatial data (JDBC theme-based FOI layer from database).

Source code

The key JavaScript code for the above map is listed below.
  function createThemeFOI()
  {
    var baseQuery= "select geom, state from states";
    var theme = "<themes><theme name='MY_JDBC_THEME' >" +
                "<jdbc_query spatial_column='geom' jdbc_srid='8307' key_column='state' " +
                "render_style='C.COUNTIES' datasource='mvdemo'>" + baseQuery +
                "</jdbc_query></theme></themes>" ; 
    themebasedfoi = new MVThemeBasedFOI('ajdbctheme',theme);    
    themebasedfoi.setBringToTopOnMouseOver(true);
	themebasedfoi.enableImageCaching(false);
    mapview.addThemeBasedFOI(themebasedfoi); 
  }
  
  function buildDynamicStyle(themebasedfoi)
  {
      var xmlDef = '<AdvancedStyle>'+
        '<PieChartStyle pieradius="20">'+
        '        <PieSlice name="A" color="#ffff00" />'+
        '        <PieSlice name="B" color="#000000" />'+
        '        <PieSlice name="H" color="#ff00ff" />'+
        '        <PieSlice name="I" color="#0000ff" />'+
        '        <PieSlice name="W" color="#ffffff" />'+
        '</PieChartStyle>'+
        '</AdvancedStyle>';


      var styleObj = new MVXMLStyle("my_style", xmlDef);
    
      themebasedfoi.addStyle(styleObj);
      themebasedfoi.setRenderingStyle("my_style");
  }


  function setupNsdp(themebasedfoi)
  {
   
    var nsdpInfo = new MVNSDP("defaultNSDP");
    nsdpInfo.setTheme("MY_JDBC_THEME");
    nsdpInfo.setKeyColumn("state");
   
    var xml_data = "<nsdp_xml>"+
      "<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); 
    
    
  }
  
	
Note that in the above code, the first function createThemeFOI() is used to create a JDBC theme-based FOI layer. It is very important to specify the key_column attribute in the JDBC theme definition. It designates a column in the JDBC theme's query result to serve as the key/id field of each feature. Without this the feature data from the theme will not be able to join with the business data produced by the Non-Spatial data provider.
Note also in general it's a good idea to disable server side caching of FOI images, in this case individual Pie chart images. This is achieved by the statement themebasedfoi.enableImageCaching(false). Without this, even if the busniess data for the states change, the pie chart may look the same to the user as they are not refreshed/redrwan by the server.
Finally, the function setupNsdp() creates some mock-up data for each state and is passed onto the server via the theme-based FOI, where they are joined with the correct state.