maps on the web - unbestef/unb_home_files/webmappingbookslides/chap… · publishing maps on the...
Post on 30-Apr-2020
5 Views
Preview:
TRANSCRIPT
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
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
< p>UNIVERSITY OF NEW BRUNSWICK< /p> <img src= “map.jpg”>
SERVER
Static Maps…
6
<html>
<head>
<title>UNB Campus</title>
</head>
<body>
<p>UNIVERSITY OF NEW BRUNSWICK</p>
<img src= "map.jpg">
</body>
</html>
Static Maps…
• Clickable maps …
– Images may have “sensitive areas” …
7
associate a hyperlink
to these areas…
Static Maps…
• Clickable maps …
8
Static Maps…
• Clickable maps …
9
<html>
<head>
<title>UNB Campus</title>
</head>
<body>
<p>UNIVERSITY OF NEW BRUNSWICK</p>
<img src="map.jpg" width="319"
height="424" usemap="#UNBMap">
<p>Click on the image to see more</p>
<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…
• Enriched functionality by extending…
– the client side functionality
– the server side functionality
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
Extend the Client-side…
• 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
< p>UNIVERSITY OF NEW BRUNSWICK< /p> <img src= “map.pdf”>
SERVER
PDF Reader
toolbox
Extend the Client-side…
• 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 + …
Extend the Client-side…
• Plugins…
– Scalable Vector Graphics (SVG) …
• 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">
16
Extend the Client-side…
• 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>
Extend the Client-side…
• Plugins…
– Scalable Vector Graphics (SVG) …
• 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
Extend the Client-side…
• Plugins… SVG
CLIENT
SERVER
HTTP
GET http://server/unb.htm
PUT { unb.htm, map.svg }
SVG Viewer (plugin)
html (unb.htm)
SVG (map.svg)
< p> UNIVERSITY OF NEW BRUNSWICK</p> <object= “map.svg”>
<svg> <poly>…</poly> <rect>… </rect> </svg>
Extend the Client-side…
• Plugins…
– Google Earth Viewer
22
Extend the Client-side…
• 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
Extend the Client-side…
• Java Applets – Examples…
24
Extend the Client-side…
• Java Applets…
25
CLIENT SERVER
HTTP
GET http://server/unb.htm
PUT { unb.htm
map.jpg
map.class }
html (unb.htm)
< p> UNIVERSITY OF NEW BRUNSWICK< /p> <applet src= “map.class”>
Java Virtual Machine
map.java
Java code
map .class
Java - applet code
Extend the Client-side…
• JavaScripts…
26
CLIENT SERVER
HTTP
GET http://server/unb.htm
PUT { unb.htm, map.jpg }
html (unb.htm)
< p> UNIVERSITY OF NEW BRUNSWICK< /p>
Java Virtual Machine
<img src= “map.jpg”> <javascript= “zoom_buttons”>
<javascript= “pan_buttons”> <javascript= “mouse_XY”>
Interactive Maps…
• Enriched functionality by extending…
– the client side functionality
– the server side functionality
27
CLIENT HTTP/HTML
GET
PUT
SERVER
Extend the Server-Side
• Common Gateway Interface (CGI)
e.g., http://server?doThis¶meter1¶meter2
28
CLIENT HTTP/HTML
GET
PUT
SERVER
CGI
Extend the Server-Side
• GeoNames Server
29 http://www.geonames.org/
Extend the Server-Side
• Common Gateway Interface (CGI)
e.g., http://server?doThis¶meter1¶meter2
30
CLIENT HTTP/HTML
GET
PUT
SERVER
CGI
http://api.geonames.org/gtopo30?lat=45.95&lng=-66.67
&username=demo
Extend the Server-Side
31
http://api.geonames.org/gtopo30?lat=45.95&lng=-66.67&username=demo
Extend the Server-Side
32
http://api.geonames.org/cities?north=46.0&south=45.8&east=-66.5&west=-66.7
&username=demo
Extend the Server-Side
• Common Gateway Interface (CGI)
33
CLIENT
SERVER
HTTP
GET http://server/unb.htm ? satellite_image
&Xmin&Ymin&Xmax&Ymax
PUT { unb.htm, map.jpg }
CGI
Application
satel lite_image &Xmin&Ymin &Xmax&Ymax
Database
html (unb.htm)
< p> UNIVERSITY OF NEW BRUNSWICK< /p> <img src= “map.jpg”>
map / image ( map.jpg)
Extend the Server-Side
• 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
Extend the Server-Side
• 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
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=nhn:hydrography,nrn:roadnetwork
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=imagery:Landsat7
http://ows.geobase.ca/wms/geobase_en?
service=wms
&request=GetMap
&version=1.1.1
&srs=epsg:4269
&bbox=-180,-90,180,90
&width=800&height=600
&style=&format=image/png
&layers=imagery:Landsat7
http://ows.geobase.ca/wms/geobase_en?
service=wms
&request=GetMap
&version=1.1.1
&srs=epsg:4269
&bbox=-180,-90,180,90
&width=800&height=600
&style=&format=image/png
&layers=imagery:Landsat7
Interactive Maps…
• Enriched functionality by extending…
– the client side functionality
– the server side functionality
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
Extend both the Client and Server
59
CLIENT SERVER
HTTP
GET
PUT
Google Earth (plugin)
Google Earth CG I
Google Maps
Database
HTML
text
image
GoogleEarth
Application
Extend both the Client and Server
60
CLIENT SERVER
HTTP
GET
PUT
Java Virtual
Machine
ESRI
ArcServer
Geo-
Database
HTML
text
image
Java Applet
Application
Extend both the Client and Server
61
http://geonb.snb.ca/geonb/
Extend both the Client and Server
62
CLIENT SERVER
HTTP
GET
PUT
Java Virtual
Machine
UMN
MapServer
Geo-
Database
HTML text
+
JavaScripts
image
Extend both the Client and Server
• 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
top related