The document outlines a course on web GIS and the internet, discussing basic concepts, history, architecture, and functions of web GIS along with its applications across various sectors. It describes how web GIS has evolved from early implementations to its current form, which includes functionalities for both desktop and mobile clients. The content emphasizes the importance of web technologies, such as HTTP, HTML, and URL, in facilitating accessible and efficient geospatial data services.

1. Post Graduate Faculty
M.S.c In Geo-Informatics
Instructional Materials
GEG1121
Web GIS & Internet GIS
Dr.Samir Mahmoud
1

2. Table of contents
No Topics Slide no
I Title 1
Ii Instructor 2
Iii Table of content 3
1 Basic Concept of Internet, Web and Web GIS. 4
2 Internet GIS (Web Principles) 34
3 Web GIS architecture and components 57
4 Web GIS Resent Technology 72
5 Internet GIS applications& Issues in the Development 94
6 HTML Programming 114
7 CSS 3 and JavaScript 116
8 Geospatial web services 121
2

3. 01-Basic Concept of Internet,
Web and Web GIS.
3

4. Overview
• Main topics
– introduces the Internet, the World Wide Web, the mobile Web, and GIS.
– presents early examples of Web GIS and how it has evolved in the Web 2.0
era.
– the definition and characteristics of Web GIS.
– functions of Web GIS and its applications in e-business, e-government, e-
science, and daily life.
4

5. Introduction
• The Web changes everything, and GIS is no exception.
• Web GIS, as the combination of the Web and geographic information
system(s) or science (GIS).
• GIS has turned into a compelling Internet application that has
prompted many people to take advantage of the Web.
• The vast majority of Internet users use simple mapping or other
spatially enabled applications over the Web at some point, though
many are not aware of it.
• The Web has unlocked the power of GIS, from offices to laboratories.
• It has put GIS in the homes of millions and in the hands of billions,
and made it usable across all industries, from government and
business to education and research.
5

6. What is the Internet
• Internet: refers to Interconnecting Networks. Is a massive network of
networks that connects millions of computers around the world.
6

7. History of Internet
• During the Cold War in the 1960s, the U.S. Department of Defense
Advanced Research Project Agency (ARPA) initiated a research project to
create a network of geographically separated computers that could
exchange information even if some of the nodes stopped functioning or
were destroyed in the event of nuclear attack.
• In 1969, this research successfully connected the main frames of four
western universities Stanford University; University of California, Santa
Barbara; University of California, Los Angeles; and Utah State University
leading to the invention of the Internet.
7

8. ARPANet, which successfully connected the mainframes of four western
universities, is recognized as the predecessor of the global Internet.
8
Advanced Research Project Agency Net

9. History of Internet - con
• The network, Advanced Research Project Agency (ARP) Net, was the
predecessor of the global Internet (Internet Society 2003). New computers
were gradually added to the network, including those of government
agencies, universities, and research institutes, bringing the number of
"nodes" to fifty-seven in 1975. The networks of these agencies are
interconnected, thus forming the Internet.
• By the end of 1989, more than 100,000 computers were globally
connected to the Internet.
9

10. History of Internet - con
• The Internet didn't gain popularity until the 1990s. Before then, the
services available over the Internet mainly consisted of e-mail, Usenet
News (a way to provide news to Internet users before the Web was
invented), file transfer, and Telnet (a protocol that allows you to log in to
another computer and operate the computer remotely).
• The Internet was complex to use, its content was not nearly as rich as it is
today, and its users were mostly professionals from research institutes and
government agencies.
10

11. How does the Internet works
• The Internet network, computers are linked through wires or wireless.
• The Internet is a global network of computers each computer connected
to the Internet must have a unique address.
• Internet addresses are in the form nnn.nnn.nnn.nnn where nnn must be a
number from 0 - 255.
• The address is known as an IP address. (IP stands for Internet Protocol).
11

12. Two computers connected to the Internet; your computer with IP address
1.2.3.4 and another computer with IP address 5.6.7.8. The Internet is
represented as an abstract object in-between.
12

