IT-eye

After completing a migration of a GIS Application to 11g database i was wondering how difficult it could be to integrate Oracle Maps on a APEX page.

I have installed the following components:

• Oracle 11g Database
• OC4J Container 10.1.3.5.0
• Oracle Fusion Middleware MapViewer 11.1.1.2
• Oracle Spatial Demo Data Set

upgraded the SQL Developer to version 2.1 and installed the GeoRaptor plugin to visualize oracle spatial data

Step 1: “Validate Demo Data and working of GeoRaptor”
Step 2: “Validate Working of MapViewer jsp client”
Step 3: “Validate Working of MapViewer JavaScript client”
Step 4: “Include the JavaScript client in APEX page”

Step 1 – Validate Demo Data and working of GeoRaptor
After installing the software i tested the working of georaptor if it could visualise the counties supplied in the demo data

Now the data is available in the database we can can configure mapviewer (if not already done after installation).

Step 2 – Validate Working of MapViewer jsp client
Go you the mapviewer application http://[server]:[port]/mapviewer/ in my case: http://oracle11g:8888/mapviewer/. Don’t click on the link. That will send you to the 10g version. Let the redirection preform to enter the 11g application.

Click on the Admin link in the top left and login with oc4jadmin account.

Create a data source to access the demo data.

After defining the data source you can check if the data is available for the application by clicking on the tab ‘Meta Data’

Here you can check what map’s, themes and styles are present in the defined data source. If you specified everthing correct you will see the maps and themes from the demo data.

Now it’s time to show a map on the screen!!

Start the MapViewer jsp client by selecting the Demo tab and click on the link mapclient.

On the following page you have to enter DataSource, BaseMap, X,Y position, Zoom level. After entering the requesten info you click on Submit and you will see the following map:

Step 3 – Validate Working of MapViewer JavaScript client

Enter the flowing url in your browser: http://[server]:[port]/mapviewer/fsmc/omaps.jsp in my case: http://oracle11g:8888/mapviewer/fsmc/omaps.jsp

This application ask again for the datasource and other data to display the map. After suppling the information and pressing the Proceed button you will be presented a map with control buttons to navigate over the map.

Step 4 – Include the JavaScript client in APEX page

Step 4.1 Create page on in you APEX application

Step 4.2 Configure the Page Attributes:
* Header Text
* Body Attribute

Enter the following text in Header Text:

<script language="Javascript"
src="http://oracle11g:8888/mapviewer/fsmc/jslib/oraclemaps.js">
</script>
<script type="text/javascript">
function on_load_mapview()
{
var baseURL = "http://"+"oracle11g:8888"+"/mapviewer";
// Create a MVMapView instance
var mapview = new MVMapView(document.getElementById("map"), baseURL);
// Add a map tile layer
mapview.addMapTileLayer(new MVMapTileLayer("mvdemo.demo_map"));
// Set the initial map center
mapview.setCenter(MVSdoGeometry.createPoint(-120,36));
// Set Zoomlevel
mapview.setZoomLevel(1);
// Add navigation controles
mapview.addNavigationPanel('east');
// Add a scale bar
mapview.addScaleBar();
// Show map
mapview.display();
}
</script>

Here we load the oraclemaps.js for the communication with the MapViewer. Don’t forget to change the url’s to fit with your environment.

Enter the following text in HTML Body Attribute
onload="on_load_mapview()"

This will call the function on_load_mapview() specified in the header of this HTML page.

Step 4.3 Create a HTML region with the following HTML:
<div id="map" style="width: 1200px;height: 600px"></div>
Now your application is ready to run! Hopefully you will have the same result as i have presented below: