Oracle Blog

All things Oracle MapViewer

Friday May 24, 2013

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:

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

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 levelOptionally, add one or more interactive vector layersOptionally, add some map controls and decorations such as a navigation panel and scale barInitialize and display the map

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.

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.