Ali Mansourian

Senior Lecturer

Dept. of Physical Geography and ecosystem Science

Lund University, Sweden
  Client-Server Architecture
◦ Client-Server System Partitioning
◦ Glue (Middleware)

 Web Client Server

 Web GIS Architecture

 Web Mapping Techniques

◦ Static Map Publishing
◦ Static Web Mapping
◦ Interactive Web Mapping
 Dynamic HTML

Ali Mansourian
  A typical Application usually includes three essential
elements:
◦ Presentation,
◦ Logic (or business)
◦ Data

Presentation Logic Data

User Business. Database &

Interface DBMS
Processing

Ali Mansourian
 Presentation Logic Data

Client/ Server/
Service requester Service Provider

Ali Mansourian
 Presentation Logic Data

Distributed Remote Distributed Remote Distributed

presentation Presentation Function Data Database
Access

Client Server
Ali Mansourian
 Glue/
Client Middleware Server
  The client and the server are two independent
components in a client-server system

 We need a connecting component or

translator to link them together

 This intermediate component is called glue or

middleware

Ali Mansourian
  Networking software such as TCP/IP
 Web: HTTP, HTTPS, etc.
 ...

Glue
Client / Server
Middleware

Ali Mansourian
  Two-Tier Architecture

Client Presentation

Logic
Server
Data

Ali Mansourian
  Two-Tier Architecture

Presentation
Client
Logic

Server Data

Ali Mansourian
  n-Tier Architecture

Client Presentation

Server 1 Logic

Server 2 Data

Ali Mansourian
  n-Tier Architecture
Client Presentation

Server 1

Server 2 Logic

Server 3 Data

Ali Mansourian
 Client Presentation

Server Server Server Server Logic

Server Server Server Server Data

Ali Mansourian
  is a special case of client-server architecture
 has advantages of client-server architecture
 is more efficient for distributed applications
across internet
 wide accessibility is another advantage

Ali Mansourian
 Server

Web Server
Web Client With Application Map Server Data Server
Server

DB

Ali Mansourian
 Server

Web Server
Web Client With Application Map Server Data Server
Server

DB

Ali Mansourian
  A typical web client is a web-browser with HTML

◦ To make the Web user interface dynamic and more interactive DHTML and
some client-side applications are used (will be explained later).

◦ Client-side applications are working together to increase/extend web

browser’s capabilities to process data that are not supported by HTML
(Will be discussed in more detailed later).

Ali Mansourian
 Server

Web Server
Web Client With Application Map Server Data Server
Server

DB

Ali Mansourian
  Web server, also called HTTP Server

 A Web server is a daemon on a server machine

listening to the Internet traffic and serving HTML
pages and other information

 Sends the request to an Application Server

 Another function of web server is to respond to

request from web browser via HTTP

Ali Mansourian
 Server

Web Server
Web Client With Application Map Server Data Server
Server

DB

Ali Mansourian
  Map server is a major workhorse component
that fulfills:
◦ spatial queries
◦ conducts spatial analysis
◦ generates and delivers maps to the client based on the
user’s request

Ali Mansourian
  The map server provides a range of traditional
GIS functions or services including:
◦ Query
◦ filtering and data extraction
◦ geocode service
◦ spatial analysis service
◦ map-making services
◦ …

Ali Mansourian
  The output of the map server can be:
◦ either in the form of filtered feature data that are sent
to the client program to be manipulated by the user
◦ or in the form of a simple map image in a graphic
format (e.g. JPEG or GIF)

Ali Mansourian
 Server

Web Server
Web Client With Application Map Server Data Server
Server

DB

Ali Mansourian
  Data server serves spatial and non-spatial data
from database for processing and analysis
purposes based on the user’s request.

Ali Mansourian
 High

Interactive Web
Functionality

Mapping
Static Web
Mapping

Static Map
Publishing
Low

Low Interactivity high

Ali Mansourian
  Distributes maps on the Web page as static map
