Wednesday Jun 26, 2013

Creating a thematic map

This post describes how to create a simple thematic map, just a state population layer, with no underlying map tile layer. The map shows states color-coded by total population. The map is interactive with info-windows and can be panned and zoomed.

The sample code demonstrates the following:

  • Displaying an interactive vector layer with no background map tile layer (i.e. purpose and use of the Universe object)
  • Using a dynamic (i.e. defined via the javascript client API) color bucket style
  • Dynamically changing a layer's rendering style
  • Specifying which attribute value to use in determining the bucket, and hence style, for a feature (FoI)

The result is shown in the screenshot below.

Screenshot of US state population thematic map


The states layer was defined, and stored in the user_sdo_themes view of the mvdemo schema, using MapBuilder. The underlying table is defined as

SQL> desc states_32775
 Name                                      Null?    Type
 ----------------------------------------- -------- ----------------------------
 STATE                                              VARCHAR2(26)
 STATE_ABRV                                         VARCHAR2(2)
 FIPSST                                             VARCHAR2(2)
 TOTPOP                                             NUMBER
 PCTSMPLD                                           NUMBER
 LANDSQMI                                           NUMBER
 POPPSQMI                                           NUMBER
...
 MEDHHINC                                           NUMBER
 AVGHHINC                                           NUMBER
 GEOM32775                                          MDSYS.SDO_GEOMETRY

We'll use the TOTPOP column value in the advanced (color bucket) style for rendering the states layers. The predefined theme (US_STATES_BI) is defined as follows.

SQL> select styling_rules from user_sdo_themes where name='US_STATES_BI';

STYLING_RULES
--------------------------------------------------------------------------------

<?xml version="1.0" standalone="yes"?>
<styling_rules highlight_style="C.CB_QUAL_8_CLASS_DARK2_1">
  <hidden_info>
    <field column="STATE" name="Name"/>
    <field column="POPPSQMI" name="POPPSQMI"/>
    <field column="TOTPOP" name="TOTPOP"/>
  </hidden_info>
  <rule column="TOTPOP">
    <features style="states_totpop"> </features>
    <label column="STATE_ABRV" style="T.BLUE_SERIF_10"> 1 </label>
  </rule>
</styling_rules>

SQL>

The theme definition specifies that the state, poppsqmi, totpop, state_abrv, and geom columns will be queried from the states_32775 table. The state_abrv value will be used to label the state while the totpop value will be used to determine the color-fill from those defined in the states_totpop advanced style. The states_totpop style, which we will not use in our demo, is defined as shown below.

SQL> select definition from user_sdo_styles where name='STATES_TOTPOP';

DEFINITION
--------------------------------------------------------------------------------
<?xml version="1.0" ?>
<AdvancedStyle>
   <BucketStyle>
    <Buckets default_style="C.S02_COUNTRY_AREA">
     <RangedBucket seq="0" label="10K - 5M" low="10000" high="5000000" style="C.SEQ6_01" />
      <RangedBucket seq="1" label="5M - 12M" low="5000001" high="1.2E7" style="C.SEQ6_02" />
      <RangedBucket seq="2" label="12M - 20M" low="1.2000001E7" high="2.0E7" style="C.SEQ6_04" />
      <RangedBucket seq="3" label="&gt; 20M" low="2.0000001E7" high="5.0E7" style="C.SEQ6_05" />
    </Buckets>
   </BucketStyle>
</AdvancedStyle>

SQL>

The demo defines additional advanced styles via the OM.style object and methods and uses those instead when rendering the states layer.  

Now let's look at relevant snippets of code that defines the map extent and zoom levels (i.e. the OM.universe),  loads the states predefined vector layer (OM.layer), and sets up the advanced (color bucket) style.

