11/8/201111/8/2011

11

Creating Web Applications with ArcGIS

Andrés Muñoz

2011 European User Conference, October 27th, 2011

Agenda

• Web applications Concepts

• ArcGIS Viewer for Flex

• ArcGIS Viewer for Microsoft Silverlight

• ArcGIS.com and Explorer Online Viewers

• Questions and Answers

ArcGIS 10 — A Complete System

EasierMore Powerfuland Everywhere

Cloud

Enterprise

Local

•• DiscoverDiscover•• CreateCreate•• ManageManage•• VisualizeVisualize•• AnalyzeAnalyze•• CollaborateCollaborate

Mobile

Desktop

Web

A

Review: Data Content in a Web MapCommon design pattern

• Base Maps- Geographic frame of reference

- Contain static data

Base Maps

Operationallayers

+

A

• Operational layers- Information overlays that end uses interact with

- Contain dynamic data

• Operational layers display on top of Base Maps

11/8/201111/8/2011

22

Review: ArcGIS Server – Web protocolsSupport industry standards

• Its GIS services can be accessed via- Representational State Transfer ( REST)

- Simple Object Access Protocol ( SOAP)

- Keyhole Markup Language ( KML)

- Open Geospatial Consortium ( OGC)

SOAP

REST

KML

OGC

Internet

Review: ArcGIS Server – Web protocolsSupport industry standards

• Its GIS services can be accessed via- Representational State Transfer ( REST)

- Simple Object Access Protocol ( SOAP)

- Keyhole Markup Language ( KML)

- Open Geospatial Consortium ( OGC)

SOAP

REST

KML

OGC

Internet

Review: ArcGIS Server – Services DirectoryView of ArcGIS Server REST endpoint

• ArcGIS Services Directory exposes REST API- http://www.yourserver.com/ArcGIS/rest

A

REST

ArcGIS Server Services Directory – Rest Point

Demo

11/8/201111/8/2011

33

The ArcGIS Viewers

• ArcGIS.com Viewer• Explorer Online

ArcGIS Viewer for Silverlight

ArcGIS Viewer for Flex ArcGIS Viewer for Flex

ArcGIS Viewer for Flex

• ArcGIS Viewer for Flex (released Sept 20, 2010)- Formal product release of the Sample Flex Viewer

- Approx. 17,000 downloads

- ArcGIS Online group- ArcGIS Viewer for Flex Live Sites

• Configurable ready-to-deploy Web client- Built with the ArcGIS API for Flex

• Easily and quickly build GIS Web mapping applications

ArcGIS Viewer for Flex

• No programming required , designed with the“non-developer” in mind

• Supported by ESRI Technical Support

• Resource Center- http://links.esri.com/flexviewer

A

11/8/201111/8/2011

44

ArcGIS Viewer for Flex – User InterfaceTitleSubtitleLogo

Widget tray

Scalebar

Navigationwidget

MapSwitcherwidget

ArcGIS Viewer for Flex – User Interface

OverviewMap widget

“Open” widget (from Widget tray)

Introducing the ArcGIS Viewer for Flex

Demo 1

Advantages of the ArcGIS Viewer for Flex

• Configurable ready-to-deploy ArcGIS Server Web client- No programming required

• Extensible functionality via widgets

• Starting template to create custom Web mapping applications

- No need to re-architect underlying framework

• Viewer application framework can be extended with ArcGIS API for Flex development

- Source code provided

11/8/201111/8/2011

55

Working with the ArcGIS Viewer for Flex

• Configurable XML files enable changes to:- Appearance

- Functionality (via widgets)

- Data content

• Widgets → modular functionality

- Consist of:

- XML configuration file- Compiled Flash (. swf) file

A

Core functional widgets

Bookmark

Data Extract

Draw

Edit

GeoRSS

Layer list

Locate

Print

Query

Search

Time slider

Core UI widgets

• Header controller

• Map switcher

• Navigation

• Overview map

A

Core UI widgets

• Coordinates

• Legend

• Pop Up windows

• Splash screen

A

11/8/201111/8/2011

66

ArcGIS Viewer for Flex – Resource Center

• Download the application

• Help documentation, widget and configuration sample s, and support forum

