16 October 2014

How to make use of maps in Forms 11g?

Author: Cătălin Bulancea

This blog posting is about how easy it is to integrate your existing or new Oracle Forms 11g applications with map visualization and navigation capabilities. Oracle FMW MapViewer is the key to that since it provides Oracle Maps with JavaScript API.

For all the Oracle Forms users out there…have you wondered lately what are the key features of Oracle Forms 11g?

Of course, you can read it all from here or here. With the increased utilization of Java, web technologies (HTML5) and integration strategies, Oracle Forms 11g tries to keep up with the New. And I feel it succeeds in doing just that!

What I would like to focus on this topic is one of the most important features: Oracle Forms 11g is JavaScript enabled! This new functionality makes it possible to execute JavaScript in the page in which the Forms applet is embedded.

JavaScript can be used to integrate Forms with any application that provides a JavaScript API, or simply with custom HTML/ADF pages that embed JavaScript functionality.

While integrating Forms with HTML controls is nice, the integration of Oracle Forms with a map displays a spectacular result! It’s time for the main character in this play to step on the stage: Oracle Fusion Middleware MapViewer! See more here.

Oracle FMW MapViewer currently provides 2 JavaScript APIs (the newer one supports HTML 5) for incorporating highly interactive maps and spatial analysis. The integration with Oracle Forms is done via one of these JavaScript APIs.

What would an integrated application look like? Let’s suppose you’re a company with multiple offices that provide different services based on the location and office type. Displaying that info in an HTML table doesn’t look very appealing to the customers, while they get lost in the tons of information.

Why not displaying all the office locations on a map? When a customer clicks on a location, an information window provides all necessary information at the first glance. May be also a thumbnail of an image representing the office, as well as a link to a web resource giving even more information.

How is this done?

First, make sure you have an Oracle Database 11g (11.2.0.3 minimum) with Oracle Spatial or at least Oracle Multimedia (which includes Oracle Locator) installed.

Then, you need to have Oracle Forms 11g and install Oracle FMW MapViewer on top of it. Download MapViewer from here and then install the Mapviewer.ear according to the documentation.

Oracle FMW MapViewer comes with a demo application called MVDEMO (please note that this web resource is not assured to be available 24x7) which is a great way to get you started! After importing the MVDEMO sample data into your database, deploy MVDEMO.war onto a WebLogic Server and configure the data source in the MapViewer Administration Console:

<map_data_source name="mvdemo"
            jdbc_host="&ltYOUR DB HOST>"
            jdbc_sid ="&ltDB SID>"
            jdbc_port="&ltDB PORT>"
            jdbc_user="mvdemo"
            jdbc_password="!mvdemo" 
            jdbc_mode="thin"
            number_of_mappers="3"
            allow_jdbc_theme_based_foi="false"
            editable="false"
/>
The samples page will be accessible at this URL: http://formshost:formsport/mvdemo

In Oracle Forms formsweb.cfg configuration file, you add a section as below:

[formsmapviewer]
baseHTMLjpi=jsmap.html
userid=dbuser/dbpass@host:port/SID
form=formsmapviewer.fmx
width=320
height=763
# Config for javascript integration
applet_name=formsmapviewer_applet
enableJavascriptEvent=true
JavaScriptBlocksHeartBeat=true
splashScreen=no
guiMode=3
lookAndFeel=Oracle
colorScheme=blue
Calling your forms application using above section will assure that JavaScript is used. Notice the baseHTMLjpi parameter which takes a custom file built on the template basejpi.htm, called jsmap.html. This file will contain our Forms application applet embedded and all the JavaScript code.

This is how we display the map, centering it at Oracle Munich office:

function showMap() 
{ 
  mapview = new MVMapView(document.getElementById("map"), baseURL);
  mapview.addMapTileLayer(osmBasemap);

  //Oracle Munich office
  var mpoint = MVSdoGeometry.createPoint(11.56, 48.13, 8307);
  mapview.setCenterAndZoomLevel(mpoint,7);

  mapview.addNavigationPanel() ;    
  mapview.display();

  mapview.addCopyRightNote("&2014 Powered by Oracle ©2010 GfK GeoMarketing");
  mapview.addNavigationPanel("EAST");
  mapview.addScaleBar();
}