Defining the map extent and zoom levels.
function initMap()
{
  //alert("Initialize map view");
  
  // define the map extent and number of zoom levels.
  // The Universe object is similar to the map tile layer configuration
  // It defines the map extent, number of zoom levels, and spatial reference system
  // well-known ones (like web mercator/google/bing or maps.oracle/elocation are predefined
  // The Universe must be defined when there is no underlying map tile layer. 
  // When there is a map tile layer then that defines the map extent, srid, and zoom levels.
     var uni= new OM.universe.Universe(
    {
        srid : 32775,
        bounds : new OM.geometry.Rectangle(
                        -3280000, 170000, 2300000, 3200000, 32775),
        numberOfZoomLevels: 8
    });

The srid specifies the spatial reference system which is Equal-Area Projection (United States).

SQL> select cs_name from cs_srs where srid=32775 ;
CS_NAME
---------------------------------------------------
Equal-Area Projection (United States)

The bounds defines the map extent. It is a Rectangle defined using the lower-left and upper-right coordinates and srid.

Loading and displaying the states layer

This is done in the states() function. The full code is at the end of this post, however here's the snippet which defines the states VectorLayer.

    // States is a predefined layer in user_sdo_themes
    var  layer2 = new OM.layer.VectorLayer("vLayer2", 
    {
        def:
        {
            type:OM.layer.VectorLayer.TYPE_PREDEFINED, 
            dataSource:"mvdemo", 
            theme:"us_states_bi", 
            url: baseURL,
            loadOnDemand: false
        },
        boundingTheme:true
     });

The first parameter is a layer name, the second is an object literal for a layer config. The config object has two attributes: the first is the layer definition, the second specifies whether the layer is a bounding one (i.e. used to determine the current map zoom and center such that the whole layer is displayed within the map window) or not. The layer config has the following attributes:

type - specifies whether is a predefined one, a defined via a SQL query (JDBC), or in a json-format file (DATAPACK)

theme - is the predefined theme's name

url - is the location of the mapviewer server

loadOnDemand - specifies whether to load all the features or just those that lie within the current map window and load additional ones as needed on a pan or zoom

The code snippet below dynamically defines an advanced style and then uses it, instead of the 'states_totpop' style, when rendering the states layer.

// override predefined rendering style with programmatic one
   var theRenderingStyle = 
     createBucketColorStyle('YlBr5', colorSeries, 'States5', true);
  // specify which attribute is used in determining the bucket (i.e. color) to use for the state
  // It can be an array because the style could be a chart type (pie/bar)
  // which requires multiple attribute columns   
  // Use the STATE.TOTPOP column (aka attribute) value here
   layer2.setRenderingStyle(theRenderingStyle, ["TOTPOP"]);

The style itself is defined in the createBucketColorStyle() function.

Dynamically defining an advanced style

The advanced style used here is a bucket color style, i.e. a color style is associated with each bucket. So first we define the colors and then the buckets. 

    numClasses = colorSeries[colorName].classes;
   // create Color Styles
   for (var i=0; i < numClasses; i++) 
   {
        theStyles[i] = new OM.style.Color(
                     {fill: colorSeries[colorName].fill[i], 
                       stroke:colorSeries[colorName].stroke[i],
                      strokeOpacity: useGradient? 0.25 : 1
                     });
   };

numClasses is the number of buckets. The colorSeries array contains the color fill and stroke definitions and is:

var colorSeries = {
//multi-hue color scheme #10 YlBl. 
"YlBl3": {   classes:3,
                 fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8],
                 stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6]
  },
"YlBl5": {   classes:5,
                 fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494],
                 stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85]
  },
//multi-hue color scheme #11 YlBr.
 "YlBr3": {classes:3,
                 fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E],
                 stroke:[0xE6DEA9, 0xE5B047, 0xC5360D] 
  },
"YlBr5": {classes:5,
                 fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404],
                 stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04]
    },

etc.

Next we create the bucket style.

   bucketStyleDef = {
      numClasses : colorSeries[colorName].classes,
//      classification: 'custom',  //since we are supplying all the buckets
//      buckets: theBuckets,
      classification: 'logarithmic',  // use a logarithmic scale 
      styles: theStyles,
      gradient:  useGradient? 'linear' : 'off'
//      gradient:  useGradient? 'radial' : 'off'
    };
   theBucketStyle = new OM.style.BucketStyle(bucketStyleDef);
   return theBucketStyle;

A BucketStyle constructor takes a style definition as input. The style definition specifies the number of buckets (numClasses), a classification scheme (which can be equal-ranged, logarithmic scale, or custom), the styles for each bucket, whether to use a gradient effect, and optionally the buckets (required when using a custom classification scheme).

