1. Architectural and Operational Considerations for Web Mapping Applications Seth Peery, Senior GIS Architect Virginia Tech Geospatial Information Sciences FDI Spring 2011: Web Mapping April 28, 2011

2. Objective: Understand how web maps work, what goes on behind the scenes, and how to actually deploy them in production IT environments An approach to the abstraction of complexity Common architectural features of web mapping applications Backend server environments Web Mapping Workflow Examples from Google Maps and ArcGIS Server

3. Abstraction in Complex Systems Example: VT Centralized GIS Large-scale IT systems (both hardware and software) have large numbers of interrelated components Let’s consider hardware as a physical example of the modeling framework For purposes of describing, explaining and maintaining the system we can consider components at different “tiers” of the model in isolation from one another. This is also useful for software.

4. Web Mapping vs. Supporting GIS components Data Management Cartography Web Mapping You are here.

5. 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

6. What this means for you (Web Mapping Workflow) YouUs Write HTML Design styling and “look and feel” Provide Web Server Write JavaScript Use Web API sample applications Publish servicesProvide hosting for services Design map symbology, labeling, colors Select data that is of interest to you We’ll take care of the rest

7. 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)

8. ArcGIS Server Web ADF/API Architecture

9. Google Maps Architecture

10. ArcGIS Server in the Scheme of Things 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. 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)

11. 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

12. Connect to ArcGIS Server Manager

13. ArcGIS Server: Web Services

14. REST endpoint

15. ArcGIS Server: Web Applications Web ADF is Deprecated This is the old way of doing things Now we completely decouple services and applications using web APIs

16. Sample Flex Viewer

17. Flex Viewer Example

18. Connecting map service to web application

20. Google Maps Deployment Workflow No need to worry about the basemap! Grab an API key (unnecessary in APIv3) Identify source data Identify hosting platform Load data into DB or XML/KML file Create a tool to generate XML from DB Write page logic to render map and symbology Design web front-end

21. Google Maps development Start at http://code.google.com/apis/ maps/index.html http://code.google.com/apis/ maps/index.html Peter Sforza sforza@vt.edu sforza@vt.edu

22. Database Physical storage is an abstraction- we don’t have to care unless we are the sysadmin In this example, DB is MySQL DB structure PHP page to generate XML (could also be local file and dispense with DB – OK for static data

23. Web Service The basemap service comes from the Google API (example) The custom markers are added using JavaScript (loadmap.js) from dynamicXML.php

24. Rendering XML from a database <?php header ("content-type: text/xml"); include('dbconnect.php'); // Get the map extent $minX = $_POST["left"]; $maxX = $_POST["right"]; $minY = $_POST["bottom"]; $maxY = $_POST["top"]; // run a select query to output the database contents $queryString = "SELECT * FROM myData "; if(isset($minX)) { $queryString.= "WHERE lng > '". $minX."' "; $queryString.= "AND lng < '". $maxX."' "; $queryString.= "AND lat > '". $minY."' "; $queryString.= "AND lat < '". $maxY."' "; $queryString.= ";"; } $resultSet = $database- >query($queryString); // write XML header and open the main tag echo " \n"; //echo $queryString. "\n"; echo " "."\n"; //iterate through all rows for ($i=0; $i numRows(); $i++) { $marker= $resultSet- >fetchRow(DB_FETCHMODE_ASSOC,$i); // build a string containing the XML representation of this row $markerString = "\t".'<marker '; $markerString.= 'lng="'.(string)$marker['lng'].'" '; $markerString.= 'lat="'.(string)$marker['lat'].'" '; $markerString.= 'field1="'.(stripslashes(htmlspecialchars($marke r['field1']))).'" '; $markerString.= 'field2="'.(stripslashes(htmlspecialchars($marke r['field2']))).'" '; $markerString.= 'field3="'.(stripslashes(htmlspecialchars($marke r['field3']))).'" '; $markerString.= ' />'."\n"; // write the XML string for this row echo($markerString); } // end: for echo(' '."\n"); //write out the closing XML tag ?>

25. Sample XML output

26. Getting the Data into the Map JavaScript is used to drive the Google Map AJAX (Asynchronous JavaScript and XML) is used to load features from an XML document Key Sections of loadmap.js: function load() function loadMarkers() -- AJAX Function createMarker() -- build infoWindow Function determineIcon() -- Rendering

27. Web Page: The Map Container API Key: ' Physical Map container Styling (CSS) and all the other components of a “normal” web page

28. Hosting web maps at Virginia Tech At Virginia Tech, there are a number of options for hosting a web site. A comparison of services can be found at: http://computing.vt.edu/internet_and_web/web_publishing/index.html Virginia Tech Filebox service: http://www.computing.vt.edu/internet_and_web/web_publishing/filebox/index.html Enterprise GIS: http://gis.it.vt.edu

29. 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