1. IMPLEMENTATION OF A WEB MAP SERVICE-BASED MUNICIPAL GIS WEB SITE
John Crews
The University of Texas at Dallas
GIS Master’s Project
August 1, 2006

2. Abstract Proprietary Internet Map Server software Web Map Services
Serves your GIS data
Examples:
ESRI ArcIMS
Intergraph GeoMedia Web Map
MapInfo ProServer and Map Xtream
Set-up required
Expensive
Web Map Services
A type of Web Service
Data included
Enhanced performance
Application Programming Interfaces

3. GIS and the Internet DECADE INTERNET GIS PLATFORM 1970s
Start of the Internet
GIS as an industry
Mainframe - Minicomputers
1980s
Connection protocols
GIS software
(Arc/Info)
Unix Workstation
1990s
World Wide Web
Map web sites – (MapQuest)
Personal Computer
2000s
Client-side processing
Web Map Services
Internet

4. 1969 - 1980 ARPANET ESRI INTERGRAPH GIRAS ERDAS
Start of the Internet – GIS Companies – Mainframes to Minis

5. 1980 - 1990 GPS ARC/INFO GRASS PC ARC/INFO MAPINFO
Shrink-wrapped GIS software – Minis to Workstations

6. 1990 - 2000 TerraServer World Wide Web Mosaic Internet Explorer 1.0
Netscape Navigator
ArcView
Mapquest.com
ArcIMS
The Web – Internet mapping – Workstations to PCs

7. 2000 - Present Google Maps Yahoo! Maps API ArcGIS Server Google Earth
Google Maps API
ArcGIS Server
Windows Live Local
Client-side Processing - Web Map Services - PCs to Browsers

8. Advances in Web Mapping Technologies
Dynamic HTML
Client-side processing/JavaScript
AJAX – Asynchronous JavaScript and XML

9. Web Map Services
Yahoo! Maps
Microsoft Virtual Earth
Google Maps

10. Web Map Services
API – Application Programming Interface Google Maps API:
39 Classes and Types
168 Methods
35 Events
21 Constants

11. Mashups

12. Mashups

13. Mashups: Traffic Cameras

14. Mashups: News

15. Mashups: Real Estate

16. Mashups: Specialty

17. Research Question
Is it possible to use a web map service as the basis for a public municipal geographic information web site?
Can required GIS functionality be included?
Will performance be different?

18. Research Question (continued)
Can required GIS functionality be included?
Display of custom map layers
Display of attribute information of geospatial features
Search and display of geospatial features by attribute(s)
Geocode addresses
Access remote web services

19. Literature Review
Very little peer-reviewed literature available specifically on web map services
Enhancing GIS web site performance
XML, SOAP, WSDL, UDDI - Qiu and Thakkar, 2004
SOAP, Course-grained services, streaming data, binary data - Tu, et al., 2004
Pyramids, Hash index -Yang, et al., 2005
XML, GML, SVG – Chang and Park, 2006
Comparing GIS web sites
Classify government web sites by content and technology used - Campagna and Deplano, 2004
Time to load map data - Baptista and de Paiva, 2005

20. Methods Select an existing proprietary software-based GIS web site
Create a web map service-based GIS web site
Compare the new web site with the existing proprietary software-based web site

21. Methods Select an existing proprietary software-based GIS web site
City of Allen, Texas
Based on ArcIMS
Hosted at UT Dallas
Provides access to
Property records
Polling places
Other layers of interest to citizens

22. Methods Select an existing proprietary software-based GIS web site
Create a map service-based GIS web site

23. Web Map Service API Yahoo! Maps Microsoft Virtual Earth Google Maps
Most mature
Most widely used
Most documentation available

24. Methods (continued) Technologies Used:
ArcGIS Desktop/Visual Basic for Applications – Convert geographic data to XML files and raster tiles
HTML – Web site main page
JavaScript – Customize the web site and interact with Google Maps API
Object-Oriented Programming – Represent vector data
Google Maps API – Objects and methods for customizing the maps on the web site
AJAX (Asynchronous JavaScript and XML) - Add geographic data to the web site
XML (Extensible Markup Language) – File format for providing custom geographic data to the Google Maps API
PHP (PHP Hypertext Preprocessor) – Process client GIS requests
Geocoding – Locate by address; provided by Google Maps
IIS (Internet Information Server) – Web server software

