Geertjan's Blog

Integrating Oracle Fusion Middleware MapViewer with Oracle JET

Geertjan Wielenga
Product Manager

There are many map components in the world out there—and I have documented how to integrate several of them in an Oracle JET application, e.g., 3DCityDB, Mapbox, Leaflet, and LuciadRIA, as well as Oracle JET's ojThematicMap component

However, Oracle has its own map component, as described in detail below, which includes the Oracle Maps Javascript library:


Oracle Fusion Middleware MapViewer is a development toolkit for incorporating interactive maps and spatial analyses. It is optimized for use with Oracle Spatial and Graph. (The related Oracle blog is blogs.oracle.com/oracle_maps_blog.) Here below is how it looks when integrated into an Oracle JET application, with many thanks to my colleague Jayant Sharma, who made it happen and provided the instructions that follow, which I have successfully used and I can report that it works.

Instructions for integrating Oracle Fusion Middleware MapViewer with Oracle JET, assuming you have set up an Oracle JET application, e.g., via the Oracle JET QuickStart Basic template:

  1. Add the Oracle Maps V2 kit into js/libs as a folder named 'oraclemaps'. The kit can be downloaded from here and specifically here: http://download.oracle.com/otn/other/mapviewer/12c/12211/v2_122110_full.zip
  2. Modify "main.js" to include the various Oracle map libraries, in the requires.config "path" and "shim" sections. I.e., add these entries in the "paths" section:
    //File paths for Oracle Maps HTML5 API
    'omapsv2-hammer': 'libs/oraclemaps/v2/jquery/jquery.hammer-full.min',
    'omapsv2-i18n-properties': 'libs/oraclemaps/v2/jquery/jquery.i18n.properties-min-1.0.9',
    'omapsv2-mousewheel.min': 'libs/oraclemaps/v2/jquery/jquery.mousewheel.min',
    'omapsv2-rtree': 'libs/oraclemaps/v2/rtree/rtree-min',
    'omapsv2-fortknox': 'libs/oraclemaps/v2/fortknox-libs/fortknox-canvas',        
    'omapsv2_core': 'libs/oraclemaps/v2/oraclemapsv2_core'

    ...and these in the "shim" section:

    //Oracle Maps HTML5 API dependencies
    'omapsv2-i18n-properties':  ['jquery'],
    'omapsv2-hammer': ['jquery'],
    'omapsv2-mousewheel.min' : ['jquery'],     
    'omapsv2_core': {
       deps: ['jquery','hammerjs','omapsv2-fortknox','omapsv2-rtree','omapsv2-hammer','omapsv2-i18n-properties','omapsv2-mousewheel.min'],
       exports: 'OM'
  3. Modify the view of an Oracle JET module, e.g., "home.html", in the way it's done for the MapBox example, i.e., rewrite "home.html" to be the following and include "css/styles.css" containing "#map { width:100%; height:100%; }": 
    <STYLE TYPE="text/css">
      @import url(css/styles.css);
    <div id='map'></div>
  4. Modify the viewModel of an Oracle JET module, e.g., "home.js", to be as follows, and read the comments below to understand the code:
    define(['ojs/ojcore', 'knockout', 'omapsv2_core'],
        function (oj, ko) {
            function mainContentViewModel() {
                var self = this;
                self.handleAttached = function () {
                    /* */
                    if (OM !== undefined) {//Where to load Oracle Maps HTML5 API resource files (fonts, css and icons et al):
                        OM.gv.setResourcePath("js/libs/oraclemaps/v2");//Default http method when fetching remote geospatial contents:
                    } else
                        console.log('OM not loaded');
                    var X = -77;
                    var Y = 38.9;
                    var initialZoom = 11;//This function adds various map controls to the provided OM.Map instance:
                    var addMapControls = function (myMap)
                    {//defines various properties for the navigation control:
                        var navConfig = {
                            orientation: 1,
                            style: OM.control.NavigationPanelBar.STYLE_ZOOM_BUTTONS_ONLY,
                            anchorPosition: 1
                        };//creates the navigation control:
                        var navigationControl = new OM.control.NavigationPanelBar(navConfig);// navigation control (and other map controls) are typically added
                        //to the map as map decorations:
                        myMap.addMapDecoration(navigationControl);//defines the basic properties for the map scale bars:
                        var sbConfig = {
                            format: "BOTH",
                            anchorPosition: 4,
                            endMarks: false
                        };//defines the display style of the scale bars:
                        var sbStyle = {
                            thickness: 5,
                            color: '#257db3',
                            shadow: true
                        };//creates the actual scale bar instance and sets the display style:
                        var scaleBar = new OM.control.ScaleBar(sbConfig);
                        scaleBar.setStyle(sbStyle);//adds the scale bar to the map as another map decoration:
                    var showMap = function ()
                    {//This is the DIV that will display the map; it needs to be passed into
                        //the map instance:
                        var mapDiv = document.getElementById('map');
                        if (!mapDiv)
                            console.log("Map container DIV not found!");
                        }//Creates a new map instance. Notice we are not supplying a Universe
                        //like in helloworld.js, since the universe will be defined when we
                        //add the tile layer to the map. Every tile layer includes its own
                        //universe definition as part of the tile layer's configuration:
                        var map = new OM.Map(mapDiv, {mapviewerURL: ''});//This is how we create an Oracle eLocation tile layer: by creating
                        //a new instance of the OM.layer.ElocationTileLayer class. Check
                        //the <a href="https://apidoc/index.html">API Doc</a> for other built-in tile 
                        //layers such as Bing maps:
                        var tileLayer = new OM.layer.ElocationTileLayer("elocation");//Adds the tile layer to the map:
                        map.addLayer(tileLayer);//creates a point object located at the given longitude and latitude: 
                        var point = new OM.geometry.Point(X, Y);//Adds various map controls to the map:
                        //console.log('adding mapControls');
                        addMapControls(map);// set the initial map zoom level and center (same as the location marker):
                        map.setMapZoomLevel(initialZoom);//Now we can complete the initialization of the map. You must
                        //only call this method once.  Note however map layers can
                        //be added even after calling this method:
                    }; //showMap
                    // console.log('call showMap');
                    /*  */
                }; // handleAttached
            return new mainContentViewModel();

That's it. Run the project and you'll see the same as in the screenshot above.

Join the discussion

Comments ( 2 )
  • Randheer Friday, September 30, 2016

    Hi Geertjan,

    Thanks for this really helpful blog. I am able to get the Oracle Map rendered in my application successfully.

    I also tried creating VectorLayer.TYPE_DATAPACK layer type and I am able to plot customer locations, contained in a JSON file on the map.

    Thank you so much!!


  • Randheer Singh Wednesday, July 12, 2017
    Hi Geertjan,

    I updated my Oracle JET version from 2.0 to 3.1.

    I followed all above steps, however now I am getting an error.
    home.js:19 Uncaught (in promise) ReferenceError: OM is not defined

    the same solution was working fine in JET library 2.0
    Is there any change in the approach?
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.