A sample application using the V2 API

This entry describes a simple Oracle Maps V2 application which displays a predefined vector layer (aka theme) on a tile layer. The vector layer is called 'Customers' and the tile layer is named 'demo_map'.  The vector layer is based on a database table named CUSTOMERS and it's definition (in user_sdo_themes) is as follows:

SQL> select base_table, geometry_column, styling_rules from user_sdo_themes
  2  where name='CUSTOMERS';

BASE_TABLE
----------------------------------------------------------------
GEOMETRY_COLUMN
-------------------------------------------------------------------------------
STYLING_RULES
-------------------------------------------------------------------------------
CUSTOMERS
LOCATION
<?xml version="1.0" standalone="yes"?>
<styling_rules key_column="NAME">
  <hidden_info>
    <field column="NAME" name="Name"/>
    <field column="CITY" name="City"/>
    <field column="SALES" name="Sales"/>
    <field column="ACCOUNT_MGR" name="Account Manager"/>
  </hidden_info>
  <rule>
    <features style="M.SMALL TRIANGLE"> </features>
    <label column="NAME" style="T.RED STREET"> 1 </label>
  </rule>
</styling_rules>

 The above means that the predefined vector layer will select the name, city, sales, account_mgr, and location columns from the customers table and render the location using the marker style named "M.SMALL TRIANGLE" and label the locations (when possible) with the value of the NAME column using the text styles "T.RED STREET".

The end result will look something like the screenshot below.


The source code for the sample application is:

<!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>A sample Oracle Maps V2 application</TITLE>
<script language="Javascript" src="/mapviewer/jslib/v2/oraclemapsv2.js"></script>
<script language=javascript>
var customersLayer=null;

$(document).ready(function() {
  var baseURL  = "http://"+document.location.host+"/mapviewer";
  // Create an OM.Map instance to display the map
  var mapview = new OM.Map(document.getElementById("map"), 
                           {
                             mapviewerURL:baseURL
                           });
  // Add a map tile layer as background.
  var tileLayer = new OM.layer.TileLayer(
        "baseMap", 
        {
            dataSource:"mvdemo", 
            tileLayer:"demo_map", 
            tileServerURL:baseURL+"/mcserver"
        });
  mapview.addLayer(tileLayer);
  // Set the initial map center and zoom level
  var mapCenterLon = -122.45;
  var mapCenterLat = 37.7706;
  var mapZoom = 4;
  var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,8307);
  mapview.setMapCenter(mpoint);   
  mapview.setMapZoomLevel(mapZoom);    
  // Add a theme-based FOI layer to display customers on the map
  customersLayer = new OM.layer.VectorLayer("customers", 
        {
            def:
                {
                type:OM.layer.VectorLayer.TYPE_PREDEFINED, 
                dataSource:"mvdemo", theme:"customers", 
                url: baseURL,
                loadOnDemand: false
                }
        });
  mapview.addLayer(customersLayer);

  // Add a navigation panel on the right side of the map
  var navigationPanelBar = new OM.control.NavigationPanelBar();
  navigationPanelBar.setStyle({backgroundColor:"#FFFFFF",buttonColor:"#008000",size:12});
  mapview.addMapDecoration(navigationPanelBar);
  // Add a scale bar
  var mapScaleBar = new OM.control.ScaleBar();
  mapview.addMapDecoration(mapScaleBar);
  // Display the map.
  // Note: Change from V1. In V2 initialization and initial display is done just once
  mapview.init();
});

function setLayerVisible(checkBox)
{
  // Show the customers vector layer if the check box is checked and
  // hide it otherwise.
  if(checkBox.checked)
    customersLayer.setVisible(true) ;
  else
    customersLayer.setVisible(false);
}
</script>
</head>

<body>
<h2>A Sample Oracle Maps V2 Application</h2>
<INPUT TYPE="checkbox" onclick="setLayerVisible(this)" checked/>Show customers
<div id="map" style="width: 600px; height: 500px"></div> 
</body>
</html>

The above code has an html portion and some javscript code which uses the Oracle Maps API.

The html portion consists of a header, a checkbox to determine whether the customers layer is displayed or hidden, and a DIV 600 pixels in width and 500 pixels in height.

The javascript code first loads the oraclemapsv2 library

<script language="Javascript" src="/mapviewer/jslib/v2/oraclemapsv2.js"></script>

 and since oraclemapsv2.js also includes and loads jquery (1.7.2) we can now use the jquery object (or its alias $) and its methods within our code. So we use the ready() method to specify the function, containing our OracleMaps code, to execute when the DOM is ready. The OracleMaps code must do the following:

Create an OM.Map object and associate it with the HTML DIV where the map will be displayed.
Create one or more tile layers (i.e. the background map)
Set a map center and zoom level
Optionally, add one or more interactive vector layers
Optionally, add some map controls and decorations such as a navigation panel and scale bar
Initialize and display the map

The first step is done in the following code snippet:

 

  var baseURL  = "http://"+document.location.host+"/mapviewer";
  // Create an OM.Map instance to display the map
  var mapview = new OM.Map(document.getElementById("map"), 
                           {
                             mapviewerURL:baseURL
                           });

An OM.Map object needs to know where to display a map and which mapviewer instance will handle its requests. So there are two parameters, the "map" DIV and the mapviewerURL.
The next step is to define the background map, or the tile layers.

 

  // Add a map tile layer as background.
  var tileLayer = new OM.layer.TileLayer(
        "baseMap", 
        {
            dataSource:"mvdemo", 
            tileLayer:"demo_map", 
            tileServerURL:baseURL+"/mcserver"
        });
  mapview.addLayer(tileLayer);

A tile layer comes from a specified datasource, has a unique name, and is rendered by a specified mapviewer instance. Now we need to specify the initial map center and zoom level.

  // Set the initial map center and zoom level
  var mapCenterLon = -122.45;
  var mapCenterLat = 37.7706;
  var mapZoom = 4;
  var mpoint = new OM.geometry.Point(mapCenterLon,mapCenterLat,8307);
  mapview.setMapCenter(mpoint);   
  mapview.setMapZoomLevel(mapZoom);    

The Point constructor takes a X, Y and an SRID. In this case it is 8307 which is the SRID for spatial reference system commonly used for GPS devices.

SQL> select cs_name from cs_srs where srid=8307;
CS_NAME
--------------------------------------------------------------------------------
Longitude / Latitude (WGS 84)

Once that's done we add an interactive vector layer.

 

  // Add a vector(theme-based FOI) layer to display customers on the map
  customersLayer = new OM.layer.VectorLayer("customers", 
        {
            def:
                {
                type:OM.layer.VectorLayer.TYPE_PREDEFINED, 
                dataSource:"mvdemo", theme:"customers", 
                url: baseURL,
                loadOnDemand: false
                }
        });
  mapview.addLayer(customersLayer);

Like a tile layer, a predefined vector layer comes from a specified datasource, has a unique name, and is rendered by a specified mapviewer instance.

Next we add some map decorations and controls and finally initialize and display the map.

  // Add a navigation panel on the right side of the map
  var navigationPanelBar = new OM.control.NavigationPanelBar();
  navigationPanelBar.setStyle({backgroundColor:"#FFFFFF",buttonColor:"#008000",size:12});
  mapview.addMapDecoration(navigationPanelBar);
  
// Add a scale bar
  var mapScaleBar = new OM.control.ScaleBar();
  mapview.addMapDecoration(mapScaleBar);

  // Display the map.
  // Note: Change from V1. In V2 initialization and initial display is done just once
  mapview.init();

The last piece is the function which toggles the display of the Customers layer.

 

function setLayerVisible(checkBox)
{
  // Show the customers vector layer if the check box is checked and
  // hide it otherwise.
  if(checkBox.checked)
    customersLayer.setVisible(true) ;
  else
    customersLayer.setVisible(false);
}
 
  

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Official blog for Oracle FMW MapViewer and related products.

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today