http://links.esri.com/flexviewer

Explore Viewer functionality(tour of different widgets)

Demo 2

Viewer installation structure

Download package contents

A

Contains Viewer resources

Viewerconfigurationfiles

Localizationsupportfiles

Contains Pop up window configurations

Contains widgets

Each widget has:

• XML configuration file• Compile Flash (. swf) file

Configure the ArcGIS Viewer for Flex

• Customize by editing the application configuration file

General properties

UI elements

Map propertiesSpatial extentData content

Widget containerWidgets

A

Edit Edit config.xmlconfig.xml filefile•• Appearance Appearance •• FunctionalityFunctionality•• Data contentData content

11/8/201111/8/2011

77

Enable custom data

• ArcGIS Services Directory- View of REST endpoint

- Information about Web services

- http://localhost/ArcGIS/rest

• Edit Viewer configuration file- Add as base map or operational layer

- Use <layer> tag

- Reference URL address

- Ensure consistent projection

REST

A

Configure the Viewer

Demo 3

Demo 3 summary

• Changed title, logo, style colors

• Defined new spatial extent for map display

• Switched basemap

• Added operational layer

Configuring the Viewer

Add new widgetsWidgets power the Viewer

• Widgets are added in 2 different locations in the Viewer configuration file (config.xml)

1. As a stand-alone widget

2. In a widget container

• Use <widget> tag

General properties

UI elements

Map propertiesSpatial extentData content

Widget containerWidgets

A

11/8/201111/8/2011

88

Widget code gallery – Resource Center

• Contributed by Esri staff and user community

Configure Viewer application widgets

• Customize each widget by editing its configuration file

A

Example:Example:

Edit BookmarkWidget.xml file(Properties of the widget)

Adding widgets to the Viewer

Demo 4

ArcGIS Viewer for Microsoft SilverlightCurrently Beta 2 release

• Configurable ready-to-deploy Web client- Built with ArcGIS API for Silverlight

• Easily and quickly create and implement GIS Web mapping applications

• Complete set of core GIS tools and functionality

• No programming or editing configuration files - Ideal for novice Web application creators

A

11/8/201111/8/2011

99

ArcGIS Viewer for Silverlight Esri Beta Community site

• Download package, documentation, user forums

http://betacommunity.esri.com

A

Easy installation and setup

1

2

3A

Installation and set-up

Demo

11/8/201111/8/2011

1010

Viewer installation files

• 2 folders created- Builder → contains software

- Apps → contains deployed Web applications

Located in IIS Web resources directory

Contains configs for “add-ins”, base maps, and list of deployed sites

Contains default Viewer

Contains images used by Builder

A

Working with Application Builder

• Create new Web mapping application based on:1. New map (from scratch)

2. Existing Web Map (from ArcGIS.com)- ArcGIS.com login supported

• Configure- Data content

- Functionality

- Look and feel

A

Application Builder User Interface

WYSIWYG user experience

Ribbon controls

Home

Deploy

Getting started

help panel(interactive)

Map

display

ToggleSettings

About

Application Builder contains Web App

layer

management

A

Web Application preview

TOC

Application

main toolbar

11/8/201111/8/2011

1111

Application Builder workflow

• Interactively create Web apps → WYSIWYG experience- Map content

- Tools

- Look and feel

• Deploy configured Viewer applications

A

Map tab

• Specify the data content in the Web application

Add and configure map content

Demo

Tools tab

• Specify the functionality of the application

11/8/201111/8/2011

1212

Tools functionality list

• Interactive feature selection options

• Feature editing and attachments

• Geoprocessing

• Print

• Filter layers

• View service properties

Define functionality in application

Demo

Layout tab

• Specify the “look and feel” of the Web application

Define look and feel, deploy site

Demo

11/8/201111/8/2011

1313

Application Builder workflow review

A

New map or Web Map1Configure:•Data content•Functionality•Look & feel

Non-linearworkflow

2

Deploy Application

3

Application Builder supports dynamic workflows

• Deployed Web applications can be easily modified

• All properties can be changed

• Save As and copy site functionality

List ofdeployedWeb apps

Edit button

A

Wrap-Up

Questions & Answers

Preguntas & Respuestas