First impressions of the Thematic Map component in JDeveloper 11gR2

1

One of the components in JDeveloper/ADF 11gR2 I have really been looking forward to – ever since I saw some very interesting and creativity inspiring demonstrations at Oracle Open World 2010 – is the Thematic Map component. A component that supports a visualization of data against a map – either a geographical map of a region or country, or a visualization of a custom map such as a floorplan, the park, the theatre seating plan or the layout of an airplane. Against the map, markers – predefined and custom – can be positioned. Both map and markers are interactive – supporting highlighting and drill down, as well as drag and drop. Below an example from Ted Farrell’s demo (also read http://technology.amis.nl/blog/8600/oracle-develop-keynote-ted-farrell-showing-off-adf-in-a-big-big-way).

Image

Now the component here – included in the 11gR2 release that was published early this morning. This article illustrates my first somewhat feeble steps, that attempt to visualize the departments in the DEPT table on the Map of the United States. Note: at this point I have not been able to figure out how to use custom maps in addition to the predefined, shipped maps of the regions and continents in the world. Hopefully more on that in the near future.

The Thematic Map can be created by dragging and droppping a Data Collection in a Data Control to a JSF page. Not only does this configure the map, it also binds on of the attributes in the collection to the data layer that describes the locations to be indicated on the map. Locations can be described in two ways: either by name or through coordinates (longitude/lattitude).

In this particular example, I want to take the data in table DEPT (SCOTT schema):

Image

and turn this into the visual display on a Map of the United States.

I do not have the coordinates, but I do have the names of the cities. However, given the very real possibility of multiple cities in the same country with the same name, the identification required by the Thematic Map component for cities consists of the two letter abbreviation of the State followed by an underscore and the name of the City (where spaces should be replaced by underscores, such as in NEW YORK). See http://download.oracle.com/docs/cd/E16162_01/web.1112/e16182/graphs_charts.htm#BEIDAJAJ for details on the identification of cities.

Knowing all this, the first few steps are fairly obvious:

1. Create a new Fusion Web Application with projects Model and ViewController

2. Create a Database Connection to the SCOTT schema

3. Create new ADF Business Components for table DEPT and EMP (to also show the master-detail coordination provided by clicking on a location on the map); add the ViewObjects to an Application Module, called HrmService in my case:

Image

4. Add a transient attribute LocationOnMap to the Department Entity Object. Create the DepartmentImpl class and implement the getLocationOnMap() method like this:

    public String getLocationOnMap() {
        String Loc = getLoc().replaceAll(" ", "_");
        return ((Loc.equalsIgnoreCase("DALLAS")) ? "TX"
                                                : (("BOSTON".equalsIgnoreCase(Loc)) ? "MA"
                                                                                    : ("NEW_YORK".equalsIgnoreCase(Loc) ? "NY"
                                                                                                                        : ("CHICAGO".equalsIgnoreCase(Loc)) ? "IL" :"XX")
                                                  )
                )
                                                + "_"+Loc;
    }

note: there are multiple ways of producing this value; using a CASE expression in the SQL Select statement in the ViewObject would have been an alternative way.

5. Test the ADF BC Application Module – run the HrmService module and verify that the DepartmentView VO shows the proper values for the LocationOnMap attribute.

The View

Now it is time to look the user interface side of things.

6. Create a new JSF Page – for example called DepartmentsOnMap.jsf

7. Drag the DepartmentView1 collection in the HrmServiceDataControl to the page and drop it as a Thematic Map component.

Image

8. Select the Points Area Layer for Base Map USA in the Components Gallery and press the OK button.

Image

Next, configure the Data Layer. Select the radio button Points – to indicate specific locations rather than areas -, select the Data Type City (rather than coordinates) and select the attribute LocationOnMap as the attribute in the data bound collection of DepartmentView1 as the attribute that provides the name of the geographic location defined for the shipped cities data layer for the USA base map.

Image

Finally, check the checkbox Set current row for Master-Detail. This ensures that when the location is clicked on in the map, the corresponding record in the underlying collection is set as the current row and any detail collections are therefore synchronized on that record as (their) master.

Click on OK.

9. The editor now shows the Thematic Component in the design view. We need to configure the Marker – to specify how the locations should be marked on the map.

Image

Select the Marker node in the tree shown in the popup.

10. Set the following properties for the Marker component, in the property palette:

Image

Value = Dept #{row.Deptno}

LabelDisplay = on

Font Size = x-large

ScaleX = 3.0

ScaleY = 3.0

Shape = triangleUp

LabelPosition = up

11. To show off the click-and-master-detail-synchronization capabilities, drag the EmployeeView2 detail collection under the DepartmentView1 collection to the page – dropping it as an ADF Table in the center facet of the panelStretchLayout.

Image

Configure the table, for example like this:

Image

And press the OK button.

Now it is time to run this page:

Run the page with the Thematic Map component

Image

The page appears in the browser. Department 10 is initially selected. The details table with employees lists the employees in Department 10:

Image

When the mouse hovers over a location, the name of the city is displayed.

When we click on location Dallas, the marker is highlighted for Department 20 and the table with employees is synchronized – now showing the departments working in DEPTNO = 20.

Image

Resources

Creating Data Bound Thematic Map Components (Fusion Middleware Fusion Developer’s Guide) – http://download.oracle.com/docs/cd/E16162_01/web.1112/e16182/graphs_charts.htm#BEIEAHIJ

Using Thematic Map Components (Fusion Middleware Web User Interface Developer’s Guide) – http://download.oracle.com/docs/cd/E16162_01/web.1112/e16181/dv_map.htm#BEHBAHFF

Thematic Map Component Tag Reference – http://download.oracle.com/docs/cd/E16162_01/apirefs.1112/e17490/tagdoc/dvt_thematicMap.html

Share.

About Author

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director for Fusion Middleware. Consultant, trainer and instructor on diverse areas including Oracle Database (SQL & PLSQL), Service Oriented Architecture, BPM, ADF, Java in various shapes and forms and many other things. Author of the Oracle Press book: Oracle SOA Suite 11g Handbook. Frequent presenter on conferences such as JavaOne, Oracle OpenWorld, ODTUG Kaleidoscope, Devoxx and OBUG. Presenter for Oracle University Celebrity specials.