maps on the web - unbestef/unb_home_files/webmappingbookslides/chap… · publishing maps on the...

Maps on the Web

Emmanuel Stefanakis

http://www2.unb.ca/~estef/

Stefanakis, E., 2015. Web Mapping and Geospatial Web Services.

CreateSpace Independent Publ. [In English], pp.168.

Get a copy from Amazon

Chapter 1



http://www.amazon.com/Web-Mapping-Geospatial-Services-Introduction/dp/1514757559/ref=sr_1_1?ie=UTF8&qid=1436567905&sr=8-1&keywords=emmanuel+stefanakis

Publishing Maps on the Web

• The World Wide Web …

– A common means of publishing maps

• Web maps …

– Million of people use web maps daily

– Few of them know how they are actually

generated

2

The Web…

• Communication of computers

– Client-Server Architecture….

3

CLIENT

HTTP/HTML

GET

PUT

SERVER

Publishing Maps on the Web

• Two approaches …

– Static maps

• Apply the basic web resources

– Interactive maps

• Enriched functionality by extending

– The client side functionality

– The server side functionality

4

Static Maps…

5

CLIENT

HTTP

GET http:// server/unb.htm

PUT { unb.htm, map.jpg }

html text (unb.htm)

map / image map.jpg

UNIVERSITY OF NEW BRUNSWICK <img src= “map.jpg”>

SERVER

Static Maps…

6

<html>

<head>

<title>UNB Campus</title>

</head>

<body>

UNIVERSITY OF NEW BRUNSWICK

<img src= "map.jpg">

</body>

</html>

Static Maps…

• Clickable maps …

– Images may have “sensitive areas” …

7

associate a hyperlink

to these areas…

Static Maps…


8

Static Maps…


9

<html>

<head>

<title>UNB Campus</title>

</head>

<body>

UNIVERSITY OF NEW BRUNSWICK

<img src="map.jpg" width="319"

height="424" usemap="#UNBMap">

Click on the image to see more

<map name="UNBMap">

<area href="OldArtsBuilding.jpg" shape="polygon"

coords="113,315, 101,334, 164,372, 172,346">

<area href="http://gge.unb.ca" shape="rect"

coords="93,39, 135,94">

<area href="BusStop.jpg" shape="circle"

coords="85,233, 10">

</map>

</body>

</html>

Interactive Maps…

• Enriched functionality by extending…

– the client side functionality

– the server side functionality

10

CLIENT HTTP/HTML

GET

PUT

SERVER

Interactive Maps…




11

CLIENT HTTP/HTML

GET

PUT

SERVER

Extend the Client-side…

• Plugins…

– make the web browser capable to read and process

additional formats

12

plugin

CLIENT HTTP/HTML

GET

PUT

SERVER

• Plugins

13

PDF Reader

(plugin)

CLIENT

HTTP

GET http:// server/unb.htm

PUT { unb.htm, map.pdf }

html text (unb.htm)

map / image map.pdf

UNIVERSITY OF NEW BRUNSWICK <img src= “map.pdf”>

SERVER

PDF Reader

toolbox


• Plugins…

– Scalable Vector Graphics (SVG) …

• is a language for describing two-dimensional

graphics and graphical applications

• it is based on the XML standard

• it describes…

– Content + Map Symbols + …

• Plugins…


• A W3C standard (current version 1.1)…

– http://www.w3.org/Graphics/SVG/

• SVG Document Type Declaration (DTD)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN“

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">


• Plugins…

– Scalable Vector

Graphics (SVG) …

SVG…

• Plugins…

– SVG

SVG…

<?xml version="1.0" standalone="no"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

<a xlink:href="parthenon.jpg"> <polygon points="408,238

560,195 578,260 430,306" style="fill:red; stroke:blue;stroke-width:1"/> </a>


• Plugins…


• An SVG document can be created…

– from scratch in a text editor

– using an SVG editor

– as an output of another program

» e.g., ArcGIS, Adobe Illustrator, etc.

• An SVG file can be viewed …

– in a Web browser if an appropriate plugin is

available

• Plugins… SVG

CLIENT

SERVER

HTTP

GET http://server/unb.htm

PUT { unb.htm, map.svg }

SVG Viewer (plugin)

html (unb.htm)

SVG (map.svg)

 UNIVERSITY OF NEW BRUNSWICK <object= “map.svg”>

<svg> <poly>…</poly> <rect>… </rect> </svg>


• Plugins…

– Google Earth Viewer

22


• Java Applets – JavaScripts (API’s)

– The functionality varies …

• from very simple button interactivity

• to a sophisticated mapping environment

23

CLIENT HTTP/HTML

GET

PUT

SERVER

JVM

Java Virtual Machine


• Java Applets – Examples…

24

• Java Applets…

25

CLIENT SERVER

HTTP


PUT { unb.htm

map.jpg

map.class }

html (unb.htm)

 UNIVERSITY OF NEW BRUNSWICK <applet src= “map.class”>


map.java

Java code

map .class

Java - applet code

• JavaScripts…

26

CLIENT SERVER

HTTP



html (unb.htm)

 UNIVERSITY OF NEW BRUNSWICK


<img src= “map.jpg”> <javascript= “zoom_buttons”>

<javascript= “pan_buttons”> <javascript= “mouse_XY”>

Interactive Maps…




27

CLIENT HTTP/HTML

GET

PUT

SERVER

Extend the Server-Side

• Common Gateway Interface (CGI)

e.g., http://server?doThis&parameter1&parameter2

28

CLIENT HTTP/HTML

GET

PUT

SERVER

CGI


• GeoNames Server

29 http://www.geonames.org/

http://www.geonames.org/

http://www.geonames.org/



e.g., http://server?doThis&parameter1&parameter2

30

CLIENT HTTP/HTML

GET

PUT

SERVER

CGI

http://api.geonames.org/gtopo30?lat=45.95&lng=-66.67

&username=demo


31

http://api.geonames.org/gtopo30?lat=45.95&lng=-66.67&username=demo


32

http://api.geonames.org/cities?north=46.0&south=45.8&east=-66.5&west=-66.7

&username=demo

33

CLIENT

SERVER

HTTP

GET http://server/unb.htm ? satellite_image

&Xmin&Ymin&Xmax&Ymax


CGI

Application

satel lite_image &Xmin&Ymin &Xmax&Ymax

Database

html (unb.htm)

 UNIVERSITY OF NEW BRUNSWICK <img src= “map.jpg”>

map / image ( map.jpg)


• CGI – Example (JPL NASA Server)

34

http://wms.jpl.nasa.gov/wms.cgi

?request=GetMap

&service=WMS

&version=1.1.1

&srs=EPSG:4326

&format=image/jpeg

&styles=

&bbox=-180,-90,180,90

&width=600

&height=300

&layers=global_mosaic


• CGI – Example (JPL NASA Server)

35

http://wms.jpl.nasa.gov/wms.cgi

?request=GetMap

&service=WMS

&version=1.1.1

&srs=EPSG:4326

&format=image/jpeg

&styles=

&bbox=23,37.5,25,38.5

&width=600

&height=300

&layers=global_mosaic

http://ows.geobase.ca/wms/geobase_en?

service=wms

&request=GetMap

&version=1.1.1

&srs=epsg:4269

&bbox=-66.77,45.87,-66.57,46.01

&width=800&height=600

&style=&format=image/png

&layers=nrn:roadnetwork


service=wms

&request=GetMap

&version=1.1.1

&srs=epsg:4269

&bbox=-66.77,45.87,-66.57,46.01



&layers=nhn:hydrography,nrn:roadnetwork


service=wms

&request=GetMap

&version=1.1.1

&srs=epsg:4269

&bbox=-66.77,45.87,-66.57,46.01



&layers=imagery:Landsat7


service=wms

&request=GetMap

&version=1.1.1

&srs=epsg:4269

&bbox=-180,-90,180,90



&layers=imagery:Landsat7

Interactive Maps…




57

CLIENT HTTP/HTML

GET

PUT

SERVER

Extend both the Client and Server

• Example architecture…

58

CLIENT HTTP/HTML

GET

PUT

SERVER

CGI Plugin/

JVM


59

CLIENT SERVER

HTTP

GET

PUT

Google Earth (plugin)

Google Earth CG I

Google Maps

Database

HTML

text

image

GoogleEarth

Application


60

CLIENT SERVER

HTTP

GET

PUT

Java Virtual

Machine

ESRI

ArcServer

Geo-

Database

HTML

text

image

Java Applet

Application


61

http://geonb.snb.ca/geonb/




62

CLIENT SERVER

HTTP

GET

PUT

Java Virtual

Machine

UMN

MapServer

Geo-

Database

HTML text

+

JavaScripts

image


• MapServer (CGI) and Openlayers (JS)

63

Involve a third party Mashups

• Map-Mashups…

64

Involve a third party Mashups

• Alternative architectures

– Web-based mashups

• Combination of the content and formatting on

the client side (web browser)

– Server-based mashups

• Combination of the content and formatting on

the server

65

Server-based Mashups

66

CLIENT SERVER

HTTP

GET

PUT

Java Virtual

Machine

UMN

MapServer

Geo-

Database

HTML text

+

JavaScripts

image

Third Party

(Google Server)

Web-based Mashups

67

CLIENT SERVER

HTTP

GET

PUT

Java Virtual

Machine

UMN

MapServer

Geo-

Database

HTML text

+

JavaScripts

image

Third Party

(Google Server)

Map Mashups…

68

Base Map: Google Satellite

Layers: Municipalities, Road Network, Buildings

Map Mashups…

69

Base Map: Google Map

Layers: Municipalities, Road Network

70

Map Mashups…

71

Map Mashups…

72

Map Mashups…

References

• ISO – International Organization for Standardization, http://www.iso.org/

• Kobben, B., 2000. Publishing maps on the Web. In Kraak and Brown,

2000.

• Kraak, J.M., and Brown A. (Eds) 2000. Web Cartography. CRC Pub.

• Mitchell, T., 2005. Web Mapping. O’Reilly:USA.

• OGC – Open Geospatial Consortium, http://www.opengeospatial.org/

• OSGeo – Open Source Geospatial Foundation, http://www.osgeo.org/

• W3C – World Wide Web Consortium, http://www.w3.org/

73

maps on the web - unbestef/unb_home_files/webmappingbookslides/chap… · publishing maps on the...

Documents