13. World Wide Web (www)
• In 1990, Tim Berners-Lee, a researcher at European Organization for Nuclear
Research (CERN) dramatically changed the way the Internet was used.
• While trying to find an easy way to share and exchange documents with his
colleagues, Berners-Lee invented HTTP (Hypertext Transfer Protocol), HTML
(Hypertext Markup Language), and the URL (Uniform Resource Locator).
• He developed the world's first Web server and a Web browser, naming his
invention the World Wide Web. With the birth of the World Wide Web, Berners-
Lee is undisputedly recognized as the "father of the Web“.
• The Web has made the Internet interesting, easy, and fun to use; it has forever
changed the way we live and work; and it has changed the computer's role from
calculation to one of communication and entertainment.
13

14. World Wide Web (www)
• A basic Web application is essentially a client/server (C/S) architecture, in
which the computers are divided into web clients and web servers.
– Web Client : Your web browser, When you type an URL, the web browser
connects to the web server and brings and shows that particular information
to you.
– Web Server : to share your information in the internet, information stored in
web servers. You use URL to access these information.
14

15. How does the Web works
• A user uses a Web client, usually a browser, and initiates a request
to the Web server by typing a URL in the browser address bar or
clicking a URL link on a Web page.
• The Web server receives the request, parses the URL, locates the
corresponding document or script, and returns the document or
else executes scripts and returns the result of the script to the client
as a response. The response is commonly in HTML format.
• The Web client (the browser) receives the response, renders it, and
presents it to the user.
15

16. Web client initiates a request to the Web server, Web server receives the
request and returns the document to the client as a response.
16

17. Internet vs Web
• The terms Internet and the World Wide Web are synonymous in the minds
of many, but they have different meanings.
– Internet: a massive network of networks that connects millions of computers worldwide
using a number of protocols: HTTP, SMTP (Simple Mail Transfer Protocol), FTP,
IRC(Internet Relay Chat), IM (instant messaging), Telnet, and P2P(peer-to-peer).
– World Wide Web(WWW): a system of interconnected hypertext documents and
programs that can be accessed via the Internet primarily by using HTTP.
– So it is that the Web is the "face" of the Internet (Douglas 2008).
– Web is still quickly expanding, from wired networks into wireless networks, fed by the
popularity of the mobile Web, or wireless Web.
– The advances of mobile devices such as smart phones and wireless communications
technologies, have facilitated its spread.
17

18. GIS
• GIS is a system of computer hardware, software, and procedures that
capture, store, edit, manipulate, analyze, and visualize geo-referenced
data.
• The first operational GIS (Canada G.I.S.- CGIS) was developed in 1962 by
Roger Tomlinson (“father of GIS”) for land inventory and planning.
• GIS capabilities go beyond mapping. GIS offers a rich set of analytical
functions.
• The emergence of Web GIS is unlocking the power of GIS to a wider
audience.
18

19. GIS - con
• GIS abstracts the real world into data
models consisting of multiple layers,
where each layer represents a
different theme of real-world data.
This data can be presented in 2D or 3D
maps, and GIS can be used to perform
analysis to solve real-world problems
such as finding the areas that are at
high flood risk, what the total property
damage would be, and what
alternative plans can be made to
mitigate the risk.
19

20. Web GIS origin and Evolution
• In 1993, the Xerox Corporation Palo Alto Research Center (PARC)
developed a web-based map viewer, marking the origin of Web GIS.
• Users could use the map viewer in a web browser and click a link to a
function.
• The browser sends an HTTP request to the web server, the server receives
the request, performs mapping operations, generates a new map, and
returns it to the browser. The browser displays the map as a map image.
20

21. 21
Fig. 1. Typical 3-tier system architecture (left) compared with SaaS &
desktop GIS architecture (right) on the example of Esri solutions.

22. The PARC Map Viewer is recognized as the first Web GIS application. It allowed
people to use basic map functions from anywhere with an Internet connection
without having to install GIS software and data locally.
22

23. Google map Now
https://www.google.com/maps/@13.6234282,25.2508337,1410m/data=!3m1!1e3?hl=en-US
23

24. 24
Fig. The Visual Pollution app. map layer design:
a) legend (hidden) switched to charts windows; b) main map c) map toolbar with filtering
function; d) pop-up window with trend information and GeoForm questions overview chart.

25. 25
Fig. 4. 3D viewer mode of Visual Pollution app with pop-up window displaying single
USU source datasets.

26. Web GIS Concepts
• Web GIS started off as GIS running in Web browsers and has evolved into Web GIS
serving desktop and mobile clients.
• Web GIS is any GIS that uses Web technology to communicate between
components: server (identified by URL) and client (a browser, a desktop
application, or a mobile application). The communication is via HTTP. The format of
the response can be an HTML, binary image, XML(Extensible Markup Language),
or JSON(JavaScript Object Notation).
• The simplest architecture: 2-tier client-server (C-S) system. Server program runs on
the Web or in the cloud. C-S can be on one computer.
• Multi-tier system: 3 tier (including a data tier), 3 tiers in mashup Web GIS.
26

27. The simplest architecture of Web GIS should have at least a Web application
server and a client, which can be a Web browser, desktop client, or mobile client.
The server and the client communicate via HTTP.
27

28. Web GIS & Desktop GIS
• Web GIS and desktop GIS are increasingly intertwined. Web GIS relies on
desktop GIS to author resources.
• Desktop GIS, on the other hand, has expanded its functionality to make
use of the resources on the Web. For instance, as an ArcGIS desktop
user, you can use basemaps available over the Web, such as those
served by USGS or Microsoft Bing Maps, without having to have your
own copy of the data on your local computer.
28

29. Web GIS & Internet GIS
• Web GIS is closely related to two other terms: Internet GIS and
the geospatial Web. Internet GIS and Web GIS are often used
synonymously. however, the two are slightly different.
– The Internet supports many services, and the Web is only one of them.
– GIS that uses any of the Internet services, and not just the Web, can be
considered Internet GIS making Internet GIS theoretically broader than
Web GIS.
– In reality, the Web is the chief attraction of the Internet and is the most
commonly used Internet service. Thus, Web GIS is the most pervasive
form of Internet GIS.
29

30. Web GIS & GeoWeb
• The geospatial Web, or GeoWeb, is another term used to refer to
Web GIS. However, the definition of GeoWeb is not identical to
Web GIS.
– One definition of the GeoWeb is the merging of geospatial information with
abstract (nongeospatial) information (e.g.; Web pages, photos, videos, and
news) that currently dominates the Web (Haklay, Singleton, and Parker 2008).
30

31. Web GIS and other related GIS terms
• A GIS basically consists of hardware, software, data, and users. It is interesting to
see how the distance between these physical components has increased over the
years.
– In the 1960s and 1970s, these components were usually collocated on one computer.
– In the 1980s and early 1990s, distributed GIS emerged with the adoption of a local area
network (LAN).
– These components no longer needed to be collocated and were commonly located
separately in one or multiple buildings of an organization.
– With the birth of Web GIS, these components are now separated even further apart.
– Most GIS users sitting on one side of the globe can access a server located on the other
side of the globe.
– With the emergence of newer technologies such as Web services and mas hups, a client
can use data from one server and functions from another.
– The server of one client can be the client of another server, further separating and
distributing the components of a GIS.
31

32. Web GIS is shown in relation to other related GIS terms. While Internet GIS has a
slightly broader coverage, Web GIS is the most widely used form of Internet GIS.
Thus, many people use the terms synonymously.
32

33. Characteristics of Web GIS
• Global reach by HTTP.
• Support a large number of users simultaneously: requires high performance and
scalability.
• Better cross-platform capability:
• Easy to use for end users. “If I do not know how to use your site, it is your fault”.
• Unified system update.
• Diverse applications. Neogeopgarphy, ("new geography“), is commonly applied to the
usage of geographical techniques and tools used for personal and community activities
or for utilization by a non-expert group of users.
33

34. Functions of Web GIS
• Mapping/visualization and query (attribute or spatial).
• Collaborative collection of geospatial information.e.g
OpenStreetMap,Googleearth
• Geospatial analysis: measurement, optimal driving path,
routing, pollution dispersion modeling, retail site
selection.
34

35. Uses of Web GIS
• Web GIS as a new business model and a new type of commodity:
• Web GIS as an engaging and powerful tool for e-government.
• E.g., A new infrastructure for e-science:
• E-Science (or eScience) is computationally intensive science that is carried out
in highly distributed network environments, or science that uses
immense data sets that require grid computing (the federation of computer
resources from multiple administrative domains to reach a common goal).
• Web GIS provides an infrastructure for geo-science research collaboration.
35

36. Uses of Web GIS - con
• Web GIS in daily life: location-based service (LBS) supported by mobile Web,
smart phones and tablets.
• LBS include services to identify a location of a person or object, such as
discovering the nearest banking cash machine or the whereabouts of a friend
or employee.
• LBS include parcel tracking and vehicle tracking services. LBS can
include mobile commerce when taking the form of coupons or advertising
directed at customers based on their current location.
• They include personalized weather services and even location-based games.
36

37. 02-Internet GIS (Web Principles)
37

38. Lecture 02 - Overview
• Main topics
– Web principles.
• Lab 01
– HTML Programming
38

39. WEB PRINCIPLES
• A basic Web application is essentially a client/server (C/S)
architecture, in which the client is specifically called a Web client, and
the server is called a Web server.
• Basic Web applications usually have a three-tier architecture
consisting of the data tier, logical tier, and presentation tier.
• The Web client is typically a Web browser thus, the basic Web
architecture is also referred to as the browser/server (B/S)
architecture.
39

40. The basic architecture of a Web application includes three
tiers.
40

41. WEB PRINCIPLES - con
• The basic workflow of a Web application is as follows:
– A user uses a Web client, usually a browser, and initiates a request to the
Web server by typing a URL(Uniform Resource Locator) in the address bar
or clicking a URL link on a Web page.
– The Web server receives the request, parses the URL, locates the
corresponding document or script, and returns the document or else
executes scripts and returns the result of the script to the client as a
response. The response is commonly in HTML format.
– The Web client (the browser) receives the response, renders it, and
presents it to the user.
41

42. WEB PRINCIPLES - con
• The three foundational linchpins of the World Wide Web
(WWW) are HTTP, the URL, and HTML.
• These protocols were invented by Tim Berners-Lee in
1990.
• These technologies are now international standards, and
their specifications are managed and maintained by W3C
(World Wide Web Consortium).
42

43. HTTP
• As a protocol, HTTP (Hypertext Transfer Protocol) defines
a set of rules and procedures that both Web clients and
Web servers use to communicate with each other.
• HTTP defines eight methods of request: GET, POST, HEAD,
PUT, DELETE, TRACE, OPTIONS, and CONNECT. GET and
POST are the two most commonly used requests.
• Both HTTP request and response messages have headers
and bodies.
43

44. HTTP - con
• The following information is typical of what can be found
in an HTTP response header:
– Cache control: specifies directives that the client must obey (e.g.,
no cache)
– Content type: the MIME (Multipurpose Internet Mail Extensions)
type indicates whether the message body is HTML (text/html), a
MEG image (image/jpeg), an MP3 audio file (audio/ .mpeg3), or
other file type
– Status code: denotes the status of the response (e.g., 200 means
success, 403 means forbidden, and 500 means server error).
44

45. HTTP characteristics
• HTTP is characterized as simple, stateless, and flexible:
– Simple: In general, an HTTP communication scenario has three
steps:
(1) an HTTP client makes a connection to a Web
server and sends a request method to the HTTP
server
(2) the server processes the client's request while the
client waits for the server's response
(3) the server responds with the status code in the
response header and data (if any) to the client and
closes the connection.
45

46. HTTPS
• HTTPS (Secure Hypertext Transfer Protocol) refers to the use of
ordinary HTTP over an encrypted Secure Sockets Layer (SSL)
connection.
• With a plain HTTP connection, the data transferred between the
client and the server can be intercepted. HTTPS avoids eavesdropping
by encrypting the data.
• This ensures reasonable protection over the Internet, which is largely
an insecure network.
• HTTPS is often used to transfer sensitive data such as personal user
profiles, login passwords, and credit card information..
46

47. URL
• A URL (Uniform Resource Locator) is a subset of the URI (Uniform Resource
Identifier) that specifies where an identified resource is available on the
Internet and the mechanism for retrieving it.
• A URL is often called a Web address. Every Web page has a globally unique
URL.
• Just as a street address is used to locate a household in the real world, a Web
address is used to locate a Web page on the World Wide Web, which holds
billions of Web pages.
• Without a URL, Web clients would not be able to reach a Web server or the
desired resources on the Web server.
• Without URLs, the Web resources could not be interlinked to form the Web.
47

48. URL Syntax
– Proctocol://hostname[:port]/filepathname?query_string#anchor
– Protocol specifies the transport protocol between the client and the
server. Typical examples include HTTP, HTTPS, FTP, and MMS.
– The hostname or IP address specifies the Web server to be reached.
Sometimes, before the host name, there is a user name and a password.
– The port number is optional. When the option is omitted, the default
port for the protocol is used.
– The file path indicates the directory and file name of a resource on the
Web server. Sometimes, the file path is an alias instead of a real directory
or a real file name.
– The query string is optional and is one way to pass parameters to a script
on the Web server.
48

49. HTML
• HTML (Hypertext Markup Language) is the main language for creating
Web pages and is the source code for most Web pages.
• Similar to a Word document, HTML contains contents, a layout, and
formatting information.
• When a Web page is loaded into a Web browser, the Web browser
interprets the HTML code and displays the Web page the way the
Web designer intended it to look.
• As a markup language, HTML is essentially plain text marked by a set
of tags, such as head, body, table, center, and fonts.
49

50. HTML basic Syntax:
• <html>
• <head>
• <title>Page Title</title>
• </head>
• <body>
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
• </body>
• </html>
50

51. HTML EDITOR
51

52. • The <!DOCTYPE html> declaration defines this
document to be HTML5.
• The <html> element is the root element of an
HTML page
• The <head> element contains meta information
about the document.
• The <title> element specifies a title for the
document
• The <body> element contains the visible page
content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
52

53. 53

54. – HTML Tags:
• HTML tags are element names surrounded by angle
brackets:
• <tagname> content goes here... </tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag (opening
tag), the second tag is the end tag (closing tag).
• The end tag is written like the start tag, but with
a forward slash inserted before the tag name.
54

55. Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML5 2014
55
1.HTML Versions:
1.Since the early days of the web, there have been
2.many versions of HTML:

56. HTML Editor:
• Web pages can be created and modified by using
professional HTML editors.
• However, for learning HTML we recommend a simple
text editor like Notepad (PC) or TextEdit (Mac).
• We believe using a simple text editor is a good way
to learn HTML.
• Follow the four steps below to create your first web
page with Notepad or TextEdit.
56

57. HTML Editor – Step 1 - Open Notepad (PC):
• Windows 8 or later:
– Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
• Windows 7 or earlier:
– Open Start > Programs > Accessories > Notepad
•
57

58. HTML Editor – Step 2 - Write Some HTML:
• Write or copy some HTML into Notepad.
• <!DOCTYPE html>
• <html>
• <body>
• <h1>My First Heading</h1>
• <p>My first paragraph.</p>
• </body>
• </html>
58

59. Server-Side Technology
• Web application servers host the Web sites that you read and serve the data
for other Web applications to use. They are responsible for accepting HTTP
requests from clients and serving clients with HTTP responses. Since they
comply with HTTP specifications, Web application servers know how to
communicate with Web clients.
• Web application servers are also containers that allow certain scripts such as
JSP (JavaServer Pages), Java Servlet, and ASP.NET to run inside.
59

60. Server-Side Technology - con
• Examples of Web application servers include the following:
– Apache Web Server and Tomcat from the Apache Software
Foundation: Apache is an open-source Web server characterized
by simple, fast, and stable performance.
– IIS (Internet Information Services, formerly Internet Information
Server), from Microsoft: is a Web server application for use with
Microsoft Windows.
60

61. Client-Side Technology
• Web clients include a variety of programs and applications that can
run inside or outside the browser, including desktop applications and
mobile applications, which run outside the browser.
• A Web browser is a software application for retrieving and presenting
information resources on the Web.
• It provides a means for looking at and interacting with the Web. For
most users, Web browsers represent the "face" of the Web.
• Technically, a Web browser is a client that implements HTTP
specifications, HTML specifications, and JavaScript specifications,
meaning that it knows how to communicate with Web servers, how to
display an HTML, and how to interpret and execute JavaScript.
61

62. Web Programming
• Web scripts run in one of two places, the client side, also called the
front-end, or the server side, also called the back-end.
– Server-side programs execute on the Web server and within the Web application
server container.
– Client-side programs execute on the Web Browser.
62

63. Web Applications can be developed with a variety of options
63

64. Server-Side Programming
• The main programming languages include:
– JavaEE (Java Enterprise Edition), Servlet, JSP, and JSF (JavaServer
Faces), technologies of the Java family: These technologies are
widely used for developing Web applications. Java is similar to the
C++ programming language,
– ASP.NET, an important part of the Microsoft .NET framework: The
.NET framework is a common environment for building,
deploying, and running Web services and Web applications. The
.NET framework has technologies for both server-side and
client/browser-side programming development. ASP.NET has a set
of libraries that facilitate users writing ASP.NET Web pages (.aspx)
in C# (a language that is different from C++ and Java though built
with similar syntax and semantics to C++ and Java) and VB.NET.
64

65. Client-Side Programming
 JavaScript: simple, nonprofessional programmers can work with it; platform independent
 AJAX(Asynchronous JavaScript and XML): is a group of interrelated web
development techniques used on the client-side to create asynchronous web applications.
With Ajax, web applications can send data to, and retrieve data from, a server asynchronously
(in the background) without interfering with the display and behavior of the existing page.
 Adobe Flex: Flex is a highly productive, open source application framework for building and
maintaining expressive web applications that deploy consistently on all major browsers,
desktops, and devices.
 Microsoft Silverlight: a powerful development tool for creating engaging, interactive user
experiences for Web and mobile applications. Silverlight is a free plug-in, powered by the .NET
framework and compatible with multiple browsers, devices and operating systems, bringing a
new level of interactivity.
 Oracle/Sun JavaFX: JavaFX is a software platform for creating and delivering rich internet
applications (RIAs) that can run across a wide variety of devices. The current release has
support for desktop computers and web browsers on Windows, Linux, and Mac OS X.
65

66. Data Exchange Format
The data format used for exchanging messages between the server and the client
can greatly influence the load to bandwidth and therefore the efficiency of the
application. There are three main formats for exchanging data over the Web:
 XML (Extensible Markup Language) is a markup language that allows you to define your
own tags and attributes. XML has many strengths in that it is platform independent
because it is a plain text file; it is self-descriptive since its tags and attributes usually have
easy-to-understand names; it can be processed automatically, because it is well
structured; and it can be validated against its schema. Because of these advantages, XML
is probably the most commonly used data exchange format on the Web. However, it also
has some disadvantages. It is bulky because it uses tags to delimit the data. And parsing
XML (i.e., extracting values from certain nodes in an XML) is not efficient, especially in
languages such as JavaScript, the most commonly used scripting language on the Web.
66

67. Data Exchange Format - con
• JSON (JavaScript Object Notation) is a lightweight computer data interchange format. It
is derived from the object literals of JavaScript, as defined in the ECMA (European
Computer Manufacturers Association) Script Programming Language Standard. JSON is
smaller in size than XML, and it is more efficient to parse in JavaScript where JSON is a
native data type. The main application of JSON is in Web application programming,
where it serves as an alternative to the XML format.
• AMF (Action Message Format), developed by Adobe, is a binary format used primarily for
exchanging data between Adobe Flex/Flash Web client applications and Web servers. AMF is a
native data type in Flex, making it more efficient to process than JSON. Compared with XML, which
is a native data type in Flex as well, AMF is much smaller than XML, making AMF more efficient to
transfer and process. Although AMF is mostly used in Flex applications, there are implementations
of AMF in PHP, Java, and .NET as wells
67

68. Uses XML and JSON to describe the same information
concerning the names and hobbies of two students.
68