Web Mapping Seth Peery, Senior GIS Architect Virginia Tech Geospatial Information Sciences Today I’ll be talking about the Virginia Tech Enterprise GIS 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 You are here. Cartography Data Management

Software Architecture This layer consists of web content that’s not the web application – look and feel, formatting, etc. This layer addresses the functionality of your application – e.g., what happens when the user clicks? This layer concerns the transport of data from its source format, with the appropriate presentation., to the web application. 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. 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

Google Maps Architecture

ArcGIS Server in the Scheme of Things At web applications tier, we can choose between the {Java | .NET} ADF, the JavaScript API, Flex API, Silverlight API SOC/SOM (GIS Server Components) respond to requests for maps and return data or images (e.g., MapService, WMS) 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. 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 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 http://help.arcgis.com/en/webapps/flexviewer/index.html

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. Basic Google Map of VT Campus http://training.gis.vt.edu/geog5984/gmaps/gmaps_example1.htm Basic Map with place name search http://training.gis.vt.edu/geog5984/gmaps/gmaps_example2.htm All of the above, plus VT Buildings http://training.gis.vt.edu/geog5984/gmaps/gmaps_example3.htm 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