Web Mapping
Seth Peery, Senior GIS Architect
Virginia Tech Geospatial Information Sciences
FDI
April 16, 2012
Objective: Understand how web maps work,
what goes on behind the scenes, and how
to actually deploy them in production IT
environments
•
•
•
Common architectural features of web mapping
applications
Web Mapping Workflows
Examples from Google Maps and ArcGIS Server
Web Mapping vs. Supporting GIS components
Web Browser Clients
GIS Mapping Clients
Web Applications
Web Mapping
You are here.
Map Services
ArcGIS
Server Map
Service
Map Presentation
Cartography
MXDs
SQL Clients
Middleware:
(Enterprise GIS team,
Central IT)
ArcSDE
Data
Management
Database:
(DBAA team,
Central IT)
GPRD Oracle
Instance
Banner data
CNS data
Physical Storage
(Systems support,
Central IT)
Facilites Data
SAN / NAS
Research Data
Facilites Data
Software Architecture
Users
Web Mapping Application
Web Application Presentation
PHP
CSS
JSP
ASP.NET
Javascript
Java
.NET
This layer addresses the functionality
of your application – e.g., what
happens when the user clicks?
PHP
reflectors
This layer concerns the transport of
data from its source format, with
the appropriate presentation., to
the web application.
Web Application Logic
ArcGIS
Server built-in
rendering
logic
This layer consists of web content
that’s not the web application –
look and feel, formatting, etc.
Map Services
ArcGIS
Server Map
Service
WMS
MXDs
Custom
Symbology
Oracle
MySQL
Local Storage
SAN / NAS
3rd party
basemap
Map Presentation
This layer concerns map symbology. It
is more of a workflow item than a
subsystem – it may be handled in
the source data or the map svc.
Database
Physical Storage
ArcSDE
Everything
from here
down is data
Functional Components of
All Web Mapping Applications
•
•
Source data
Data accessible to the web app
–
–
•
•
•
•
Basemap (increasingly coming from third party services)
Thematic layers (your data)
Representation/symbology of the data
Web service to return thematic data
Web map object and application logic
Web application container/interface for the map
(presentation)
ArcGIS Server Web ADF/API Architecture
Users
Web Mapping Application
Web Application Presentation
CSS
JSP
ASP.NET
Web Application Logic
.NET
Java
Map Services
ArcGIS
Server Map
Service
Map Presentation
MXDs
Database
ArcSDE
Oracle
Physical Storage
SAN / NAS
Javascript
Google Maps Architecture
Users
Web Mapping Application
Web Application Presentation
PHP
CSS
Web Application Logic
Javascript
Map Services
PHP
reflectors
Google Base
Map
Map Presentation
Custom
Symbology
Database
MySQL
Physical Storage
SAN / NAS
Google
Web Browser Clients
GIS Mapping Clients
Web Applications
At web applications tier, we can choose
between the {Java | .NET} ADF, the
JavaScript API, Flex API, Silverlight API
Map Services
SOC/SOM (GIS Server Components)
respond to requests for maps and return
data or images (e.g., MapService, WMS)
ArcGIS
Server Map
Service
Map Presentation
ArcGIS Server doesn't care about anything below this
point, so you can plug and play with different
supported data sources... filesystem vs ArcSDE, etc.
MXDs
SQL Clients
Middleware:
(Enterprise GIS team,
Central IT)
ArcSDE
Database:
(DBAA team,
Central IT)
GPRD Oracle
Instance
Banner data
CNS data
Physical Storage
(Systems support,
Central IT)
Facilites Data
SAN / NAS
Research Data
Facilites Data
ArcGIS Server
in the Scheme
of Things
ArcGIS Server Deployment Workflow
ESRI says “Author, Publish, Use”… the details are a bit more complex!
•
Identify source data
•
Identify server platform
•
Move source data to a location visible to the server (e.g., ArcSDE, file
GDB on server)
•
Make an MXD with data source references to “production” copy of data
•
Upload MXD to server or ensure it is visible in a shared location
•
Author a Map Service based on the MXD, set capabilities
•
Create a web application that consumes the service
•
Web API (Flex/SilverLight/JavaScript)
•
Web ADF (Deprecated)
•
Customize web application
•
Publish to Production environment
ESRI Developer Resources
• Main ArcGIS Server Resource Center:
http://resources.arcgis.com/content/arcgisserver/10.0/
about
• Flex API Reference:
http://help.arcgis.com/en/webapi/flex/apiref/index.html
• JavaScript API Reference:
http://help.arcgis.com/en/webapi/flex/apiref/index.html
Initial Setup
Assemble data, make a map and make sure the server can access it
Publish the map as a service
REST Services Directory
The map we
created in ArcMap
is now available as
a REST endpoint
and can be
accessed via the
REST services
directory by a web
mapping
application.
http://training.gis.vt.edu/arcgis/rest/services
Web Service representations of the map
REST
SOAP
REST preview
•
Web Services have
no UI – they’re
meant to be used
by computer
programs
•
The REST services
directory provides a
minimal preview
web application for
human viewers
•
We’re not done yet
– this is not a “real”
web application.
http://training.gis.vt.edu/arcgis/rest/services/samples/BlacksburgRCL/MapServer
Sample Flex Viewer
http://help.arcgis.com/en/webapps/flexviewer/index.html
•
SFV is a
configurable web
mapping
application from
http://resources.ar
cgis.com
•
The app is a
Flash-based
viewer that can be
modified (to an
extent) via a set of
XML files
Flex Viewer Example
http://training.gis.vt.edu/geog5984/sampleflex/
FlexViewer Source
http://training.gis.vt.edu/geog5984/sampleflex/config.xml
ArcGIS Server JavaScript Viewer Example:
Blacksburg RCL over ESRI terrain
http://training.gis.vt.edu/geog5984/samplejs/example2.htm
ArcGIS Server JavaScript Viewer
Example 2: Google Maps Extension
http://training.gis.vt.edu/geog5984/samplejs/example3.htm
Google Maps Deployment
Workflow
•
No need to worry about the basemap!
•
Identify a web server (no special capabilities needed)
•
For Gmaps v2, obtain an API key (omit in APIv3)
•
Identify source data, copy to server (or load into DB)
•
Write page logic to render map and symbology
•
Design web front-end
Google Maps API Reference is found at
https://developers.google.com/maps/
Google Maps Examples
For all the examples below, refer to the ViewSource for code
comments, which provide detailed explanation of each feature.
1)
Basic Google Map of VT Campus
http://training.gis.vt.edu/geog5984/gmaps/gmaps_example1.htm
2)
Basic Map with place name search
http://training.gis.vt.edu/geog5984/gmaps/gmaps_example2.htm
3)
All of the above, plus VT Buildings
http://training.gis.vt.edu/geog5984/gmaps/gmaps_example3.htm
4)
All of the above, plus icon styling
http://training.gis.vt.edu/geog5984/gmaps/gmaps_example4.htm
Contact Information
Seth Peery
Senior GIS Architect, Enterprise GIS
Virginia Tech Geospatial Information Sciences
2060 Torgersen Hall (0197)
Blacksburg, VA 24061
(540) 231-2178
sspeery@vt.edu
http://gis.vt.edu