25. Data Web Map Service Data Layers Custom Data Layers Parks
Schools
Parcels
Voting precincts
Polling places
Web Map Service Data Layers
Basemap Layers
Roads
Railroads
Hydrography
Landmarks
Schools
Shopping centers
Recreational areas
Imagery
Satellite
Aerial photography

26. Custom Data – Small Data Sets
Problem: How to display small custom data sets on Google Maps?

27. Custom Data – Small Data Sets
Problem: How to display small custom data sets on Google Maps?
Solution:
Convert data to XML files.
Using JavaScript, create objects representing custom data items when the web page is loaded.
Display the objects as overlays when appropriate.

28. Attribute Data – Small Data Sets
Problem: How to display feature attributes for small data sets on Google Maps?

29. Attribute Data – Small Data Sets
Problem: How to display feature attributes for small data sets on Google Maps?
Solution:
Take advantage of the Google Maps API Info window.
Attach an event listener to each overlay so that when the user clicks on an item, its attributes are displayed in its info window.

30. Attribute Query – Small Data Sets
Problem: How to query by attributes for small data sets on Google Maps?

31. Attribute Query – Small Data Sets
Problem: How to query by attributes for small data sets on Google Maps?
Solution:
Represent each feature as a JavaScript object with properties representing attributes.
When the user submits a query, examine the properties of each feature in the specified data set and create a highlight overlay for each feature that satisfies the query.

32. Custom Data – Large Data Sets
Problem: How to display large custom data sets on Google Maps?

33. Custom Data – Large Data Sets
Problem: How to display large custom data sets on Google Maps?
Solution:
Convert data to image files.
Using JavaScript, create a new map type visible to the Google Maps API.
Display the new map type when appropriate.

34. Map Tiles 12 tiles 0.5 MB 42 tiles 1.4 MB 143 tiles 4.4 MB 480 tiles

35. Attribute Data – Large Data Sets
Problem: How to display feature attributes for large data sets on Google Maps?

36. Attribute Data – Large Data Sets
Problem: How to display feature attributes for large data sets on Google Maps?
MySQL DB
Solution:
Calculate a lon/lat centroid for each feature.
Convert the data set into a server-side spatially-enabled database (MySQL).
3. When a user clicks on a feature…

37. Attribute Data – Large Data Sets
Problem: How to display feature attributes for large data sets on Google Maps?
3. When a user clicks on a feature:
Web Server
PHP
Using a JavaScript program on the client, submit a spatial query to a PHP program on the server.
Using a PHP program on the server, submit a spatial query to the database, parse the result and write the result to an XML format file.
Using a JavaScript program on the client, read the XML file and create overlays for each feature returned.
Display the results in the overlays’ info windows.
SQL
MySQL DB
PHP
Request
AJAX
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

38. Attribute Query – Large Data Sets
Problem: How to query by feature attributes for large data sets on Google Maps?

39. Attribute Query – Large Data Sets
Problem: How to query by feature attributes for large data sets on Google Maps?
When a user submits an attribute query:
Web Server
PHP
Using a JavaScript program on the client, submit an attribute query to a PHP program on the server.
Using a PHP program on the server, submit the attribute query to the database, parse the result and write the result to an XML format file.
Using a JavaScript program on the client, read the XML file and create overlays for each feature returned.
Display the results in the overlays’ info windows.
SQL
MySQL DB
PHP
Request
AJAX
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

40. Geocoding
Problem: How to geocode addresses?

41. Geocoding Problem: How to geocode addresses? Solution:
Use the Google Maps geocoder.
Submit the address to the geocoder.
Parse the JSON/xAL results and retrieve the lon/lat coordinates and formatted address.
Create an overlay for the address.
Display the results in the overlay’s info window.
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

42. Geocoding Web Client User Submits a geocoding request Web client
Submits request
Remote web site
Reads request
Creates file
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API
Web client
Reads new file
Parses lon/lat
Creates object
Displays object as overlay

43. Remote Web Services
Problem: How to access remote web services?

44. Remote Web Services Problem: How to access remote web services?
Solution:
Access services via the remote site’s protocol.
For example, to display data from a remote web site:
The request is submitted to remote web site
The remote web site reads the request and retrieves the appropriate file
The client displays data in a new browser window.
Collin County
Appraisal District
PHP
Request
URL
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

45. Pre-process GIS Data XMLs ArcGIS Desktop Geo DB Image Tiles MySQL DB
Visual Basic for Apps
MySQL DB

