First impressions of the Thematic Map component in JDeveloper 11gR2

Read Time:5 Minute, 16 Second

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 https://technology.amis.nl/blog/8600/oracle-develop-keynote-ted-farrell-showing-off-adf-in-a-big-big-way).

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):

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:

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.

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

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.

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.

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

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

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.

Configure the table, for example like this:

And press the OK button.

Now it is time to run this page:

Run the page with the Thematic Map component

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

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.

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

About Post Author

Lucas Jellema

Lucas Jellema, active in IT (and with Oracle) since 1994. Oracle ACE Director and Oracle Developer Champion. Solution architect and developer on diverse areas including SQL, JavaScript, Kubernetes & Docker, Machine Learning, Java, SOA and microservices, events in various shapes and forms and many other things. Author of the Oracle Press book Oracle SOA Suite 12c Handbook. Frequent presenter on user groups and community events and conferences such as JavaOne, Oracle Code, CodeOne, NLJUG JFall and Oracle OpenWorld.

lucas.jellema@amis.nl

https://www.amis.nl/