Transcript iciw_asayar - Indiana University

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)
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
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
The Main Idea: Asynchronous
JavaScript Calls to Server

AJAX’s
key
concept
is
XMLHttpRequest to buffer
responses within the browser.
•
•
•

the
use
of
requests and
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.
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
AJAX -Cont
Figure is from the web site at
http://java.sun.com/developer/technicalArticles/J2EE/AJAX/
Web Services

Web Services

Advantages
• WSDL, XML, SOAP, UDDI
• human to machine vs. machine to machine
• Operating system neutral
• Platform neutral
• Language neutral
• Seamless integrations of services.
• Easy to extend
• Uses open standards (HTTP, XML)
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.
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.
AJAX + Web Services – How?
(A)
(B)
(C)
USER INTERFACE
USER INTERFACE
USER INTERFACE
HTML
XHTML
HTML
HTML
CSS
XHTML
JavaScript
JavaScript
HTML
HTML
XHTML
CSS
CSS
JavaScript
JavaBeans
XMLHTTPRequest
XMLHTTPRequest
Client Stubs
XML/HTTP
Client
SOAP/HTML
Server
HTTP Servlet
(GIS Server)
Client
Server
PROXY JSP
jb.doTask(req,resp)
Client Stubs
WSDL
HTTP Servlet
(GIS Server)
SOAP/HTML
Client
Server
WSDL
Pure AJAX
Pure Web Services
HTTP Servlet
(GIS Server)
AJAX + Web Services
APPLICATION SCENARIOS of the INTEGRATION
FRAMEWORK
GIS 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.
USAGE SCENARIOS
I - Google Maps +
Web Map Service (WMS)
II - Google Maps +
Web Feature Service (WFS)
I - Google Maps + Web Map Service (WMS)

Overlaying map layers from Google maps and GIS WMS
Actions are done via Google Mapping Control Tools on 1
but same action is applied to 2 by creating binding and
action listener functions in JavaScript.
User Synchronized Actions
Integration framework
is needed
getMap Req. in SOAP
2
Image as jpeg from
WMS
Pure AJAX
layers
1
Google Gmap
Object
W
S
D
L
WMS
at CGL
AJAX -Remote scripting
Layers are of same width, height and bbox values
Google
Mapping Server
I - Google Maps + Web Map Service (WMS)
Description of Layer Objects

User interface class is a JSP page. It includes two JavaScript classreferences.
• One is for Google Map object ‘map’ 1
•




The other is for WMS map image and binding to GMap
2
1 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/
2 is an object of a JavaScript class corresponds to returned WMS
map image and enable binding to GMap object to overlay two layers.
I - Google Maps + Web Map Service (WMS)
GUI and SAMPLE OUTPUT
Natural Gas Layer
Electric Power Layer
II - Google Maps + Web Feature Service (WFS)
Overlaying Geophysics data over Google maps
OGC WFS + AJAX


User Actions
With Google Tools

Integration
framework is
needed
W
S getFeature Req. in SOAP
D Return: GML in SOAP
L
WFS
at CGL
Pure AJAX
Google Gmap
object updated with
GML geometry
elements

AJAX -Remote scripting
Return: Gmap Obj
Google
Mapping Server

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)
GUI and SAMPLE OUTPUT
Simple Architecture
Client
MAP interface
Supported
Feature Data
by the WFS
Google Map
Server
OGC WFS
Feature Data Server
Layer specific
parameters
for filtering
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.
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_go
ogle.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/
THANKS!
Ahmet Sayar
[email protected]
http://www.cs.indiana.edu/~asayar/