Creating a thematic map
- by jsharma
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.
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="> 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>
