Mapviewer - Creation of a dynamic Map (with Nsdp)

1 - About

The purpose of this article is twice :

  • to demonstrate the capability of the Oracle Map Javascript Api
  • to use the Non Spatial Data in a Map to be able to integrate a Map with a Data Access Tool as OBIEE

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, …).

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://""/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")); 

    DynamicTheme = new MVThemeBasedFOI('DynamicTheme', 'mvdemo.THEME_SH_CUST_DENSITY');    
    // 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
    // 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");
    var BucketStyle = new MVBucketStyle("SH_CUST_DENSITY_DYMAMIC",BucketSeries);
    // Add and set the rendering style for the Bucket Style to the Dynamic Map
    // Non Spatial Data Provider (Mapviewer >
    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.setKeyColumn("STATE_ABRV"); // Match the Column in the advance tab of the theme
    // Add the Ndsp Parameters

    //Navigation Panel
    navPan = new MVMapDecoration(new MVNavigationPanel(),0,0,null,null,4,4) ;
    mapview.addMapDecoration(navPan) ;


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" />


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");

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap