Building Great Web MapsBuilding Great Web MapsESRI FedUCESRI FedUC

Jim McKinneyJim McKinneyArcGIS Program ManagerArcGIS Program Manager

What is a Web Map?What is a Web Map?

•• One or more map servicesOne or more map services

•• Integrated into a web applicationIntegrated into a web application

•• That users interact withThat users interact with

•• To accomplish meaningful tasksTo accomplish meaningful tasks

•• Simply and quickly Simply and quickly

A Great Web MapA Great Web Map……

•• Is not made up of a single map document (MXD)Is not made up of a single map document (MXD)–– MXD is not the same as a Web MapMXD is not the same as a Web Map

•• Is not ArcView on the WebIs not ArcView on the Web

•• Does not contain GIS jargonDoes not contain GIS jargon

•• Is not designed for people who know as much about GIS as you Is not designed for people who know as much about GIS as you do do

A Great Web MapA Great Web Map……

•• Is FastIs Fast

•• Is designed for the end userIs designed for the end user

•• Contains the necessary map service layers needed to bring the Contains the necessary map service layers needed to bring the web application to lifeweb application to life

–– Basemap (provides a geographic frame of reference)Basemap (provides a geographic frame of reference)•• ArcGIS Online, Virtual Earth, Google Maps, your own designArcGIS Online, Virtual Earth, Google Maps, your own design

–– Operational Layers (show a focused item of interest on top of thOperational Layers (show a focused item of interest on top of the base e base map)map)

•• Multiple ways to implementMultiple ways to implement•• Features know how to report on themselvesFeatures know how to report on themselves

•• Contains as much preContains as much pre--computed information as possiblecomputed information as possible–– Performance mattersPerformance matters–– DonDon’’t calculate information on the fly unless you have no choicet calculate information on the fly unless you have no choice

What makes a Great Web Map?What makes a Great Web Map?

•• Great cartographyGreat cartography

•• MultiMulti--scalescale

•• Fast Fast –– againagain

•• InformativeInformative

•• EasyEasy--toto--useuse

•• Meets userMeets user’’s expectationss expectations

•• Delivers the information that the user needs in an easyDelivers the information that the user needs in an easy--toto--understand understand

formform

•• GIS users viewGIS users view

–– Contains your authoritative information and brings it to lifeContains your authoritative information and brings it to life

–– Makes your wonderful and (complex) GIS information useable and uMakes your wonderful and (complex) GIS information useable and usefulseful

–– UpUp--toto--datedate

–– Easy to deploy and maintainEasy to deploy and maintain

Web MapsWeb MapsDesign implicationsDesign implications

•• A web map is a A web map is a setset of web map layers.of web map layers.

•• Each web map layer is based on a web map service.Each web map layer is based on a web map service.

•• A web map service in ArcGIS is published using a map document.A web map service in ArcGIS is published using a map document.

•• You author your web map layers as map documents in ArcMap You author your web map layers as map documents in ArcMap and publish them as map services.and publish them as map services.

•• You combine a You combine a setset of web map layers from multiple web map of web map layers from multiple web map services in your web map application.services in your web map application.

Web MapsWeb MapsPatternsPatterns

•• Effective web maps use a common implementation patternEffective web maps use a common implementation pattern

•• The pattern is not an ArcView / ArcIMS style map with many The pattern is not an ArcView / ArcIMS style map with many

independent layers in forever scrollable TOCindependent layers in forever scrollable TOC’’ss

•• Our GoalsOur Goals

–– Recognize this patternRecognize this pattern

–– Learn how to repeatedly leverage and use itLearn how to repeatedly leverage and use it

Pattern: Elements of a Web Map Pattern: Elements of a Web Map

1.1. MultiMulti--Scale Base MapsScale Base Maps

–– One or more maps that provide a framework or context for displayOne or more maps that provide a framework or context for displaying operational ing operational

information layers on top of. information layers on top of.

–– Cache them whenever possible so they are fastCache them whenever possible so they are fast

2.2. Operational LayersOperational Layers

–– Working layersWorking layers

–– Feeds, observations, sensor, incidentsFeeds, observations, sensor, incidents

–– Query resultsQuery results

–– Model resultsModel results

3.3. Information Popups and Reports for Operational LayersInformation Popups and Reports for Operational Layers