images in graphic formats like GIF, JPEG and PDF

 It relies on the early stage of Web technology to

hyperlink ready-made maps on the Web

 Maps are usually parts of the HTML document to

enrich its content

Ali Mansourian
Ali Mansourian
Ali Mansourian
  Users can not interact with the maps:
◦ Can not change their display format in any way
◦ Can not zoom to a certain area
◦ Can not get attribute of spatial features

 No map-rendering tools

 A very thin-client application

Ali Mansourian
  Static Map publishing:  Static Web Mapping:

◦ No interaction with maps ◦ Making maps

◦ Just viewing a digital copy ◦ Conducting queries

of paper maps
◦ Doing some limited
spatial analysis

While presenting the

output on a standard
Web browser

Ali Mansourian
  Two Web technologies made Static Web Mapping
possible:

◦ WebForms on the Web client side

◦ CGI (Common Gateway Interface) on the server side

Ali Mansourian
  Web forms: facilitate
user input to make a
request

◦ A webform on a web page

allows a user to enter data

◦ Forms can be used to submit

data to save on a server (e.g.,
ordering a product)

◦ Forms can be used to retrieve

data (e.g., searching on a
search engine).

Ali Mansourian
  CGI is a way of connecting your web pages to other
programs that are running on the server which
visitors wouldn't normally have access to.

 CGI protocol: is a program which can be written by

any language such as C, C++, Java, Fortran and
Perl.

 As a translator handles information exchange

between web server and other server applications
such as Map Server.

 CGIs are often used for processing submissions

from HTML forms
◦ (collections of fill-in fields, checkboxes, buttons, etc.).

Ali Mansourian
  Old version of “Where is” Web site.

Ali Mansourian
Ali Mansourian
Ali Mansourian
Ali Mansourian
Ali Mansourian
Ali Mansourian
Ali Mansourian
  Many current Web GISs belong to this category.

Ali Mansourian
Ali Mansourian
 Interactive Navigation

Drag & Drop Start and End points

for path finding

Ali Mansourian
  HTML is static for Web mapping
 After a page and map is loaded in the
browser, they become static
 The only things a user can do in a static Web
page are:
◦ If there is a link, click on it
◦ If there is a form, fill it out and click on submit
 The response to each of the above actions is
slow, because a complete round trip to server
is required
Ali Mansourian
  Alternative viewers are required for interaction:

◦ Plug-In Viewer

◦ GIS helper programs

Obsolete, Not used
anymore
◦ Java Applet Viewer

◦ ActiveX Viewer

◦ DHTML

Ali Mansourian
  Collection of technologies to create
interactive and animated webpages
 Combination of
◦ Markup language: HTML
◦ Client side scripting language: JavaScript
◦ Presentation definition language: CSS

Ali Mansourian
  DHTML allows the scripting language to change different
properties in the HTML, or add and remove elements from
the HTML even after a page has been loaded into a
browser

 The changes affect the look and the function of the HTML
content.

 These changes can be

◦ Changing color
◦ Drawing lines
◦ Adding and deleting HTML tags
◦ etc.

 DHTML makes HTML dynamic

Ali Mansourian
  The DHTML has three advantages over static
HTML:

◦ The Web page and the map will respond to user

actions

◦ That response is immediate

◦ No special plug-in is required to install at the browser

Ali Mansourian
  Several solutions
◦ Changing the look of an HTML element using CSS
◦ Combining several HTML elements to generate a
complex shape
◦ Draw on HTML Canvas element
◦ Draw on HTML SVG element

◦ See Multiple ways to draw an image using CSS,

HTML and Javascript

Ali Mansourian
  Client side Web Map Programming
◦ To understand DHTML

 Three exercises
◦ To develop a static map publishing tool

◦ To develop a static web mapping tool

 Use and learn OGC WMS standard
 Learn how a web map system works

◦ To develop an interactive web map

 Use OGC standards
 Use open source tools (OpenLayers, GeoServer)

Ali Mansourian