If you are asking yourselves where does osmBasemap come from, this is a custom map tile layer based on the tile configuration. For more details, check out Jayant's post. The baseURL is the URL where Mapviewer was installed: http://host:port/mapviewer

The map itself is a DIV element in HTML and it can be referenced by its id in JavaScript:

<div id="map" style="left:0px; top:0px; width:1250; height:763"></div>
Last but not least, you need to develop/modify your Forms application in order to "speak" JavaScript. For example, we have a ZoomIn button in Forms that will zoom in the map. The code used to do that is found in the WHEN-BUTTON-PRESSED trigger and it's easy-peasy:
web.javascript_eval_expression('zoomIn();');
web.javascript_eval_expression is a procedure which takes an expression as the argument. This legal JavaScript expression is interpreted in the Web page in which the Forms applet is embedded and in our case is the JavaScript function zoomIn().

Another example is creating a Feature of Interest (FOI) on the map with the longitude and latitude coordinates given inside the Forms application:

web.javascript_eval_expression('createFOI('||:CONTROL.LONG||','||:CONTROL.LAT||', 8307);');
For more information on Oracle Forms and JavaScript integration, read Oracle© Fusion Middleware Forms Services Deployment Guide here and Metalink Note: "A Guide to Integrating JavaScript with Forms&quot (Doc ID 853911.1);.

The Forms application eventually looks like this:

http://formshost:formsport/forms/frmservlet?config=formsmapviewer