–– Map layers as interactive reportsMap layers as interactive reports

4.4. Web Map Application Web Map Application

–– Configure vs. programConfigure vs. program

Web Map ExamplesWeb Map Examples

Water Distribution Operations DashboardWater Distribution Operations DashboardDemonstrationDemonstration

Dashboard Application’s Map Services

Land Base (Tiled Cached Map Service)Land Base (Tiled Cached Map Service)

Water Network (Dyn. map service)Water Network (Dyn. map service)

ArcMap Document. Contains map layers:ArcMap Document. Contains map layers:

••Investment ReportsInvestment Reports

••Performance ReportsPerformance Reports

••Administrative Reports Administrative Reports

Monitoring Layer (ClientMonitoring Layer (Client--side graphics)side graphics)

ArcMap document (Map Layer)ArcMap document (Map Layer)

MultiMulti--Scale MapScale Map

Popup Statusand ReportingOverlays

Dynamic Dynamic OverlayOverlay

GeodatabaseGeodatabase

Map Map DocumentDocument

MSDMSD

Map Map DocumentDocument

Map Map DocumentDocument

ArcGIS ServerArcGIS Server

Query on Query on demanddemand

Map Map ServiceService

Map Map ServiceService

Map Map ServiceService

ArcGIS Web ClientArcGIS Web Client

ConfigureConfigure

DBMSDBMS

Map Map ServiceService

Base MapBase Map

Base MapsBase Maps

•• Types: Imagery, Streets, Terrain, any type that provides Types: Imagery, Streets, Terrain, any type that provides contextually useful information for your operational layerscontextually useful information for your operational layers

•• CachedCached

•• Usually does not change frequentlyUsually does not change frequently

•• ArcGIS Online ArcGIS Online has some great base maps for youhas some great base maps for you

Base MapsBase Maps

Land Base + Water Facilities Land Base + Water Facilities

Image Base MapImage Base Map

Hydro BaseHydro Base Street MapStreet Map

City MapCity Map

Topo MapTopo Map

How to build a base mapHow to build a base map

Using ArcMapUsing ArcMap

1.1. Define map scalesDefine map scales

2.2. Build a map for each map Build a map for each map

scalescale

3.3. Put the set of layers for each map scale in a group layerPut the set of layers for each map scale in a group layer

4.4. Set scaleSet scale--dependent drawing for each group layerdependent drawing for each group layer

5.5. Generate a cached map serviceGenerate a cached map service

Selecting the Coordinate System and Tiling Scheme for Selecting the Coordinate System and Tiling Scheme for your Web Mapyour Web Map

•• You can extend an existing web mapYou can extend an existing web map

–– ArcGIS OnlineArcGIS Online

–– Microsoft Virtual EarthMicrosoft Virtual Earth

–– Google MapsGoogle Maps

•• Use the same tiling schemeUse the same tiling scheme

–– Easy to set in ArcGIS ServerEasy to set in ArcGIS Server

•• Build maps for the set of desired map scalesBuild maps for the set of desired map scales

In ProgressIn Progress……New Base Map Templates New Base Map Templates –– ArcGIS OnlineArcGIS Online

•• Street MapStreet Map•• Topographic MapTopographic Map•• Hydrographic MapHydrographic Map•• Soils MapSoils Map•• Geologic MapGeologic Map•• Parcel MapParcel Map•• Demographic MapsDemographic Maps

Street Map / Base Map TemplateStreet Map / Base Map Template

Topographic Map / Base Map TemplateTopographic Map / Base Map Template

Hydrographic Map / Base Map TemplateHydrographic Map / Base Map Template

Soils Map / Base Map TemplateSoils Map / Base Map Template

Geologic Map / Base Map TemplateGeologic Map / Base Map Template

Parcel Map / Base Map TemplateParcel Map / Base Map Template

Demographic Map / Base Map TemplatesDemographic Map / Base Map Templates

Water Distribution Operations Dashboard Base MapWater Distribution Operations Dashboard Base MapDemonstrationDemonstration

Operational LayersOperational Layers

•• Displayed (overlay) on top of base mapsDisplayed (overlay) on top of base maps

•• May change frequentlyMay change frequently

•• Display operational layer:Display operational layer:–– as clientas client--side graphics (result of a task operation)side graphics (result of a task operation)–– as a dynamic map service (MSD based map service 9.3.1)as a dynamic map service (MSD based map service 9.3.1)–– as a cached map serviceas a cached map service

Operational LayersOperational LayersThe focused set of layers that users work withThe focused set of layers that users work with

•• Editing and data access layersEditing and data access layers

•• Observations, sensor feeds, incidentsObservations, sensor feeds, incidents

•• Query resultsQuery results

•• Result layers that are derived from analytical GP modelsResult layers that are derived from analytical GP models

EarthquakesEarthquakes Inundation Areas &Inundation Areas &Affected BuildingsAffected Buildings

Incidents, Customer Calls, Work Incidents, Customer Calls, Work OrdersOrders

Operational LayersOperational LayersThe focused set of layers that users work withThe focused set of layers that users work with

•• Like base maps, operational layersLike base maps, operational layers–– Require strong cartography Require strong cartography –– Are scaleAre scale--dependentdependent

•• They also know how to report themselvesThey also know how to report themselves–– Operational layers as interactive reportsOperational layers as interactive reports

•• ExamplesExamples

EarthquakesEarthquakes Stream FlowStream Flow Work OrdersWork Orders

Display the operational layer as clientDisplay the operational layer as client--side graphicsside graphics

•• Query on demand as user pans and zooms Query on demand as user pans and zooms around the map, query a layer in a map service around the map, query a layer in a map service and display results and display results

–– Only load the features that you needOnly load the features that you need–– Takes advantage of the CPUs available on your Takes advantage of the CPUs available on your

usersusers’’ machinesmachines

•• Only display features when they are requested Only display features when they are requested by clientsby clients

Display the operational layer as clientDisplay the operational layer as client--side graphics side graphics ----considerationsconsiderations

•• Limit to number of client side graphics that can be supported.Limit to number of client side graphics that can be supported.–– JavaScript (browser differences impose some limitations)JavaScript (browser differences impose some limitations)–– Flex / Silverlight (better support for graphics)Flex / Silverlight (better support for graphics)

•• Clustering of point features on the client Clustering of point features on the client •• No native Labeling in web mapNo native Labeling in web map

–– Can place text, but not labelCan place text, but not label

JavascriptJavascript FlexFlex

Display the operational layer as a dynamic map serviceDisplay the operational layer as a dynamic map service

•• Client requests an image at the requested extent, with the selecClient requests an image at the requested extent, with the selected ted layers and layer definitionslayers and layer definitions

•• Server draws the map Server draws the map •• Web map overlays the returned operational layer image on the Web map overlays the returned operational layer image on the

base mapbase map•• Web map can also use GP Raster Results drawn by the map Web map can also use GP Raster Results drawn by the map

serviceservice

Display the operational layer as a tiled map serviceDisplay the operational layer as a tiled map service

•• Operational layer is a cached map service layerOperational layer is a cached map service layer

•• High performanceHigh performance–– Browser requests preBrowser requests pre--made tilesmade tiles

•• Good if data changes infrequently or can be easily createdGood if data changes infrequently or can be easily created

Simplest Report is Information PopupSimplest Report is Information PopupThe most common layer report methodThe most common layer report method

Information ReportsInformation Reports

•• Avoid use ofAvoid use of–– Feature and Object IDFeature and Object ID’’ss–– Abbreviated / technical field namesAbbreviated / technical field names–– Code valuesCode values–– Poorly formatted real numbersPoorly formatted real numbers–– GIS feature jargon web map users donGIS feature jargon web map users don’’t understand / should not see t understand / should not see –– Etc.Etc.

•• Tables with records for each featureTables with records for each feature–– PrePre--compute values wherever possiblecompute values wherever possible–– Take time to design information for fast retrievalTake time to design information for fast retrieval

•• DonDon’’t do fancy (slow) stuff just because you can t do fancy (slow) stuff just because you can

Operational LayersOperational LayersLayers as interactive reportsLayers as interactive reports

•• Operational Layers are multiOperational Layers are multi--scale map scale map layers toolayers too

•• Interactive reports are controlled by Interactive reports are controlled by adding information to specific results adding information to specific results columns in your geodatabase columns in your geodatabase

–– Add columns with meaningful values Add columns with meaningful values to your feature tables to your feature tables

–– Populate report attributes for each Populate report attributes for each featurefeature

