Mapviewer - Creation of a dynamic Map (with Nsdp)

> MAPViewer

1 - About

The purpose of this article is twice :

The goal is to made the same map made than this article (Mapviewer - SH Customer Density Semi-Static Map) but to use the javascript library instead of MapBuilder to design the map elements (colour, bucket, theme, …).

Advertising

3 - Prerequisites

You must have perform all the steps from this article (Mapviewer - SH Customer Density Semi-Static Map) and/of to understand the key concept of MapViewer.

4 - Script

<script language=javascript>
  function showMap()
  {	
    var baseURL  = "http://"+document.location.host+"/mapviewer";
    var mapCenterLon = -122.45;
    var mapCenterLat =  37.6706;
    var mapZoom      =  0;  
    var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
    var mapview = new MVMapView(document.getElementById("map"), baseURL);
    mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.SH_CUST_DENSITY_MAP")); 
    mapview.setCenter(mpoint); 
    mapview.setZoomLevel(mapZoom);
 
    DynamicTheme = new MVThemeBasedFOI('DynamicTheme', 'mvdemo.THEME_SH_CUST_DENSITY');    
    DynamicTheme.enableImageCaching(false);
 
    // Create the Style Colors
    var StyleColor1 = new MVStyleColor("StyleColor1","#CCFF00","#003333"); // Color of the style C.RB13_9  
    var StyleColor2 = new MVStyleColor("StyleColor2","#6EFF00","#003333"); // Color of the style C.RB13_8
    var StyleColor3 = new MVStyleColor("StyleColor3","#00FF21","#003333"); // Color of the style C.RB13_7
    var StyleColor4 = new MVStyleColor("StyleColor4","#00FF7B","#003333"); // Color of the style C.RB13_6
    var StyleColor5 = new MVStyleColor("StyleColor5","#00FFCB","#003333"); // Color of the style C.RB13_5
    var StyleColor6 = new MVStyleColor("StyleColor6","#00D8FF","#003333"); // Color of the style C.RB13_4
    var StyleColor7 = new MVStyleColor("StyleColor7","#006EFF","#003333"); // Color of the style C.RB13_3
    var StyleColor8 = new MVStyleColor("StyleColor8","#002AFF","#003333"); // Color of the style C.RB13_2
    var StyleColor9 = new MVStyleColor("StyleColor9","#2A00FF","#003333"); // Color of the style C.RB13_1
 
    // Add the style to the dynamic theme
    DynamicTheme.addStyle(StyleColor1);
    DynamicTheme.addStyle(StyleColor2);
    DynamicTheme.addStyle(StyleColor3);
    DynamicTheme.addStyle(StyleColor4);
    DynamicTheme.addStyle(StyleColor5);
    DynamicTheme.addStyle(StyleColor6);
    DynamicTheme.addStyle(StyleColor7);
    DynamicTheme.addStyle(StyleColor8);
    DynamicTheme.addStyle(StyleColor9);
 
    // Create a Range Bucket Series
    var RangedBuckets = new Array(1);
    RangedBuckets[0] = new MVNumericRangedBucket(  0,  20, "StyleColor1", "RangeBucket1");
    RangedBuckets[1] = new MVNumericRangedBucket( 20,  40, "StyleColor2", "RangeBucket2");
    RangedBuckets[2] = new MVNumericRangedBucket( 40,  60, "StyleColor3", "RangeBucket3");
    RangedBuckets[3] = new MVNumericRangedBucket( 60,  80, "StyleColor4", "RangeBucket4");
    RangedBuckets[4] = new MVNumericRangedBucket( 80, 100, "StyleColor5", "RangeBucket5");
    RangedBuckets[5] = new MVNumericRangedBucket(100, 120, "StyleColor6", "RangeBucket6");
    RangedBuckets[6] = new MVNumericRangedBucket(120, 140, "StyleColor7", "RangeBucket7");
    RangedBuckets[7] = new MVNumericRangedBucket(140, 160, "StyleColor8", "RangeBucket8");
    RangedBuckets[8] = new MVNumericRangedBucket(160,null, "StyleColor9", "RangeBucket9");
 
    // Create the Buckets Series and style
    var BucketSeries = new MVBucketSeries("MyCustomBucketSeries");
    BucketSeries.setBuckets(RangedBuckets);
    BucketSeries.setDefaultRenderingStyle("C.RED");
    var BucketStyle = new MVBucketStyle("SH_CUST_DENSITY_DYMAMIC",BucketSeries);
 
    // Add and set the rendering style for the Bucket Style to the Dynamic Map
    DynamicTheme.addStyle(BucketStyle);
    DynamicTheme.setRenderingStyle("SH_CUST_DENSITY_DYMAMIC");
 
 
    // Non Spatial Data Provider (Mapviewer > 10.1.3.1)
 
    var Nsdp = new MVNSDP("defaultNSDP"); // defaultNSDP is the default id provider registered with Map Viewer
    var Parameters = new Object();
    Parameters["xml_url"] = baseURL + "/obiee/nsdp.xml";
 
    // The theme that contain the key column
    Nsdp.setTheme("THEME_SH_CUST_DENSITY");
    Nsdp.setKeyColumn("STATE_ABRV"); // Match the Column in the advance tab of the theme
 
    Nsdp.setParameters(Parameters);
 
 
    // Add the Ndsp Parameters
    DynamicTheme.setNSDP(Nsdp);
 
    //Navigation Panel
    navPan = new MVMapDecoration(new MVNavigationPanel(),0,0,null,null,4,4) ;
    mapview.addMapDecoration(navPan) ;
 
    mapview.addThemeBasedFOI(DynamicTheme);
    mapview.display();  			
  }
</script>

5 - Nsdp

The XML data is a surrogate for the database data that will be fed by the Data Access Tools (for OBIEE, byt the BI server based on Answers requests).

<!-- this is the default data provider that comes with MapViewer; please
       refer to the MapViewer User's Guide for instructions on how to use it.
  -->
  <ns_data_provider id="defaultNSDP" class="oracle.sdovis.NSDataProviderDefault" />
<nsdp_xml>
<table>
<tr><th>State_Abrv</th><th>CountCustomers</th></tr>
<tr><td>AK</td><td>37</td></tr>
<tr><td>AL</td><td>49</td></tr>
<tr><td>AR</td><td>125</td></tr>
<tr><td>CA</td><td>732</td></tr>
<tr><td>CO</td><td>181</td></tr>
<tr><td>CT</td><td>35</td></tr>
<tr><td>FL</td><td>540</td></tr>
<tr><td>GE</td><td>37</td></tr>
<tr><td>HI</td><td>40</td></tr>
<tr><td>IA</td><td>81</td></tr>
<tr><td>IL</td><td>126</td></tr>
<tr><td>IN</td><td>50</td></tr>
<tr><td>KS</td><td>101</td></tr>
<tr><td>KY</td><td>379</td></tr>
<tr><td>LA</td><td>10</td></tr>
<tr><td>MA</td><td>40</td></tr>
<tr><td>MD</td><td>72</td></tr>
<tr><td>MI</td><td>119</td></tr>
<tr><td>MN</td><td>116</td></tr>
<tr><td>MO</td><td>92</td></tr>
<tr><td>MS</td><td>19</td></tr>
<tr><td>MT</td><td>22</td></tr>
<tr><td>NC</td><td>62</td></tr>
<tr><td>ND</td><td>61</td></tr>
<tr><td>NE</td><td>72</td></tr>
<tr><td>NH</td><td>10</td></tr>
<tr><td>NJ</td><td>52</td></tr>
<tr><td>NM</td><td>38</td></tr>
<tr><td>NV</td><td>19</td></tr>
<tr><td>NY</td><td>157</td></tr>
<tr><td>OH</td><td>63</td></tr>
<tr><td>OK</td><td>78</td></tr>
<tr><td>OR</td><td>27</td></tr>
<tr><td>PA</td><td>51</td></tr>
<tr><td>SC</td><td>55</td></tr>
<tr><td>SD</td><td>33</td></tr>
<tr><td>TN</td><td>72</td></tr>
<tr><td>TX</td><td>49</td></tr>
<tr><td>UT</td><td>9</td></tr>
<tr><td>VA</td><td>36</td></tr>
<tr><td>VT</td><td>7</td></tr>
<tr><td>WA</td><td>34</td></tr>
<tr><td>WI</td><td>67</td></tr>
<tr><td>WV</td><td>20</td></tr>
<tr><td>WY</td><td>21</td></tr>
<tr><td>AZ</td><td>0</td></tr>
<tr><td>GA</td><td>0</td></tr>
<tr><td>ME</td><td>0</td></tr>
<tr><td>ID</td><td>0</td></tr>
</table>
</nsdp_xml>

6 - The result

Mouse click on a state launches an info box displaying the attributes with the NSDP attributes from the XML file.

7 - Support

See this article on how to retrieve debug information : Mapviewer debugging - log

7.1 - Unknown request type

May 6, 2009 2:50:16 PM oracle.lbs.mapcache.MCSServlet doPost
FINER: <request type="unknown request type" data_source="MVDEMO"/>

Possible cause :

  • The name of a function is not good
  • You must pay attention to uppercase and lowercase
  • The new command have been forgotten

For instance :

var BucketSeries = MVBucketSeries("MyCustomBucketSeries");

Must be

var BucketSeries = new MVBucketSeries("MyCustomBucketSeries");
Advertising