Application features used for this demo:
  • Zoom in, zoom out from both map and the Forms application
  • Pan up, down, left, right from both map (navigation panel) and the Forms application
  • Overview map on the right bottom corner with the possibility to move the map
  • Scale bar on the left bottom corner of the map
  • Copyright note on the right bottom corner
  • Features of Interest:
    • When hitting "Create FOI" button an image is created on the map at the longitude and latitude coordinates specified as parameters.
      When clicking the image an Information Window with Oracle is opened and you can navigate to the webpage
    • Hit Remove FOI to delete the feature of interest (needs the id of the FOI)
    • Alternatively, you can create other FOIs by specifying different coordinates
  • Custom themes: (In Germany appear when selecting the checkboxes "On mouse over" the airports or highways, you'll see their name.)
    • Airports and
    • Highways

Feel free to try it out and enhance your Forms application with a nice map.

Any feedback is highly appreciated.

Thanks, Cătălin

10 February 2014

Mitschnitt eines Web-Seminars zum MapViewer 11.1.1.7 mit HTML5 API

Unter dem Titel "Oracle MapViewer 11.1.1.7: Building HTML5 Maps for Web and Mobile Apps"
gibt es den Mitschnitt einer MapViewer Training Session.

http://oukc.oracle.com/static12/opn/login/?t=checkusercookies%7Cr=-1%7Cc=1453384237


Vorausgesetzt wird ein Oracle Technology Network (OTN) Account. Für diesen können Sie sich jederzeit kostenlos registrieren.

Vorgestellt wird darin auch der neue Map Data Editor.
Was ist das?
  • Web-based spatial data editing tool (Java applet)
  • Supports versioned, concurrent editing through editing sessions
  • Supports Oracle Workspace Manager (long transactions)
  • Supports geometry model 
  • Supports WFS-T 
  • All aspects of an editing session are saved in database
(Abb.: MapViewer 11.1.1.7 -Gitter-Darstellung mehrerer voll interaktiver Karten)

14 November 2013

Architektur von MapViewer 11.1.1.7

Ergänzend zu meinem Posting eben will ich hier noch einen Überblick zur Architektur des MapViewers geben.


HTML 5 API von MapViewer 11.1.1.7. nutzen für coole Karten

Im Blogpost vom 25. April 2013 wurde auf die neue Version von Oracle Fusion Middleware MapViewers (und Maps) verwiesen.
Diese kommt mit einer neuen Javascript API daher, welche HTML 5 unterstützt.

Wie für die bisherige API auch, stehen Javascript Reference und jede Menge Tutorials mit Codebeispielen bereit. Darüberhinaus gibt es online verfügbar Beispielanwendungen, welche die neuen HTML 5 Features einsetzen.
Zu finden ist das alles auf dieser extern verfügbaren Seite: http://slc02okf.oracle.com/mvdemo/

Im Detail:

06 September 2013

Mapviewer Update Webcast September 12, 2013 - 11:00AM ET - 17:00h German Time

The Oracle Mapviewer team of Oracle Spatial & Graph will host a webcast with an update of the new MV features on September 12th, 2013:
This webcast will concentrate on the following new MapViewer 11.1.1.7 enhancements:

Join the MapViewer team and learn how these new features  can help you to quickly integrate and visualize business data with maps.  Live Q & A will follow the presentation. 
  • Web-based editor (Java applet) that edits spatial data with workspace and versioning support
  • Templates:  prepackaged map data files that are readily consumed by the new API
  • Support for OGR/GDAL to access 3rd party spatial data sources
Duration: 1 hour

Telephone conference details:
US/Canada Dial-In Number: (855) 227-3163
International Dial-In Number: (213) 784-8014

Toll-Free International Dial-In Numbers
German dial in # 0800 1815 287 
Session Number: 256 954 725
Password: Oracle123


Webcast Details:
Date: September 12, 2013
Time: 11:00am ET -->  17:00h German Time (CEST)
Conference ID: 47402540

Good luck !

25 April 2013

MapViewer 11.1.1.7.0 has been shipped

You might have noticed: MapViewer 11.1.1.7.0 has shipped (as part of FMW PS6).

It's available on support.oracle as Patch # 16589883 https://support.oracle.com/epmos/faces/ui/patch/PatchDetail.jspx?patchId=16589883 

Notable enhancements include:
- V2 of oraclemaps javascript API which depends on, and uses, HTML5 Canvas and SVG for client side rendering of interactive map content.
Requires HTML5 Canvas support in the browser and hence won't work with IE8.
- A web-based spatial data editor (Java applet)
- Support for 3rd party spatial data sources via GDAL/OGR

I haven't had time to test this all.
I am extremely interested in the Java applet for editing...
Have fun ! (oh, sorry, english)

NB: A new site has been launch for Oracle Maps recently -
with a Test Drive for Oracle Maps with the new look and feel.

04 September 2012

Oracle Spatial Conference - Collateral

Eine ganze Reihe interessanter Dokumentationen wurde nach der Oracle Spatial User Conference (im Mai 2012)  veröffentlicht und sind über diese Seite erreichbar.

Speziell die Integration mit OBI EE (Oracle Business Intelligence) wurde in einem umfassenden Vortrag von PM Jayant Sharma (pdf, 14 MB) erläutert und mag für weitere Anwendungsentwicklung nützlich sein. Auch ein sehr ausführlicher Vortrag (106 slides) von Peak Indicators Ltd. hilft weiter bei der Umsetzung.

Hier Screenshot einer Heatmap basierend auf einem WMS in OBI EE:


oder die Kombination von Karte und Liste inkl. "Verschneide"-Möglichkeit...:


und ein gutes Video von KPI Partners, was alles möglich ist (Oracle Maps ab 8:37 min) und wie ein Dashboard erstellt wird (ab 10:00 min):


und  noch beeindruckender mit Hilfe der Oracle Exalytics Lösung am Beispiel einer Airline:

in obigem Video ab 2:00 min diese Routen Analyse


oder "mobile" auf einem iPad:


19 March 2012

ADF: use custom image (eigene Bilder) in MapPointTheme

Ein kurzer Tipp zur Nutzung von "eigenen" Bildern als POI in ADF... dieses Beispiel basiert auf JDeveloper 11.1.2.1.
Als alter Schifffahrtskaufmann hatte ich die Herausforderung, auf einer (Welt-) Karte die Schiffspositionen "meiner" Reederei darzustellen. Ich wollte diese nun nicht mittels "Fähnchen" oder den default "Bubbles" markieren, sondern mit einem "richtigen" Schiff.
Hier zunächst das Ergebnis:


Dazu habe ich eine dvt:mapPointTheme verwendet, welches die Schiffspositionen aus der Datenbank ließt. Standardmäßig wird im dvt:mapPointTheme als "Image"  (wie bei den Oracle Offices in DE zu sehen) der rosa Bubble als InBuilt Image genutzt (es stehen da auch noch weitere 20 zur Auswahl wie Flaggen, Zeichen, usw.).
Dann habe ich mir ein "Containershiff" besorgt... und es in mein Images-Verzeichnis meiner Anwendung hochgeladen (C:\...\JDEV11121\mywork\ADF-GEO\ViewController\public_html\images
Im JDeveloper: ..ViewController - Application Sources - Web-Content - images (evtl. neu zu erstellen).
Für den POI gibt es jetzt unter den DVT Komponenten einen: "dvt:PointStyleItem".



Diese Komponente ziehe ich jetzt auf mein dvt:MapPointTheme;

und setze im Point Style Item IsDefault: auf true and selektiere mein Image aus der Liste.
Fertig !


Dies Beispiel beruht übrigens auf der kleinen Übung in meiner ADF News Session und kommt ebenfalls ohne eigene "Geodaten-Infrastruktur" aus...

16 March 2012

ADF News Session - Geodaten Integration - Recap

Eine kurze Zusammenfassung zur ADF News Session vom Freitag, 16.3.2012:

Wir erstellen eine .jspx mit Karte und Point-Layer/Theme ohne eigene Geodaten Infrastruktur... - wir nutzen lediglich den JDeveloper 11g, ADF und die ADF Data Visualizations.
Die Karte kommt vom Oracle "Elocation Server" - die POI (Points of Interest) entstammen einer eigenen .csv Datei.

Das Ergebnis vorweg: Oracle Niederlassungen auf der Deutschland/Europa Karte













Die Steps dahin:
1. Neue "ADF_GEO.jspx"  anlegen
2. Component Palette: ADF Data Visualizations:



die Komponente "map" auf die .jspx ziehen...

der "Create Geographic Map" Wizard startet.













3. Bei "Map Configuration" die Mapviewer url eingeben. In unserem Beispiel war es der
Oracle Mapviewer auf dem "elocation-server":

Mapviewer url: http://elocation.oracle.com/mapviewer

Als Geocoder url verwenden wir ebenfalls die Oracle Instanz:

Geocoder url: http://elocation.oracle.com/geocoder/gcserver

- der "Geocoder" wird unsere Adressdaten aus der .csv Datei in "POI"s auf der Karte umrechnen...

4. Karte zentrieren (Klick auf das Zentrum der Karte) - Zoom-Level über den Slider auf 5 setzen --> OK
 Im Property Window können nachträglich Länge und Breite sowie Zoomlevel angepasst werden.

5.Layer hinzufügen. Hier über Placeholder Data Control zur Nutzung einer CSV Datei.
Die Datei hatte die Struktur:  1. Zeile: Name,strasse,land,plz,ort,umsatz - ab 2. zeile die Adressen..
File --> New --> Data Control --> Placeholder Data Control --> Name vergeben: Oracle_NDL --> OK
wechseln zu: Data Controls: rechte Maustaste: "Create Place Holder Data Type"
Name des Placeholders vergeben -->
--> Sample Data --> Import... - csv Datei im Dateisystem suchen... - OK --> evtl. Spaltenüberschriften anpassen --> OK
Jetzt Layer/Theme hinzufügen: Das Placeholder Data Control auf die Karte ziehen und der Create Theme Wizard started --> PointTheme selektieren:

Der CreatePoint Theme Wizard startet - Namen vergeben (erscheint im UI des Users!) - Location: Address Type: "International Address" (mit unserem Format) auswählen und "mappings" mit unserer Datenstruktur herstellen. street = Strasse, city = ort, usw. 
Bei Point Data könnten wir "Umsatz" nehmen und als Label "Umsatz" eintragen (Category kann leer bleiben) --> OK - speichern... (;-) --> recht Maustaste auf die Karte und: "Run" ... und unsere Karte sollte im Browser erscheinen.


Viel Spaß und Erfolg weiterhin mit ADF und Geodaten....!!


13 March 2012

ADF DVT Visualisation Components - Map mit Colortheme, Pie- und Bar-Graph

In Vorbereitung auf eine ADF Java News Session am Freitag, 16.3.2012 08:30h habe ich wieder mal in die DVT Komponenten geschaut und coole Grafiken erstellt:

Zoom Level 2:  Pie-Graphs
 Weiter "Rein-Zoomen" und ...
Zoom Level 4: Color Theme plus Bar-Graphs


Zoom Level 5: Color Theme plus Bar-Graphs