architectural and operational considerations for web mapping applications
DESCRIPTION
Seth Peery , Senior GIS Architect Virginia Tech Geospatial Information Sciences. Architectural and Operational Considerations for Web Mapping Applications. FDI Spring 2011: Web Mapping April 28, 2011. - PowerPoint PPT PresentationTRANSCRIPT
Architectural and Operational Considerations for Web Mapping Applications
Seth Peery, Senior GIS Architect
Virginia Tech Geospatial Information Sciences
FDI Spring 2011: Web MappingApril 28, 2011
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
Physical Storage
Database Servers
Application Servers
VT Enterprise Storage (1PB)
VT CentralDBMS Server
Clients
ArcGIS Desktop Google Earth Web BrowsersAutoCAD
Fat Thin
GIS
DataWarehouse
SDSC OracleCluster
Other university DBservers
ArcSDEsde.gis.vt.edu
ArcGIS Servermaps.gis.vt.edu
Google Earth Enterpriseearth.gis.it.vt.edu
VirtualizedComputing Utility
IBM BladeCenter
NLR
10Gbps to S
an Diego
Sunil SinhaNSF-funded
StorageAllocation
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.
Database:
(DBAA team,Central IT)
Physical Storage
(Systems support,Central IT)
Map Presentation
Map Services
Web Applications
Web Browser Clients
SAN / NAS
GPRD OracleInstance
MXDs
ArcGISServer Map
Service
Middleware:
(Enterprise GIS team,Central IT)
ArcSDE
GIS Mapping Clients
SQL Clients
Banner data
CNS data
Facilites Data
Research Data
Facilites Data
Web Mapping vs. Supporting GIS components
Data Management
Cartography
Web MappingYou are here.
Physical Storage
Database
Map Presentation
Map Services
Web Application Logic
Web Application Presentation
Users
Local Storage SAN / NAS
Oracle MySQL ArcSDE
MXDsCustom
Symbology
ArcGISServer Map
ServiceWMS
3rd partybasemap
ArcGISServer built-in
renderinglogic
PHPreflectors
Javascript
PHP CSS JSP ASP.NET
Java .NET
Web Mapping Application
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
Physical Storage
Database
Map Presentation
Map Services
Web Application Logic
Web Application Presentation
Users
Local Storage SAN / NAS
Oracle MySQL ArcSDE
MXDsCustom
Symbology
ArcGISServer Map
ServiceWMS
3rd partybasemap
ArcGISServer built-in
renderinglogic
PHPreflectors
Javascript
PHP CSS JSP ASP.NET
Java .NET
Web Mapping Application
What this means for you (Web Mapping Workflow)
You Us
•Write HTML•Design styling and “look and feel”
•Provide Web Server
•Write JavaScript• Use Web API sample applications
•Publish services •Provide hosting for services
•Design map symbology, labeling, colors
•Select data that is of interest to you
•We’ll take care of the rest
Functional Components ofAll 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
DatabaseArcSDE
Physical Storage
Map Presentation
Map Services
Web Application Logic
Web Application Presentation
Users
SAN / NAS
Oracle
MXDs
ArcGISServer Map
Service
Javascript
CSS JSP ASP.NET
Java .NET
Web Mapping Application
Google Maps Architecture
Physical Storage
Database
Map Presentation
Map Services
Web Application Logic
Web Application Presentation
Users
SAN / NAS
MySQL
CustomSymbology
Google BaseMap
PHPreflectors
Javascript
PHP CSS
Web Mapping Application
Database:
(DBAA team,Central IT)
Physical Storage
(Systems support,Central IT)
Map Presentation
Map Services
Web Applications
Web Browser Clients
SAN / NAS
GPRD OracleInstance
MXDs
ArcGISServer Map
Service
Middleware:
(Enterprise GIS team,Central IT)
ArcSDE
GIS Mapping Clients
SQL Clients
Banner data
CNS data
Facilites Data
Research Data
Facilites Data
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)
ArcGIS Server Deployment WorkflowESRI 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
Connect to ArcGIS Server Manager
ArcGIS Server: Web Services
REST endpoint
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
Sample Flex Viewer
Flex Viewer Example
Connecting map service to web application
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
Google Maps developmentStart at
http://code.google.com/apis/maps/index.html
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
Web Service• The basemap service comes from the
Google API (example)
• The custom markers are added using JavaScript (loadmap.js) from dynamicXML.php
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 "<?xml version=\"1.0\" encoding=\"UTF-8\"
standalone=\"yes\" ?".">\n"; //echo $queryString . "\n"; echo "<markers>"."\n"; //iterate through all rows for ($i=0; $i<$resultSet->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($marker['field1']))).'" ';$markerString .= 'field2="'.(stripslashes(htmlspecialchars($marker['field2']))).'" ';$markerString .= 'field3="'.(stripslashes(htmlspecialchars($marker['field3']))).'" ';$markerString .= ' />'."\n";
// write the XML string for this row echo($markerString); } // end: for echo('</markers>'."\n"); //write out the closing
XML tag?>
Sample XML output
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
Web Page: The Map Container• API Key:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3hIrmJeo7QOwdQ_f22vNjhQJDfDcIlfn8CGoWnisAMX39hpr5hSMTxbZqHMOIC9nbFFZdwiK2v1__w" type="text/javascript"></script>'
• Physical Map container• <div id=“map”>
• Styling (CSS) and all the other components of a “normal” web page
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
Contact Information
Seth PeerySenior GIS Architect, Enterprise GISVirginia Tech Geospatial Information Sciences
2060 Torgersen Hall (0197) Blacksburg, VA 24061(540) [email protected] http://gis.vt.edu