1 / 20

Integrating AJAX Approach into GIS Visualization Web Services

Integrating AJAX Approach into GIS Visualization Web Services Ahmet Sayar Indiana University Computer Science Department Pervasive Technology Laboratories February 24, 2006 ICIW’06, Guadeloupe, French Caribbean Motivation & Contents AJAX ( XMLHttpRequest Protocol )

Download Presentation

Integrating AJAX Approach into GIS Visualization Web Services

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  1. Integrating AJAX Approach into GIS Visualization Web Services Ahmet Sayar Indiana University Computer Science Department Pervasive Technology Laboratories February 24, 2006 ICIW’06, Guadeloupe, French Caribbean

  2. Motivation & Contents • AJAX (XMLHttpRequest Protocol) • Web Services (SOAP Protocol) • AJAX+Web Services (Why?, How?) • Application Scenarios 1. Overlaying map layers from Google and OGC WMS Google + WMS 2. Plotting Geophysics data on the Google Map Google + WFS • Conclusion

  3. What Is AJAX? • Asynchronous JavaScript and XML is a combination of standard Web technologies –for the browser based web applications. • JavaScript, CSS, DOM, XML • When done properly, it provides apparently seamless interactivity in browser clients. • No browser reloads • Much smoother than standard request-wait-response for browser forms. • Several Google tools are a very well known examples. • Google maps, Gmail, etc. • The real key is the standardization of the XMLHttpRequest Object • Originally developed for Internet Explorer • Now supported by all major browsers. • Seminal article from Adaptive Path • http://www.adaptivepath.com/publications/essays/archives/000385.php

  4. The Main Idea: Asynchronous JavaScript Calls to Server • AJAX’s key concept is the use of XMLHttpRequest to buffer requests and responses within the browser. • Use XMLHttpRequest to make a call to the server and get back the response without displaying it. • The response is stored locally as either plain text (plain or HTML), or XML. • JavaScript + DOM can be used to walk the HTML or XML tree to handle most user interactions. • The XMLHttpRequest object in turn can issue requests and process responses independently of the user’s interaction. • Go and fetch additional maps, for example.

  5. AJAX -Cont • AJAX is combination of several technologies: • For binding and user interaction -JavaScript • For styling - XHTML and CSS • For returned document handling -Document Object Model (DOM) • For data manipulation and conversion -XML and XSLT • For asynchronous data retrieval -XMLHttpRequest

  6. AJAX -Cont Figure is from the web site at http://java.sun.com/developer/technicalArticles/J2EE/AJAX/

  7. Web Services • Web Services • WSDL, XML, SOAP, UDDI • human to machine vs. machine to machine • Advantages • Operating system neutral • Platform neutral • Language neutral • Seamless integrations of services. • Easy to extend • Uses open standards (HTTP, XML)

  8. AJAX + Web Services – Why? • Provide more interactivity for the browser based web applications. • AJAX and Web Services are XML based structures they are able to leverage each others strength. • They use widely-used and well-known technologies such as XML and HTTP. • They are not competing but complementary technologies.

  9. AJAX + Web Services – Challenges? • AJAX uses HTTP based XMLHttpRequest protocol for the message transfers. • Web Services use SOAP as a communications protocol. • Different protocols for message transfers over the different stages of the applications. • NO COMMON PROTOCOL • BUT their message structures are XML based.

  10. AJAX + Web Services – How? Pure AJAX Pure Web Services AJAX + Web Services

  11. APPLICATION SCENARIOS of the INTEGRATION FRAMEWORKGIS Domain • Open Geospatial Consortium (OGC), standards for data models and online services. • Geographic Information Systems (GIS), methods and environments to visualize, manipulate and analyze geo-data. • GIS system based on SOA. All services (WMS, WFS, IS) are wrapped as Web Services and OGC compatible. • Servlet & Web Services based GIS Services (services are provided parallel from different request and response channels) • Proposed framework is used in GUI for the GIS decision makers and user end points. • Users interact with the Web Service based GIS services through the AJAX enabled GIS client user interface.

  12. USAGE SCENARIOS I - Google Maps + Web Map Service (WMS) II - Google Maps + Web Feature Service (WFS)

  13. I - Google Maps + Web Map Service (WMS)- Overlaying map layers from Google maps and GIS WMS 1 • Actions are done via Google Mapping Control Tools on but same action is applied to by creating binding and action listener functions in JavaScript. 2 Integration framework is needed 2 layers Pure AJAX 1 Layers are of same width, height and bbox values

  14. I - Google Maps + Web Map Service (WMS)Description of Layer Objects • User interface class is a JSP page. It includes two JavaScript class-references. • One is for Google Map object ‘map’ • The other is for WMS map image and binding to GMap • is an object of a JavaScript class referenced in the beginning of the JSP page (req. by the Google to display the map) • <script src=http://maps.google.com/maps?file=api&v=1&key=“PUT YOUR KEY HERE“ type="text/javascript"> </script> • Key can be obtained from here http://www.google.com/apis/maps/ • is an object of a JavaScript class corresponds to returned WMS map image and enable binding to GMap object to overlay two layers. 1 2 1 2

  15. I - Google Maps + Web Map Service (WMS)GUI and SAMPLE OUTPUT Natural Gas Layer Electric Power Layer

  16. 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. II - Google Maps + Web Feature Service (WFS)Overlaying Geophysics data over Google maps OGC WFS + AJAX Integration framework is needed Pure AJAX

  17. II - Google Maps + Web Feature Service (WFS)GUI and SAMPLE OUTPUT Simple Architecture Supported Feature Data by the WFS Layer specific parameters for filtering

  18. CONCLUSION • ADVANTAGES • Good for the browser based Distributed SOA based applications. • Provides powerful interaction asynchronously. • AJAX and Web Services both use XML based message communication protocols. This enables application developers to easily integrate AJAX based browser applications into Web Services. • They leverage their advantages. • No need to modify or extend any technologies in the AJAX model or Web Services. • Users do not need to wait whole data to be received to render and display the results. Partial displaying is possible without refreshing the whole page. Instead of making request for whole page, only the interested part will be requested. This reduces the workload of the network traffic. • Advanced XML structured geo-data parsing. Fast and efficient compared to DOM parsing. • DISADVANTAGES • Introduces some extra work. Extra work mostly comes from the conversion of parameters to be able to make compatible requests to remote Web Services. In order to make valid requests, the proxy server should be deployed locally and client stubs for Web Service invocations should be created before running the application. • The performance is degraded by the intermediary proxy server for the conversion and message handling jobs.

  19. References • Crisisgrid (GIS project at IU-CGL) home page: • http://www.crisisgrid.org/ • Demo for the Integration: • http://complexity.ucs.indiana.edu:5151/googlemap/wms_overlay_google.jsp • OGC GIS Visualization Project pagehttp://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/

  20. THANKS! Ahmet Sayar asayar@cs.indiana.edu http://www.cs.indiana.edu/~asayar/

More Related