The full source for the demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Oracle Maps V2 Thematic Map Demo</title>

<script src="http://localhost:8080/mapviewer/jslib/v2/oraclemapsv2.js" type="text/javascript">
</script>

<script type="text/javascript">
//var $j = jQuery.noConflict();
var baseURL="http://localhost:8080/mapviewer";  // location of mapviewer
OM.gv.proxyEnabled =false;			// no mvproxy needed
OM.gv.setResourcePath(baseURL+"/jslib/v2/images/");  // location of resources for UI elements like nav panel buttons
var map = null;											 // the client mapviewer object 
var statesLayer = null, stateCountyLayer = null;		 // The vector layers for states and counties in a state
var layerName="States";
// initial map center and zoom
var mapCenterLon = -20000;
var mapCenterLat =  1750000;
var mapZoom      =  2;  
var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,32775);
var currentPalette = null, currentStyle=null;

// set an onchange listener for the color palette select list
// initialize the map
// load and display the states layer
$(document).ready( function()
{

      $("#demo-htmlselect").change(function() {
			var theColorScheme = $(this).val();
			useSelectedColorScheme(theColorScheme);
		});
      initMap();
      states();	  
	  
}
);

/**
 * color series from ColorBrewer site (http://colorbrewer2.org/).
 */

var colorSeries = {
  
//multi-hue color scheme #10 YlBl.
  
"YlBl3": {   classes:3,
                 fill: [0xEDF8B1, 0x7FCDBB, 0x2C7FB8],
                 stroke:[0xB5DF9F, 0x72B8A8, 0x2872A6]
  },
  
"YlBl5": {   classes:5,
                 fill:[0xFFFFCC, 0xA1DAB4, 0x41B6C4, 0x2C7FB8, 0x253494],
                 stroke:[0xE6E6B8, 0x91BCA2, 0x3AA4B0, 0x2872A6, 0x212F85]
  },
  
//multi-hue color scheme #11 YlBr.
 
 "YlBr3": {classes:3,
                 fill:[0xFFF7BC, 0xFEC44F, 0xD95F0E],
                 stroke:[0xE6DEA9, 0xE5B047, 0xC5360D] 
  },
  
"YlBr5": {classes:5,
                 fill:[0xFFFFD4, 0xFED98E, 0xFE9929, 0xD95F0E, 0x993404],
                 stroke:[0xE6E6BF, 0xE5C380, 0xE58A25, 0xC35663, 0x8A2F04]
    },
// single-hue color schemes (blues, greens, greys, oranges, reds, purples)
"Purples5": {classes:5,
                 fill:[0xf2f0f7, 0xcbc9e2, 0x9e9ac8, 0x756bb1, 0x54278f],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3]
    },
"Blues5": {classes:5,
                 fill:[0xEFF3FF, 0xbdd7e7, 0x68aed6, 0x3182bd, 0x18519C],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3]
    },
"Greens5": {classes:5,
                fill:[0xedf8e9, 0xbae4b3, 0x74c476, 0x31a354, 0x116d2c],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3]
    },  
"Greys5": {classes:5,
                 fill:[0xf7f7f7, 0xcccccc, 0x969696, 0x636363, 0x454545],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3]
    },
"Oranges5": {classes:5,
                 fill:[0xfeedde, 0xfdb385, 0xfd8d3c, 0xe6550d, 0xa63603],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3]
    },
"Reds5": {classes:5,
                 fill:[0xfee5d9, 0xfcae91, 0xfb6a4a, 0xde2d26, 0xa50f15],
                 stroke:[0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3, 0xd3d3d3]
    }
};

function createBucketColorStyle(
colorName, colorSeries, rangeName, useGradient)
{
   var theBucketStyle;
   var bucketStyleDef;
   var theStyles = [];
   var theColors = [];
   var aBucket, aStyle, aColor, aRange;
   var numClasses ;

   numClasses = colorSeries[colorName].classes;

   // create Color Styles
   for (var i=0; i < numClasses; i++) 
   {
 
        theStyles[i] = new OM.style.Color(
                     {fill: colorSeries[colorName].fill[i], 
                       stroke:colorSeries[colorName].stroke[i],
                      strokeOpacity: useGradient? 0.25 : 1
                     });
   };

   bucketStyleDef = {
      numClasses : colorSeries[colorName].classes,
//      classification: 'custom',  //since we are supplying all the buckets
//      buckets: theBuckets,
      classification: 'logarithmic',  // use a logarithmic scale 
      styles: theStyles,
      gradient:  useGradient? 'linear' : 'off'
//      gradient:  useGradient? 'radial' : 'off'
    };


   theBucketStyle = new OM.style.BucketStyle(bucketStyleDef);


   return theBucketStyle;
}

