Yahoo maps with csv and ws url datacontrol

In this example I have a Yahoo maps page where the markers on the maps comes from a csv file which contains our companu offices and it is enriched by a rest web service to get the longitude and latitude coordinates of these locations. The csv and rest webservice are adf url datacontrols. In this example I only have to make a pagedef with the operations and iterators on these datacontrols. The next step is backing bean for calling the operations and collecting the data for the yahoo maps page. Here is the result.

Let's look how we create the adf url datacontrols. For the coordinates I use a web service from geonames. I can call an url with parameters in a normal browser and it gives me a result xml.

I put the parameters of the geonames ws in the source attribute where the values of the parameters are changed to ##abc## in this case ?placename=##place##&postalcode=.....

This datacontrol needs a xsd for the xml output. Geonames don't supply the xsd so we need to generate this with altova xmlspy. If we are ready then we can create a page where we drag loaddata method from the datacontrol, I use an adf parameter form. Then we have to drag the result from the datacontrol to the page ( read only table)

Now we can make an url datacontrol on the csv file with the addresses. the file looks like this

title;phone;street;zipcode;zipcode_alfa;place

Ordina Headquarters;+ 31 30 66 37 000;Ringwade 1;3439;LM;Nieuwegein

You need to have a web server to put the csv on. You can use the embedded oc4j for this.

when you create a page and drag the csv method from the datacontrol as parameter form and the result as read only table, then the result can look like this.

If everything works fine then we are ready to make the maps page and his pagedef. We create the page and then go to the pagedef . Here we put in the methodIterator and the accessorIterator of the two other demo pages. We copy the two methodActions too and we add two table bindings on these method and acessoriterators.

Create the bean and add the bean definition in the afdc-config. In this bean we put in a method which gathers the required data for the markers on the yahoo maps page.

<br /><br /> public void start(ActionEvent actionEvent) {<br /> OperationBinding operationBinding = getBindings().getOperationBinding("loadData");<br /> Object result = operationBinding.execute();<br /> List<Locations> locs = new ArrayList<Locations>();<br /> FacesCtrlRangeBinding fcrb = (FacesCtrlRangeBinding) getBindings().get("result");<br /> Row[] rows = fcrb.getAllRowsInRange();<br /> for (int i = 0; i < rows.length; i++ ){<br /> Row row = rows[i];<br /> Locations loc = new Locations();<br /> loc.setCompany( row.getAttribute("title").toString() );<br /> loc.setDescription( row.getAttribute("phone").toString()+" "+row.getAttribute("place").toString()+" "+row.getAttribute("street").toString() );<br /> loc.setPlace(row.getAttribute("place").toString());<br /> loc.setZipcode(row.getAttribute("zipcode").toString());<br /> locs.add(loc);<br /> }<br /><br /> <br /> for ( int i = 0 ; i < locs.size();i++) {<br /> place = locs.get(i).getPlace();<br /> zipCode = locs.get(i).getZipcode();<br /> countryCode = "nl";<br /> OperationBinding operationBindingGeo = getBindings().getOperationBinding("loadDataGeo");<br /> Object GeoResult = operationBindingGeo.execute();<br /> List aa = operationBindingGeo.getErrors();<br /> if (aa.size() == 0){<br /> AttributeBinding totalResults = (AttributeBinding) getBindings().get("totalResultsCount");<br /> if ( totalResults.getInputValue() != null ) {<br /> result = totalResults.getInputValue().toString();<br /> if ( new oracle.jbo.domain.Number(result).intValue() > 0 ) {<br /> FacesCtrlRangeBinding fcrbGeo = (FacesCtrlRangeBinding) getBindings().get("code");<br /> Row[] rowsGeo = fcrbGeo.getAllRowsInRange();<br /> Row rowGeo = rowsGeo[0];<br /> locs.get(i).setLatitude(rowGeo.getAttribute("lat").toString());<br /> locs.get(i).setLongitude(rowGeo.getAttribute("lng").toString());<br /> }<br /> } <br /> }<br /> GeoResult = null;<br /> }<br /> <br /> for ( int i = 0 ; i < locs.size();i++) {<br /> if (locs.get(i).getLatitude() != null) { <br /> if ( i == 0 ) {<br /> offices = " \" "+locs.get(i).getCompany()+" \" "; <br /> latlon = " new LatLon("+locs.get(i).getLatitude()+","+locs.get(i).getLongitude() +") "; <br /> descriptions = " \" "+locs.get(i).getDescription()+" \" "; <br /> } else {<br /> offices = ", \" "+locs.get(i).getCompany()+" \" ";<br /> latlon = ",new LatLon("+locs.get(i).getLatitude()+","+locs.get(i).getLongitude() +") "; <br /> descriptions = ", \" "+locs.get(i).getDescription()+" \" "; <br /> }<br /> }<br /> }<br /><br /> }<br />

The last step is to put in the yahoo maps javascript in the page and fill the javascript variables with the bean getters

<br /><br /><?xml version='1.0' encoding='windows-1252'?><br /><jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.0"<br /> xmlns:h="http://java.sun.com/jsf/html"<br /> xmlns:f="http://java.sun.com/jsf/core"<br /> xmlns:af="http://xmlns.oracle.com/adf/faces/rich"><br /> <jsp:directive.page contentType="text/html;charset=windows-1252"/><br /><script type="text/javascript" src="http://maps.yahooapis.com/v3.5/fl/javascript/apiloader.js?appid=YahooDemo"><br /></script><br /><style type="text/css"><br />#mapContainer { height: 600px; width: 600px;}<br /></style><br /> <f:view><br /> <af:document><br /> <af:form><br /> <h:commandButton value="start" actionListener="#{Map.start}"/><br /> <div id="mapContainer"></div><br /> <script type="text/javascript"><br /> <f:verbatim>var addresses = new Array(</f:verbatim><br /> <h:outputText value="#{Map.latlon}"/> <f:verbatim>);</f:verbatim><br /> <f:verbatim>var offices = new Array(</f:verbatim><br /> <h:outputText value="#{Map.offices}"/><f:verbatim>);</f:verbatim><br /> <f:verbatim>var description = new Array(</f:verbatim><br /> <h:outputText value="#{Map.descriptions}"/><f:verbatim>);</f:verbatim><br /> var map = new Map("mapContainer", "Ordina Offices", " Utrecht", 11);<br /> map.addEventListener(Map.EVENT_INITIALIZE, onMapInit);<br /> map.addEventListener(Map.EVENT_MARKER_GEOCODE_SUCCESS, onMarkerGeocode);<br /><br /> function onMapInit(eventObj) {<br /> map.addTool( new PanTool(), true );<br /> map.addWidget( new SatelliteControlWidget());<br /> map.setMapViewType(MapViews.HYBRID);<br /> for(var i=0; i < addresses.length; i++) {<br /> var marker = new CustomPOIMarker(offices[i], '', description[i], '0xFF0000', '0xFFFFFF');<br /> map.addMarkerByLatLon( marker,addresses[i] );<br /> }<br /> map.addWidget( new ZoomBarWidget() );<br /> }<br /> function onMarkerGeocode(eventObj) { var geocodeResponse = eventObj.response; }<br /> </script><br /> </af:form><br /> </af:document><br /> </f:view><br /></jsp:root><br /><br />
We are ready to test it. This is a jdeveloper 11g technical preview 2 example and this project has some problems to execute the geonames webservice twice in a loop.

Here you can download the example