46. Web Map Service-based Architecture
Web Server
IIS
Server
Client
Web Client
Browser (IE, etc.)
JavaScript

47. Web Map Service-based Architecture
Web Server
IIS
AJAX
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

48. Web Map Service-based Architecture
Web Server
IIS
XMLs
Parks
Schools
AJAX
AJAX
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

49. Web Map Service-based Architecture
Web Server
IIS
Image Tiles
Parcels
XMLs
Parks
Schools
AJAX
AJAX
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

50. Web Map Service-based Architecture
Web Server
IIS
PHP
MySQL DB
Parcel Attributes
PHP
Request
Image Tiles
Parcels
XMLs
Parks
Schools
AJAX
AJAX
AJAX
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

51. Web Map Service-based Architecture
Web Server
IIS
PHP
MySQL DB
Parcel Attributes
External
Service
PHP
Request
Image Tiles
Parcels
XMLs
Parks
Schools
AJAX
AJAX
PHP
Request
AJAX
URL
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

52. Web Map Service-based Architecture
Web Server
IIS
PHP
MySQL DB
Parcel Attributes
External
Service
PHP
Request
Image Tiles
Parcels
XMLs
Parks
Schools
AJAX
AJAX
Geocoding
JSON/xAL
PHP
Request
AJAX
URL
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

53. Web Map Service-based Architecture
Web Server
IIS
PHP
MySQL DB
Parcel Attributes
External
Service
PHP
Request
Image Tiles
Parcels
XMLs
Parks
Schools
AJAX
AJAX
Geocoding
JSON/xAL
PHP
Request
AJAX
URL
Server
Client
Web Client
Browser (IE, etc.)
JavaScript
Google Maps API

54. Pre-process GIS Data – Large Data Sets
For large vector data sets:
Create a set of image tiles for each data set.
Each tile covers the same area as the corresponding
Google Maps image tiles.
1100 LOC.
ArcObjects
GIS Server
ArcGIS Desktop
Visual Basic for Apps
Geo DB
Zoom Level
Scale (approx)
Tiles
Megabytes 13
1:60,000 14
0.5
1:30,000 42
1.4 15
1:15,000
143
4.4 16
1:7,500
480
13.0 17
1:3,750
1833
33.3
Image Tiles
MySQL DB

55. Demo

56. Methods Select an existing proprietary software-based GIS web site
Create a map service-based GIS web site
Compare the new web site with the existing proprietary software-based web site

57. Web Site Comparison
Compare the web map service-based site with a proprietary-based web site:
Time to load page initially
Time to pan full map width
Time to zoom to a different scale
Time to display a large dataset layer
Time to submit, process, display spatial query
Time to submit, process, display attribute query
Time to geocode addresses
Geocoding error

58. Results
90 Meters
78.5 80 70
56.5 60 50 20 10

59. Conclusions
It is possible to create a municipal GIS web site based on a web map service.
All required GIS functionality was included in the new web site.
Overall performance was approximately equal to a municipal GIS web site based on proprietary software.

60. Conclusions Performance ≈ Pre-process data Projection Base map data
IMS
WMS
Performance ≈
Pre-process data
Projection
Base map data
Imagery
Cost
Appearance ?

61. Future Research
Evaluate and compare scalability of both kinds of GIS web sites
Evaluate other web map services
Explore the spatial capabilities of future versions of MySQL
Explore the concept of the Web GIS Service

62. References
Boulos, M.N.K., Web GIS in practice III: creating a simple interactive map of England's Strategic Health Authorities using Google Maps API, Google Earth KML, and MSN Virtual Earth Map Control. International Journal of Health Geographics 4, 22.
Campagna, M. and Deplano, G., Evaluating geographic information provision within public administration websites. Environment and Planning B: Planning and Design 31,
Gibson, R., Erle, S., Google Maps Hacks. O’Reilly Media, Sebastopol, CA.
Qiu, F. and Thakkar, P Online Geo-referencing of satellite imagery using GIS web services, IGARSS 2004: IEEE International Geoscience and Remote Sensing Symposium Proceedings 1-7,
Yang, C., Wong, D.W., Yang, R., Kafatos, M., Li, Q., Performance-improving techniques in web-based GIS. International Journal of Geographical Information Science 19 (3) March 2005, 319–342.

63. Acknowledgements Dr. Ron Briggs Dr. Kevin Curtin Daniel Turner
Richard Truong
Shaofei Chen

64. Questions