Tutorial: Learning Oracle Maps by Example

API changes since MapViewer Early Access 1 release

If you have used the JavaScript API that comes with the 11g Early Access 1 release of MapViewer, you may notice a few changes to the API. We apologize if this causes any inconvenience, but we are confident that the latest API is cleaner, better documented and will be very close to the production API. The main changes are:

All class names are now prefixed with MV. For instance, the FOI class has been renamed to MVFOI. MapView is now MVMapView.

When setting the map center, it is now recommended that you construct the center point as an instance of MVSdoGeometry before setting it on the MVMapView.

Quite a few classes had their function names and parameters reviewed and changed up.
Many new methods and quite a few new classes have been added since Early Access 1.

Writing an Oracle Maps application

The essential steps to building any Oracle Maps application or mashup using the JavaScript API are:

Loading the Oracle Maps JavaScript library in the beginning of a web page

Placing an HTML DIV component that serves as the master map container on the page

Writing custom JavaScript code to set up initial map contents (base-map, FOI layers, etc) and implement application specific logic.

Step 1 above is achieved by the following code snippet:

<script language="Javascript" src="/mapviewer/fsmc/jslib/oraclemaps.js"></script>

This loads the Oracle Maps API library, a single file named oraclemaps.js, from the MapViewer server into the browser.

Step 2 is achieved by inserting a standard DIV element in your page, such as below:

<div id="map" style="left:1%; top:1%; width:99%; height:99%"></div>

Note that this DIV serves as the master map area. It can be placed anywhere on your web page. The unique id ("map" in this case) sould be passed to the Oracle Maps library so that it knows where to display the various map contents.

Step 3 is where the application logic is coded. For instance you can set up the initial map contents to be displayed. You may also provide custom event handling for interesting events fired by the Oracle Maps client. The following is just a simple example. It displays a base map that is rendered by the MapViewer server. A navigation bar is also displayed so you can zoom or pan the map. You can always pan the map by dragging it around.

<script language=javascript>
function showMap()
{

var baseURL = "http://"+document.location.host+"/mapviewer";
var mapCenterLon = -122.45;
var mapCenterLat = 37.6706;
var mpoint = MVSdoGeometry.createPoint(mapCenterLon,mapCenterLat,8307);
var mapZoom = 5;

var mapview = new MVMapView(document.getElementById("map"), baseURL);
mapview.addBaseMapLayer(new MVBaseMap("mvdemo.demo_map"));
mapview.setCenter(mpoint);
mapview.setZoomLevel(mapZoom);
mapview.addNavigationPanel("EAST");
mapview.display();

}
</script>

Note that the variable baseURL in the above code points to the URL of a running MapViewer instance. The client library needs to communicate with this MapViewer instance in order to function properly. Oracle Maps client can however, fetch map contents (such as base map tiles or FOIs) from other MapViewer servers, even ones running on a different network domain.

Finally, to tie it all together, the browser needs to invoke the showMap() function in order for the above code to be executed. This is commonly achieved by using the onLoad event of the HTML body, as shown below.

<body onLoad="javascript:showMap();">