Integrating ajax approach into gis visualization web services
Download
1 / 20

Integrating AJAX Approach into GIS Visualization - PowerPoint PPT Presentation


  • 367 Views
  • Uploaded on

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 )

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Integrating AJAX Approach into GIS Visualization ' - Audrey


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Integrating ajax approach into gis visualization web services l.jpg

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 l.jpg
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 l.jpg
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 l.jpg
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.


Ajax cont l.jpg
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 cont6 l.jpg
AJAX -Cont

Figure is from the web site at

http://java.sun.com/developer/technicalArticles/J2EE/AJAX/


Web services l.jpg
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)


Ajax web services why l.jpg
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 l.jpg
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 l.jpg
AJAX + Web Services – How?

Pure AJAX

Pure Web Services

AJAX + Web Services


Application scenarios of the integration framework gis domain l.jpg
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.


Usage scenarios l.jpg

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 l.jpg
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


I google maps web map service wms description of layer objects l.jpg
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


I google maps web map service wms gui and sample output l.jpg
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 l.jpg

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


Ii google maps web feature service wfs gui and sample output l.jpg
II - Google Maps + Web Feature Service (WFS) rendering. Data come from WFS in GML format.GUI and SAMPLE OUTPUT

Simple Architecture

Supported Feature Data by the WFS

Layer specific parameters for filtering


Conclusion l.jpg
CONCLUSION rendering. Data come from WFS in GML format.

  • 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 l.jpg
References rendering. Data come from WFS in GML format.

  • 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/


Thanks l.jpg

THANKS! rendering. Data come from WFS in GML format.

Ahmet Sayar

[email protected]

http://www.cs.indiana.edu/~asayar/


ad