function initMap()
{
  //alert("Initialize map view");
  
  // define the map extent and number of zoom levels.
  // The Universe object is similar to the map tile layer configuration
  // It defines the map extent, number of zoom levels, and spatial reference system
  // well-known ones (like web mercator/google/bing or maps.oracle/elocation are predefined
  // The Universe must be defined when there is no underlying map tile layer. 
  // When there is a map tile layer then that defines the map extent, srid, and zoom levels.
     var uni= new OM.universe.Universe(
	{
		srid : 32775,
		bounds : new OM.geometry.Rectangle(
                        -3280000, 170000, 2300000, 3200000, 32775),
		numberOfZoomLevels: 8
	});
  map = new OM.Map(
    	document.getElementById('map'),
    	{
          mapviewerURL: baseURL,
    	  universe:uni
    	}) ;
        
  var navigationPanelBar = new OM.control.NavigationPanelBar();
  map.addMapDecoration(navigationPanelBar);
} // end initMap

function states()
{
  
  //alert("Load and display states");
     layerName = "States";
     
     if(statesLayer) 
     { 
       // states were already visible but the style may have changed
       // so set the style to the currently selected one
       var theData = $('#demo-htmlselect').val();
       setStyle(theData); 
     }
     else 
     {
     // States is a predefined layer in user_sdo_themes
     var  layer2 = new OM.layer.VectorLayer("vLayer2", 
        {
          def:
          {
			type:OM.layer.VectorLayer.TYPE_PREDEFINED, 
			dataSource:"mvdemo", 
			theme:"us_states_bi", 
			url: baseURL,
			loadOnDemand: false
  	      },
		boundingTheme:true
  	  });

   // add drop shadow effect and hover style
   var shadowFilter = new OM.visualfilter.DropShadow({opacity:0.5, color:"#000000", offset:6, radius:10});


   var hoverStyle = new OM.style.Color(
        {stroke:"#838383", strokeThickness:2});

   layer2.setHoverStyle(hoverStyle);
   layer2.setHoverVisualFilter(shadowFilter);

   layer2.enableFeatureHover(true);

   layer2.enableFeatureSelection(false);
   layer2.setLabelsVisible(true);
 
// override predefined rendering style with programmatic one

   var theRenderingStyle = 
     createBucketColorStyle('YlBr5', colorSeries, 'States5', true);

  // specify which attribute is used in determining the bucket (i.e. color) to use for the state
  // It can be an array because the style could be a chart type (pie/bar)
  // which requires multiple attribute columns   
  // Use the STATE.TOTPOP column (aka attribute) value here
   layer2.setRenderingStyle(theRenderingStyle, ["TOTPOP"]);
  
   currentPalette = "YlBr5";

   var stLayerIdx =   map.addLayer(layer2);
   //alert('State Layer Idx = ' + stLayerIdx);

   map.setMapCenter(mpoint);
  
   map.setMapZoomLevel(mapZoom) ;
   
   // display the map
   map.init() ;

   statesLayer=layer2;

   // add rt-click event listener to show counties for the state
   layer2.addListener(OM.event.MouseEvent.MOUSE_RIGHT_CLICK,stateRtClick);
   } // end if 

} // end states

function setStyle(styleName) 
{
  // alert("Selected Style = " + styleName);

  // there may be a counties layer also displayed.
  // that wll have different bucket ranges so create 
  // one style for states and one for counties
  var newRenderingStyle = null; 
  if (layerName === "States") 
  {
    if(/3/.test(styleName)) 
    {
     newRenderingStyle = 
     createBucketColorStyle(styleName, colorSeries, 'States3', false);
	 currentStyle = 
	 createBucketColorStyle(styleName, colorSeries, 'Counties3', false);
    }
    else 
    {
     newRenderingStyle = 
     createBucketColorStyle(styleName, colorSeries, 'States5', false);
	 currentStyle = 
	 createBucketColorStyle(styleName, colorSeries, 'Counties5', false);
    }   
    statesLayer.setRenderingStyle(newRenderingStyle, ["TOTPOP"]);
	if (stateCountyLayer)
	 stateCountyLayer.setRenderingStyle(currentStyle, ["TOTPOP"]);
  }
} // end setStyle