Operational LayersOperational LayersLayers combined with Virtual Earth or Google MapsLayers combined with Virtual Earth or Google Maps

•• ArcGIS JavaScript ExtensionsArcGIS JavaScript Extensions

Water Distribution Dashboard Operational LayersWater Distribution Dashboard Operational LayersDemonstrationDemonstration

Goals for ArcGISGoals for ArcGISTransform our approach for using and deploying ArcGISTransform our approach for using and deploying ArcGIS

•• Focus on key user communitiesFocus on key user communities

–– Federal governmentFederal government

–– Local governmentLocal government

–– EMSEMS

–– Image usersImage users

–– Water UtilitiesWater Utilities

–– Many moreMany more……

•• Develop and promote a Web GIS methodology throughout ESRI and ouDevelop and promote a Web GIS methodology throughout ESRI and our r

user communityuser community

•• Provide useful examples for how to configure ArcGIS Provide useful examples for how to configure ArcGIS -- ArcGIS TemplatesArcGIS Templates

What is an ArcGIS Template?What is an ArcGIS Template?

•• A template is a working example of ArcGIS and A template is a working example of ArcGIS and ““the geographic the geographic

methodmethod”” applied to a particular problem or domainapplied to a particular problem or domain

•• GOOD examplesGOOD examples

–– Good understanding of the underlying problem/domainGood understanding of the underlying problem/domain

–– Clean, simple conceptsClean, simple concepts

–– Great use of ArcGIS and underlying technologyGreat use of ArcGIS and underlying technology

–– Interactive / Interactive / ““livelive””

–– Useful / Fun / Beautiful / CompellingUseful / Fun / Beautiful / Compelling

–– Understandable by users / Users can successfully implementUnderstandable by users / Users can successfully implement

How will ArcGIS Templates be delivered?How will ArcGIS Templates be delivered?ZIP file that contains ArcGIS documents, geodatabases, instructiZIP file that contains ArcGIS documents, geodatabases, instructions, etc.ons, etc.

•• A way to configure and deploy out of the box applicationsA way to configure and deploy out of the box applications

–– A set of base mapsA set of base maps•• MultiMulti--scalescale

•• LocatorsLocators

–– A well defined set of map overlays (operational layers for speciA well defined set of map overlays (operational layers for specific fic

audience)audience)

–– A geodatabase schemaA geodatabase schema•• Sample geodatabaseSample geodatabase

–– A set of workflows and tasks (editing, mapping, service publishiA set of workflows and tasks (editing, mapping, service publishing, ng,

caching)caching)

ArcGIS TemplatesArcGIS Templates

•• IncludesIncludes

–– A RoleA Role--based Operations Dashboard (e.g., Executive dashboard). based Operations Dashboard (e.g., Executive dashboard).

•• A web application that shows systems status and operational awarA web application that shows systems status and operational awarenesseness

•• Provides a Common Operational Picture for every day <emergency rProvides a Common Operational Picture for every day <emergency response esponse

| water utilities | parcel management | etc.)| water utilities | parcel management | etc.)

•• Configurable application (XML) vs custom programming Configurable application (XML) vs custom programming

–– Flex app XML configuration fileFlex app XML configuration file

–– An editor for key data layers (e.g., Water distribution networksAn editor for key data layers (e.g., Water distribution networks))

–– A mobile map application for your field workforce (e.g., a TableA mobile map application for your field workforce (e.g., a Tablet PC t PC

app)app)

–– ArcGIS Resource Center ArcGIS Water TemplateArcGIS Resource Center ArcGIS Water Template

Leverage ArcGIS 9.3.1 to make Great Web MapsLeverage ArcGIS 9.3.1 to make Great Web Maps

•• ArcGIS includes new methods for publishing optimized map ArcGIS includes new methods for publishing optimized map

servicesservices

–– Create an MSD from your ArcMap documentCreate an MSD from your ArcMap document

–– Use the Map Service Publishing ToolbarUse the Map Service Publishing Toolbar

•• AnalyzeAnalyze

•• PreviewPreview

•• Save MSDSave MSD

•• Publish as map servicePublish as map service

•• Plan to periodically test / analyze your map services over timePlan to periodically test / analyze your map services over time

Leverage ArcGIS 9.3.1 to make Great Web MapsLeverage ArcGIS 9.3.1 to make Great Web Maps

