Monday Jun 21, 2010

Integrating Google Maps with ADF

This is a simple example how to integrate Google Maps to your ADF application.

1.  In order to run this application you must subscribe to the Google Map API. This can be done from the following web site.

http://code.google.com/apis/maps/signup.html

This will provide you with a key to access the API at run time.

2. Before we can start our ADF application we need to create a data source. In this example I create a HOUSES table, this table provide the longitude and latitude coordinates required for Google Maps.

Use the following file to create the HOUSES table:

Use the following file for the data:

Use the following for the SQL Loader control file:

3. Execute the create_houses.sql is a SQLPlus session to a schema of your choice. I have used the HR schema.

4. Copy the HOUSES.csv and load_houses.ctl into the same directory somewhere on you OS, e.g. c:\temp.

5. From that location execute the following command, all on one line.

sqlldr userid=hr/hr control=load_houses.ctl log=load_houses.log bad=load_houses.bad data=HOUSES.csv discard=load_houses.discard

6. Check that the HOUSES table has been loaded

SQL> select count(*) from houses;

  COUNT(*)
----------
        34

7. You are now ready to create your ADF Application. Create a new Fusion Web Application (ADF) called GoogleMap and click Next

image

image

8. Accept the defaults and click Finish

image

9. Right-click the model project and select New. From the gallery select Business Tier -> ADF Business Components -> Business Components from Tables

image

10. Create a new database connection based on the schema where you loaded the HOUSES table.

image

11. Query the schema and select the HOUSES table and click Next.

image

 

 

 

 

 

 

 

12. Move the HOUSES table to be selected and click Finish

image

13. Now the data source has been created we can implement the user interface, Right-click the ViewController project and select New

image

14. Select JSF Page, found in the Gallery under Web Tier -> JSF

image

15. Call the JSF page HouseLocation.jspx, ensure that the Blank Page radio button has been selected. Click OK

image

16. From the Component Pallet, drag Panel Splitter into the middle of the JSF page.

image

17. From the Data Control drag the HousesView1 into the First Panel. Choose Table -> ADF Read-Only Table

image

18. Check the Row Selection, Filtering, and Sorting checkboxes, and click OK

image

19. To integrate Google Maps to ADF we must customise the source to add the Google Maps APIs. Click the source tab of your jspx page.

20.  The first bit of code we will implement is the Google Map functions. There are 2 functions we create, an initialisation function, and a an implementation function so when the user selects a row it will pass the coordinates to Google Maps.

Copy this code into your jspx source, just after </af:form> and before </af:document> at the bottom of the source.

Also change the key=ABCD to the key you got when you subscribed to the Google API.

      <f:facet name="metaContainer">
        <af:resource type="javascript" source="
http://www.google.com/jsapi?key=ABCD"/>
        <af:resource type="javascript"> google.load("maps", "2.x");
                    // Call this function when the page has been loaded
                    function initialize() {
                    var map = new google.maps.Map2(document.getElementById("map"));
                    map.setCenter(new google.maps.LatLng(0,0), 1);
                    map.addControl(new GLargeMapControl());
                    map.addControl(new GMapTypeControl());
                    }
                    google.setOnLoadCallback(initialize);
        </af:resource>
        <af:resource type="javascript">
                          function doNavigate(evt)
                          { long = evt.getSource().getProperty("long");
                            lat = evt.getSource().getProperty("lat");

                            var latlng = new GLatLng(lat,long);
                            var map = new google.maps.Map2(document.getElementById("map"));             

                            map.addControl(new GLargeMapControl());
                            map.addControl(new GMapTypeControl());

                            map.setCenter(new GLatLng(lat,long), 16);
                            map.addOverlay(new GMarker(latlng));
                          }
        </af:resource>
      </f:facet>

21. Replace the code <f:facet name="second"/> with the following

             <f:facet name="second">
                <af:group>
                  <div id="map" style="width: 800px; height: 800px"></div>
                </af:group>
              </f:facet>

 

 

 

 

 

 

 

This code draws the map in the second splitter.

22. The final code is implementing the client listeners for user interaction so when the use selects an ID the location will be shown on the map. To do this we must edit the ID field to listen for user interaction and pass the parameters to the functions implemented in step 20.

Find the code:

                <af:outputText value="#{row.Id}" id="ot2">
                  <af:convertNumber groupingUsed="false"
                                    pattern="#{bindings.HousesView1.hints.Id.format}"/>
                </af:outputText>

And replace to look like this

                      <af:outputText value="#{row.Id}">
                        <af:convertNumber groupingUsed="false"
                                          pattern="#{bindings.HousesView1.hints.Id.format}"/>
                        <af:clientAttribute name="lat" value="#{row.Latitude}"/>
                        <af:clientAttribute name="long" value="#{row.Longitude}"/>
                        <af:clientListener method="doNavigate" type="click"/>
                      </af:outputText>

Save you work

23. Now it is time to test, Right-click on the HouseLocation.jspx and select Run

When the application starts in your browser, click on any ID in the ID column. The location should show on the map as shown below.

image

About

Discussions and Examples using Oracle Fusion Middleware. Some image links are broken when using Firefox, Safari, and Chrome. If you want to see the full image please use IE.

Twitter:@james8001

tumblr hit counter vistors, thanks for your support

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today