function stateRtClick(evt){
  var foi = evt.feature;
  //alert('Rt-Click on State: ' + foi.attributes['_label_'] + 
  //      ' with pop ' + foi.attributes['TOTPOP']);

  // display another layer with counties info 

  // layer may change on each rt-click so create and add each time.
  var countyByState = null ;
  // the _label_ attribute of a feature in this case is the state abbreviation
  // we will use that to query and get the counties for a state
  var sqlText =
"select totpop,geom32775 from counties_32775_moved where state_abrv="+
      "'"+foi.getAttributeValue('_label_')+"'";


// alert(sqlText);

  if (currentStyle === null)
    currentStyle = 
     createBucketColorStyle('YlBr5', colorSeries, 'Counties5', false);
  /* try a simple style instead   
    new OM.style.ColorStyle(
		   {
                      stroke: "#B8F4FF",
		      fill: "#18E5F4",
                      fillOpacity:0
	           }
     );
   */
  // remove existing layer if any
  if(stateCountyLayer) 
    map.removeLayer(stateCountyLayer);

  countyByState = new OM.layer.VectorLayer("stCountyLayer", 
                  {def:{type:OM.layer.VectorLayer.TYPE_JDBC,
                   dataSource:"mvdemo",
                   sql:sqlText,
                   url:baseURL}});			   
//                   url:baseURL},
//                   renderingStyle:currentStyle});

  countyByState.setVisible(true);
  // specify which attribute is used in determining the bucket (i.e. color) to use for the state
  countyByState.setRenderingStyle(currentStyle, ["TOTPOP"]);

   var ctLayerIdx =   map.addLayer(countyByState);
   // alert('County Layer Idx = ' + ctLayerIdx);

  //map.addLayer(countyByState);
  stateCountyLayer = countyByState;
} // end stateRtClick

function useSelectedColorScheme(theColorScheme)
{
   if(map) 
   {
      // code to update renderStyle goes here
	  //alert('will try to change render style');
	  setStyle(theColorScheme);
   }
   else
   {
    // do nothing 
   }
}

</script>
</head>

<body bgcolor="#b4c5cc" style="height:100%;font-family:Arial,Helvetica,Verdana">

<h3 align="center">State population thematic map </h3>
<div id="demo" style="position:absolute; left:68%; top:44px; width:28%; height:100%">
<HR/>
<p/>
Choose Color Scheme:
<select id="demo-htmlselect">
<option value="YlBl3">
YellowBlue3</option>
<option value="YlBr3">
YellowBrown3</option>
<option value="YlBl5">
YellowBlue5</option>
<option value="YlBr5" selected="selected">
YellowBrown5</option>
<option value="Blues5">
Blues</option>
<option value="Greens5">
Greens</option>
<option value="Greys5">
Greys</option>
<option value="Oranges5">
Oranges</option>
<option value="Purples5">
Purples</option>
<option value="Reds5">
Reds</option>
</select>
<p/>

</div>
<div id="map" style="position:absolute; left:10px; top:50px; width:65%; height:75%; background-color:#778f99"></div>
<div style="position:absolute;top:85%; left:10px;width:98%" class="noprint">
<HR/>
<p> Note: This demo uses HTML5 Canvas and requires IE9+, Firefox 10+, or Chrome. No map will show up in IE8 or earlier.
</p>
</div>
</body>
</html>


Wednesday Jun 19, 2013

Upcoming MapViewer webinar (on V2/html5 API) June 27th 11AM ET

This is a repeat of LJ's Spatial User conference session on MapViewer application development. Will cover the following:

- Intro to the HTML5 API

- Templates

If you're interested contact us via email or this blog

Monday Jun 10, 2013

Another sample using the V2 API (but with json files)