•• Optimized map services using an MSD can be published Optimized map services using an MSD can be published

•• As a dynamic map service (Faster, much more scalable than MXDAs a dynamic map service (Faster, much more scalable than MXD--based based

servicesservices

•• As a cached map service (Can significantly reduce the computatioAs a cached map service (Can significantly reduce the computation time to n time to

create a cached map service)create a cached map service)

Understand and use all ArcGIS can offer Understand and use all ArcGIS can offer

•• Web map applications will leverage the appropriate application oWeb map applications will leverage the appropriate application of f

all of the map service typesall of the map service types

–– Cached map servicesCached map services

–– Dynamic MSD (optimized) map servicesDynamic MSD (optimized) map services

–– ClientClient--side graphicsside graphics

–– MXDMXD--based map servicesbased map services

•• Very powerful, most flexible labeling and caching options Very powerful, most flexible labeling and caching options

Some Final ThoughtsSome Final Thoughts

•• Types of web map layersTypes of web map layers

•• MultiMulti--scale base mapscale base map

–– Cached map serviceCached map service

–– Maybe with dynamic overlayMaybe with dynamic overlay

•• Individual operational map layer as a dynamic map service (optimIndividual operational map layer as a dynamic map service (optimized using ized using

MSD)MSD)

•• Individual operational map layer as a cached map serviceIndividual operational map layer as a cached map service

•• A logical set of a few map services as a dynamic map service (opA logical set of a few map services as a dynamic map service (optimized timized

using MSD)using MSD)

•• A layer used as clientA layer used as client--side graphicsside graphics

•• A layer as a dynamic map service using an ArcMap document (MXD) A layer as a dynamic map service using an ArcMap document (MXD) as the as the

map source)map source)

Some More Final ThoughtsSome More Final Thoughts

•• Types of layer reportsTypes of layer reports

•• Map labelsMap labels

•• Information popup (like identify)Information popup (like identify)

•• HTML popupHTML popup

•• ClientClient--side charts (e.g., pie chart)side charts (e.g., pie chart)

•• Run a small geoprocessing operation, return resultsRun a small geoprocessing operation, return results

Final Thoughts cont. Final Thoughts cont.

•• Thinking about tools in Web applicationsThinking about tools in Web applications

–– Operations go with specific map layers (Not with the entire app)Operations go with specific map layers (Not with the entire app)

•• Pan/zoom/navigation on the base mapPan/zoom/navigation on the base map

•• Locate on the base mapLocate on the base map

•• Identify on an individual operational layerIdentify on an individual operational layer

•• Report on a selected set of features in an operational layersReport on a selected set of features in an operational layers

Final Thoughts (last one, I promise)Final Thoughts (last one, I promise)Think about bringing your information to life in your Web Maps. Think about bringing your information to life in your Web Maps. Design for it.Design for it.

–– Frequently, your Frequently, your ““publishing databasepublishing database”” is different from your is different from your

““production / compilation databaseproduction / compilation database

–– Publishing Publishing ““databasedatabase”” is more than the geodatabase. Alsois more than the geodatabase. Also

•• Map layersMap layers

•• Special reporting fields (joined from related tables, specific tSpecial reporting fields (joined from related tables, specific text ext

strings for reporting, etc.)strings for reporting, etc.)

•• Folder with PhotosFolder with Photos

•• Etc.Etc.

–– Be creative Be creative -- Use common web publishing practicesUse common web publishing practices

Three rules for web applicationsThree rules for web applications

•• RulesRules

–– Reduce network traffic where applicableReduce network traffic where applicable

•• ScaleScale--dependent displaydependent display

•• Judicious use of clientJudicious use of client--side graphicsside graphics

•• Performance matters, leverage analysis toolsPerformance matters, leverage analysis tools

–– PrePre--compute information results when you can do socompute information results when you can do so

•• Cached map servicesCached map services

•• PrePre--compute geoprocessing resultscompute geoprocessing results

–– Design your Web maps to bring your information to lifeDesign your Web maps to bring your information to life

•• New implementation pattern New implementation pattern

•• Great cartography Great Web MapsGreat cartography Great Web Maps

•• ArcGIS Server BlogArcGIS Server Blog –– keep in touchkeep in touch

Thank you!Thank you!