Integration Architecture

Google with WFS Web Services

Overlaying OGC WFS Feature Data over Google Maps

Ahmet SayarIndiana University

Computer Science Department

September, 2005

User Interface and a Sample Output for the Proposed Integration

ClientMAP interface

Google MapServer

OGC WFSFeature Data Server

Simple Architecture

Supported Feature Data by the WFS

Layer specific parameters for filtering

Actors in the Architecture

Client : Extended and updated WMS Client or Google mapping client.

WFS : OGC compatible Web Service based Web Feature Server.

Google Mapping Server : Provides maps as remote script objects by using AJAX and XMLHttpRequest protocol.

Google – WFS Integration Architecture

GOOGLE CLIENT

WFS Web ServiceGoogleMapping Server

getFeature req in SOAP

GML in SOAP

AJAXRemote scripting

OV

ER

LA

Y

LIGHT-MAPPINGService

wai

t

DRAW IMAGE FROM THESE ELEMENTS

EXTRACT GEOMETRY ELEMENTS FROM GML

W

S

D

L

Client has a LIGHT-MAPPING Service which makes image rendering. Data come from WFS in GML format.

WSDL is a Web service Interface Description Language encoded in XML.

Clients should prepare client stubs to be able to invoke the Web Services defined in WSDL.

Requests and returned GML data from WFS are put into SOAP envelope.

SOAP is an XML based message exchange protocol used in Web Services interactions.

In General

Since we are using Google Map objects (GPoint and GPolyline) to overlay data on the map, we need to use XMLHttpRequest protocol to make and get refreshed feature data from WFS.

Architecture supports getFeatureInfo functionalities of WMS in Google.

Handling and manipulating the documents are done with DOM. For the large data sets it is not efficient.

How to make XMLHttpRequest to WFS ?

- In other words, How to use AJAX approach in case of making Web Service Request to WFS from the Client?

Content of Client User Interface User interface is a JSP page with some JavaScript embedded in it.

Initializing Google GMap OBJECT map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl());

Initializing XMLHttpRequest Object for interacting with WFS without page refreshment. var http = new XMLHttpRequest(); var url = “intermediary.jsp”; NEXT SLIDE Intermediary.jsp is a intermediary page to capture HttpServletRequest

and HttpServletResponse objects

getFeature action is triggered by XMLHttpRequest as below http.open(“GET”, url+”?bbox=“+bbox+………)

query parameters are layer specific parameters given by the user. These are for creating request to WFS

Intermediary.jsp

<%WMSgoogle.getData(request, response)%> WMSgoogle.java is a javaBean class and handles creating OGC compatible

GetFeature requests to OGC WFS and handles receiving and parsing data returned from OGC WFS.

After having done all the required jobs, WMSgoogle javaBean class sets the response object (in the type of HttpServletResponse ).

XMLHttpRequest object at the user interface JSP page captures this value by making a call as below http.onreadystatechange = handleHttpResponse next slide

handleHttpResponse

if (http.readyState == 4) { //IF everything is OK var xmlDocument = http.responseXML;//gets the var ret written into resp var valuex = xmlDocument.getElementsByTagName('gml:X'); var valuey = xmlDocument.getElementsByTagName('gml:Y'); for (var i = 0; i < valuey.length; i++) { var point = new GPoint(parseFloat(valuex.item(i).firstChild.data), parseFloat(valuey.item(i).firstChild.data)); var marker = createMarker(point, mag.item(i).firstChild.data, '('+valuex.item(i).firstChild.data+' , '+valuey.item(i).firstChild.data + ')'); map.addOverlay(marker); }

How to plot points, LineStrings and/or PolyLines over the Google Map?

WFS Returns feature data in GML format. GML contains some geometry elements to be able to picture out the corresponding feature data. The most commonly used geometry elements are

Points, PolyLines, and LineStrings

Basic Steps At each user action make XMLHttpRequest to WFS by using user given

parameters. Each XMLHttpRequest causes client to create a Web service request

to WFS web services by using service client stubs. Structured GetFeature Request in SOAP message.

After getting response in SOAP message envelope as GML encoded in XML, client extract the geometry elements, Points, PolyLines, LineStrings etc.

Client creates structured response from extracted geometry elements in the form of XML. Root elements is set to <message>

This message elements is set to HttpServletResponse. Once this setting is done, XMLHttpRequest object at the user interface

captures the response as explained in other slides. http.onreadystatechange = handleHttpResponse

Do whatever you want in function handleHttpResponse after getting returned result as below var xmlDocument = http.responseXML; //gets the var ret written into response

Sample Cases Faults and Seismic Feature Data Google uses Points and Polylines to draw points and line strings over the map. We

draw fault data by using Google Polyline element and seismic data by using Google Point element

Descriptions GPoint(x, y) var point = new GPoint(x,y) GPolyline(points, color?, weight?, opacity?) var gpline = new GPolyline(pointarray,

"#ff0000", 10)

Plotting onto Google Map map.addOverlay(point); map.addOverlay(gpline);

If you want to enable getFeatureInfo functionalities in Goggle Map as in WMS Client Instead of GPoint Use GMarker Element. Convert each Point into GMarker var marker = new GMarker(point, icon); map.addOverlay(marker ); When you click on the icon you will see pop-up window shows information about the specific

feature located at that point.

WMSgoogle.javaGetting Feature Data from WFS From the intermediary.jsp this class function getData is called.

Request and response objects are given as parameters. Function getData(HttpServletRequest request,

HttpServletResponse response){ setParameters(request); if (layers.equals("California:Fault")) { getCAFaultData(response); } else if (layers.equals("World:Seismic")) { getWorldSData(response); see the next slide } }

getWorldSData(response) -I Create request. Make request to Web service based OGC WFS by using Web service client stubs. Convert returned GML feature data into appropriate message format. Returned GML contains point

GEOM elements. Extract them and put in an XML. Root node is <message>. String ret = "<message>"; int k=0; for (int i = 0; i < points.length; i++) { if(i<2){ k = 0; } else if(i%2==0){ k++; } ret = ret.concat("<point>" + "<X>" + pointsX[i] + "</X>" + "<Y>" + pointsY[i] + "</Y>" + "</point>" + "<names>" + (String)names.elementAt(k) + "</names>" + "<segments>" + (String)segments.elementAt(k) + "</segments>"

); } ret = ret.concat("</message>");

getWorldSData(response) -II

After creating a structured response by using XML (In String variable named ret). Do below;

PrintWriter pw = response.getWriter(); pw.write(ret); pw.flush(); pw.close(); When you write to the response elements writer, this

invokes the below statement in the user interface jsp class http.onreadystatechange = handleHttpResponse;

References Crisisgrid (GIS project at IU-CGL) home page:

http://www.crisisgrid.org/

Demo for the Integration: http://complexity.ucs.indiana.edu:5151/wfs_google/demo.jsp

OGC GIS Visualization Project page http://complexity.ucs.indiana.edu/~asayar/gisgrids/

Google Publicly available API http://www.google.com/apis/maps/documentation/

Community Grids Labs Related Publications: http://grids.ucs.indiana.edu/ptliupages/publications/