In this example we'll show how to display content from a json file on a background map tile layer. So the interactive (vector layer) content is from a file (or datapack) rather a database instance.

The sample application displays lines from USA (DC) to (capitals of) other countries color coded by the number of US visitors to that country in 2009, as shown in the screenshot below.

The data is stored, and read, from a json file which looks something like:

{"type": "FeatureCollection",
  "collectionName": "theme0",
 "srs": 8307,
  "geodetic": true,
  "bbox": [-180, -41.28054, 180,88.93291],
  "attr_names": ["COUNTRY_CODE","COUNTRY","NUM_VISITORS"],
  "attr_types": ["string","string","double"],
  "features": [{"type": "Feature","_id": "MEX",
                    "geometry": {"type": "LineString",
                                      "coordinates": [-77.03201,38.88951,-77.21086,38.77556, ... ]},
  properties": {"COUNTRY_CODE": "MEX","COUNTRY": "MEXICO","NUM_VISITORS": "1945000"}
 }, ... 

The attr_name and attr_types is a extension of the geojson format used for Mapviewer specific reasons.

Broadly speaking, the application code does the following:

Sets up the client map object.
Sets the url for the mapviewer instance and the resources (images for UI components) it needs.
Adds a tile layer.
Adds a country layer.
Adds a layer for visitors from US to other countires (flows layer).
Sets up the color scheme for the flows layer.
Sets up the mouseover interaction and tooltips.

The code is

<!DOCTYPE html>
<html>
  <head>
    <title>Number of US visitors to abroad in 2009</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="/mvdemo/gv.js" type="text/javascript"></script>
    <script>
      document.write('<'+'script src="'+MV.gv.mapviewer_baseURL+
      '/jslib/v2/oraclemapsv2.js"'+' type="text/javascript"><'+'/script>');
    </script>
    <script language="JavaScript" type="text/javascript">
      OM.gv.proxyEnabled =false;
      OM.gv.setResourcePath(MV.gv.mapviewer_baseURL+"/jslib/v2/images/");

      var map = null;
      var flowsLayer = null;
      var countriesLayer = null;
 
      $(document).ready(function()
      {        
        var baseURL  = MV.gv.mapviewer_baseURL;
        var center = new OM.geometry.Point(20,30,8307); 
        map = new OM.Map(document.getElementById('map'),
        {mapviewerURL: baseURL}) ;
                
        var tilelayer = new OM.layer.ElocationTileLayer("oracle.maps");
        map.addLayer(tilelayer) ;  
        
        
        countriesLayer = new OM.layer.VectorLayer("countries",
        {
          def:{
            type:OM.layer.VectorLayer.TYPE_DATAPACK,
            url:"/mvdemo/datapacks/world_countries.json"
          }
        }
      );
        
        var colorStyle = new OM.style.Color({"stroke":"#cc9999",
          strokeThickness:1, strokeOpacity:0.8});
        countriesLayer.setRenderingStyle(colorStyle);
        countriesLayer.enableInfoWindow(false);
        countriesLayer.enableFeatureSelection(true);
        countriesLayer.setSelectStyle(new OM.style.Color(
                       {fill:"#ff0000", fillOpacity:0.8,stroke:"#cc9999", 
                        strokeThickness:4, strokeOpacity:0.5}))
        map.addLayer(countriesLayer);
        
        flowsLayer = new OM.layer.VectorLayer("flows", 
        {
          def:{
            type:OM.layer.VectorLayer.TYPE_DATAPACK, 
             url:"usa_visitors_geodetic.json"
          }
        });          
        flowsLayer.addListener(OM.event.MouseEvent.MOUSE_OUT, hideCountry);
        flowsLayer.addListener(OM.event.MouseEvent.MOUSE_OVER, showCountry);
       
        var hoverStyle = new OM.style.Color({fill:"#ffffff"});
        flowsLayer.setBringToTopOnMouseOver(false);
        flowsLayer.setToolTipCustomizer(getTooltip);
        flowsLayer.enableInfoWindow(false);
        flowsLayer.enableFeatureHover(true);
        flowsLayer.setHoverStyle(hoverStyle);
        
        setupFlowStyles(flowsLayer);
        map.addLayer(flowsLayer);
        
        map.setMapCenter( center );
        map.setMapZoomLevel(2) ;
        map.init() ;
      });
      
      function getTooltip(feature)
      {
        return feature.getAttributes()["COUNTRY"]+", "+feature.getAttributes()["NUM_VISITORS"];
      }
      
      function setupFlowStyles(layer)
      {
        var lines = [];
        var fillColors = 
        // 10 color multihue sequential OrRd
//['#FFF9F2','#FFF7EC','#FEE8C8','#FDD49E','#FDBB84','#FC8D59','#EF6548','#D7301F','#B30000','#7F0000'];
        // 10 color qualitative paired
['#A6CEE3','#B2DF8A','#FB9A99','#FDBF6F','#CAB2D6','#FF7F00','#1F78B4',
'#6A3D9A','#E31A1C','#33A02C'];
        for(var i=0; i<10; i++)
        {
          var lineStyle = new OM.style.Line({fillWidth:6, fill:fillColors[i], 
                                             strokeThickness:1, stroke:fillColors[i]});
          lines[i] = lineStyle;
        }
        
        var bucketStyle = new OM.style.BucketStyle(
        {
          styles: lines,
          numClasses:10, 
          classification:'logarithmic',  
          defaultStyle: lines[0]
        });
        
        layer.setRenderingStyle(bucketStyle, ["NUM_VISITORS"]);
        
      }
     
      function showCountry(evt)
      {
        var feature = evt.feature;
        var selectedFeature;
        var destFeature = countriesLayer.getFeature(feature.id);
        if (destFeature)
        {
          selectedFeature=countriesLayer.selectFeature(destFeature);
          //countriesLayer.bringForward();
          document.getElementById("text").innerHTML = "# of visitors from USA to "+ 
          feature.getAttributes()["COUNTRY"] + " = " + 
          feature.getAttributes()["NUM_VISITORS"];
        }
                
      }

      function hideCountry(evt)
      {
        var feature = evt.feature;
        var selectedFeature;
        var destFeature = countriesLayer.getFeature(feature.id);
        if (destFeature)
        {
          selectedFeature = countriesLayer.deselectFeature(destFeature);
          //countriesLayer.sendBackward();
        }
      }
    </script>       
  </head>
  <body>
    <DIV id="map" style="width:99%;height:94%"></DIV>
    <span id="text">Country: </span>
  </body>
</html>

There are two vector layers. The flows layers is the number of visitors from the US while the countries layer (country boundary) is used to highlight the destination country on a mouse-over.

Now let's go through various code snippets.

The setResourcePath() method is used to tell the client lib where the images and icons, for the various UI components such as the navigation panel, can be found.

After setting the initial map center and background tile layer (oracle.maps) we add the countries vector layer from a json file (OM.layer.VectorLayer.TYPE_DATAPACK).

        countriesLayer = new OM.layer.VectorLayer("countries",
        {
          def:{
            type:OM.layer.VectorLayer.TYPE_DATAPACK,
            url:"/mvdemo/datapacks/world_countries.json"
          }
        }
      );

Then we set up it rendering (line) and selection (red color fill) styles. And similarly the flows layer,

       flowsLayer = new OM.layer.VectorLayer("flows", 
        {
          def:{
            type:OM.layer.VectorLayer.TYPE_DATAPACK, 
            // json file is in same directory as the html (sample code) file  
            url:"usa_visitors_geodetic.json"
          }
        });          

with listener for mouse over and mouse out to handle the highlighting and updating the message area.

        flowsLayer.addListener(OM.event.MouseEvent.MOUSE_OUT, hideCountry);
        flowsLayer.addListener(OM.event.MouseEvent.MOUSE_OVER, showCountry);

Next we set up the hover style, enable info-windows, and the advanced styles for the layer itself. The advanced style is defined and used in setupFlowStyles(flowsLayer) which defines 10 line styles of the specified colors, and then a bucket style using the line styles and a built-in classification scheme.

      function setupFlowStyles(layer)
      {
        var lines = [];
        // colors from colorbrewer2.org 
        var fillColors = 
        // 10 color multihue sequential OrRd
//['#FFF9F2','#FFF7EC','#FEE8C8','#FDD49E','#FDBB84','#FC8D59','#EF6548','#D7301F','#B30000','#7F0000'];
        // 10 color qualitative paired
['#A6CEE3','#B2DF8A','#FB9A99','#FDBF6F','#CAB2D6','#FF7F00','#1F78B4','#6A3D9A',
'#E31A1C','#33A02C'];
        for(var i=0; i<10; i++)
        {
          var lineStyle = new OM.style.Line({fillWidth:6, fill:fillColors[i], 
                                             strokeThickness:1, stroke:fillColors[i]});
          lines[i] = lineStyle;
        }
        
        var bucketStyle = new OM.style.BucketStyle(
        {
          styles: lines,
          numClasses:10, 
          classification:'logarithmic',  //built-in scheme 
          defaultStyle: lines[0]
        });
        
        layer.setRenderingStyle(bucketStyle, ["NUM_VISITORS"]);
        
      }

The setRenderingStyle specifies the bucketStyle to use and the attribute column whose value determines the bucket or style for a given feature.

Lastly, the event listeners showCountry and hideCountry highlight and de-highlight the destination country. The id attribute of a flowsLayer feature is the country code (e.g. "_id": "MEX") and this is also the id column in the countries layer. Since the feature itself is passed in to mouse-over event handler we can use its id to fetch, and highlight, the destination country from the countries layer.

This is done in the showCountry() method

 

      function showCountry(evt)
      {
        var feature = evt.feature;
        var selectedFeature;
        var destFeature = countriesLayer.getFeature(feature.id);
        if (destFeature)
        {
          selectedFeature=countriesLayer.selectFeature(destFeature);
          //update the message area
          document.getElementById("text").innerHTML = "# of visitors from USA to "
          + feature.getAttributes()["COUNTRY"] + " = " + 
          feature.getAttributes()["NUM_VISITORS"];
        }              
      }



MapViewer 11.1.1.7.1 new config settings for vector layers

In 11.1.1.7.1 the data server which sends vector layers (theme-based FOI) to the client is restricted by default. The config file mds.xml (located in the same directory as mapviewerConfig.xml) has to be updated to allow the data server to access and serve up layers from desired data sources.

The relevant readme.txt entry is

- Map Data Server (MDS), the vector theme streaming server of MapViewer, is now in 
  lock-down mode by default and will not allow themes to be streamed to a client unless 
  explicitly configured otherwise. You will need to manually edit the 
  WEB-INF/conf/mds.xml file to control which data sources and which themes can be 
  streamed to a HTML5 application client. 
  A MapViewer restart is required for the changes to take effect.

OBIEE 11.1.1.7 MapViewer error when previewing tile layers

In OBIEE 11.1.1.7 (with MapViewer 11.1.1.7 deployed in Weblogic) you may see an 500 - internal server error when previewing map tile layers in the MapViewer manage map tile layers admin page.

If so you need to modify the web.xml as described in the readme.

On certain WLS domains (mostly when ADF run-time library is deployed), you
  may see errors when trying to preview tile layers. To fix this issue, modify
the weblogic.xml descriptor file found in mapviewer.ear's WEB-INF/ folder, and
uncomment the entry for the jstl 1.2 library as shown below (note the jsf
section should remain commented-out):

<library-ref>
    <library-name>jstl</library-name>
    <specification-version>1.2</specification-version>
  </library-ref>

<!--
<library-ref>
    <library-name>jsf</library-name>
    <specification-version>2.0</specification-version>
    <exact-match>false</exact-match>
</library-ref>
-->

If you upgraded obiee from a previous 11.1.1.x release you may see this error anytime you access the mapviewer admin pages. The fix is to redeploy mapviewer.


Thursday Jun 06, 2013

A live MapViewer instance with HTML5 demos and tutorials

Hi,

  You can now access a public MapViewer 11.1.1.7.1 server and the companion Samples App using the latest MVDEMO sample data set here:

 A few notable links:

 

You can also find online Java and JS API docs under the sample  app (http://slc02okf.oracle.com/mvdemo) and many other demos.

Thanks

LJ 


 

About

Official blog for Oracle FMW MapViewer and related products.

Search

Categories
Archives
« June 2013 »
SunMonTueWedThuFriSat
      
1
2
3
4
5
7
8
9
11
12
13
14
15
16
17
18
20
21
22
23
24
25
27
28
29
30
      
Today