Developing Web Apps with ArcGIS

API for JavaScriptTM

Student Edition

Copyright 2014 EsriAll rights reserved.

Course version 1.1. Version release date December 2014.

Printed in the United States of America.

The information contained in this document is the exclusive property of Esri. This work is protected under United Statescopyright law and other international copyright treaties and conventions. No part of this work may be reproduced ortransmitted in any form or by any means, electronic or mechanical, including photocopying and recording, or by anyinformation storage or retrieval system, except as expressly permitted in writing by Esri. All requests should be sent toAttention: Contracts and Legal Services Manager, Esri, 380 New York Street, Redlands, CA 92373-8100 USA.

EXPORT NOTICE: Use of these Materials is subject to U.S. export control laws and regulations including the U.S. Departmentof Commerce Export Administration Regulations (EAR). Diversion of these Materials contrary to U.S. law is prohibited.

The information contained in this document is subject to change without notice.

US Government Restricted/Limited Rights

Any software, documentation, and/or data delivered hereunder is subject to the terms of the License Agreement.The commercial license rights in the License Agreement strictly govern Licensee's use, reproduction, or disclosure ofthe software, data, and documentation. In no event shall the US Government acquire greater than RESTRICTED/LIMITED RIGHTS. At a minimum, use, duplication, or disclosure by the US Government is subject to restrictions asset forth in FAR 52.227-14 Alternates I, II, and III (DEC 2007); FAR 52.227-19(b) (DEC 2007) and/or FAR 12.211/12.212 (Commercial Technical Data/Computer Software); and DFARS 252.227-7015 (DEC 2011) (Technical Data -Commercial Items) and/or DFARS 227.7202 (Commercial Computer Software and Commercial Computer SoftwareDocumentation), as applicable. Contractor/Manufacturer is Esri, 380 New York Street, Redlands, CA 92373-8100,USA.

@esri.com, 3D Analyst, ACORN, Address Coder, ADF, AML, ArcAtlas, ArcCAD, ArcCatalog, ArcCOGO, ArcData, ArcDoc,ArcEdit, ArcEditor, ArcEurope, ArcExplorer, ArcExpress, ArcGIS, ArcGlobe, ArcGrid, ArcIMS, ARC/INFO, ArcInfo, ArcInfoLibrarian, ArcLessons, ArcLocation, ArcLogistics, ArcMap, ArcNetwork, ArcNews, ArcObjects, ArcOpen, ArcPad, ArcPlot,ArcPress, ArcPy, ArcReader, ArcScan, ArcScene, ArcSchool, ArcScripts, ArcSDE, ArcSdl, ArcSketch, ArcStorm, ArcSurvey,ArcTIN, ArcToolbox, ArcTools, ArcUSA, ArcUser, ArcView, ArcVoyager, ArcWatch, ArcWeb, ArcWorld, ArcXML, Atlas GIS,AtlasWare, Avenue, BAO, Business Analyst, Business Analyst Online, BusinessMAP, CityEngine, CommunityInfo, DatabaseIntegrator, DBI Kit, EDN, Esri, EsriTeam GIS, EsriThe GIS Company, EsriThe GIS People, EsriThe GIS SoftwareLeader, FormEdit, GeoCollector, Geographic Design System, Geography Matters, Geography Network, GIS by Esri, GIS Day,GIS for Everyone, GISData Server, JTX, MapIt, Maplex, MapObjects, MapStudio, ModelBuilder, MOLE, MPSAtlas, PLTS,Rent-a-Tech, SDE, SML, SourcebookAmerica, SpatiaLABS, Spatial Database Engine, StreetMap, Tapestry, the ARC/INFOlogo, the ArcGIS logo, the ArcGIS Explorer logo, the ArcPad logo, the Esri globe logo, the Esri Press logo, the GIS Day logo,the MapIt logo, The Geographic Advantage, The Geographic Approach, The World's Leading Desktop GIS, Water Writes,www.arcgis.com, www.esri.com, www.geographynetwork.com, www.gis.com, www.gisday.com, and Your PersonalGeographic Information System are trademarks, service marks, or registered marks in the United States, the EuropeanCommunity, or certain other jurisdictions. CityEngine is a registered trademark of Procedural AG and is distributed underlicense by Esri.

Other companies and products or services mentioned herein may be trademarks, service marks or registered marks of theirrespective mark owners.

Course introduction

IntroductionCourse goalsAdditional resourcesInstalling the course dataIcons used in this workbookUnderstanding the ArcGIS Platform

1 Introduction to the ArcGIS API for JavaScriptLesson introductionThe ArcGIS platformArcGIS for JavaScript applicationsDeveloper requirementsDeveloper resourcesIntroduction to the ArcGIS API for JavaScriptUsing the SDKGetting started with the APIAdding ArcGIS Online basemapsArcGIS API for JavaScript Web OptimizerCreating a custom Build using the Web OptimizerExercise 1: Create a simple map application

Import the starter applicationReference the Esri librariesAdd a map to the applicationAdjust map parameters and style

Lesson review

2 Working with the mapLesson introductionAdding data to the mapCombining map layersAdding layers programmaticallyWorking with map layersUsing widgetsWorking with eventsExercise 2A: Adding data to your map using layers

Open the starter applicationSpecify an initial extentAdd tiled and dynamic layersAdd a feature layerAdd a BasemapToggle widgetAdd a legend

Displaying a web mapReference a web map layer

i

Exercise 2B: Adding data to your map using web mapsOpen the starter applicationUse a web mapAdd a BasemapGallery widgetUpdate the legend

Lesson review

3 Working with tasks and widgetsLesson introductionUsing Tasks and WidgetsWorking with GIS servicesWorking with secured GIS resourcesTask-implementation workflowExplore task implementationGeocoding and searchingDirections and routingExporting a web mapExercise 3: Geocode and find directions

Open the Geocoder-Locator starter applicationAdd a Geocoder widgetUse a Locator taskOpen the Directions-Output starter applicationAdd a Directions widget(Optional) Add a Print widget

Lesson review

4 Applying queries to dataLesson introductionDisplaying temporary data in the mapUnderstanding graphicsUnderstanding symbolsDrawing graphics on the mapUsing the API to answer questionsDisplaying query resultsSetting up the Query objectExecuting a queryUnderstanding the FeatureSetQuery and select featuresOptimizing the FeatureLayerUsing FeatureLayer modesDisplaying selected features in a tableExercise 4: Query data

Open the starter applicationImplement a drawing tool

ii

Display user input on a graphics layerSelect featuresDisplay selected features in a table

Lesson review

5 Visualizing and rendering dataLesson introductionVisualizing your dataUnderstanding renderersRenderer visualization propertiesApplying renderers to layersGenerating renderersWorking with dynamic layersWorking with LayerDrawingOptionsExercise 5A: Visualize data using a renderer

Open the data visualizer starter applicationApply a renderer to a dynamic layerApply proportional symbols to earthquake features

Styling features with CSSLabeling featuresCreating pop-up windowsExercise 5B: Visualize attribute information using pop-up windows

Open the pop-up window starter applicationUse a pop-up window to display feature information

Lesson review

6 Using tasks and widgets for analysisLesson introductionAchieving custom analysisUsing the GeoprocessorWorking with geoprocessing parametersExecuting a geoprocessing taskUsing geoprocessing services and tasksPerforming measurementsUsing the Geometry serviceExercise 6: Implement a geoprocessing task

Import the starter applicationPrepare the Geoprocessor and inputsExecute the GeoprocessorProcess the Geoprocessor results

Using ArcGIS analysis servicesWorking with Analysis widgetsWorking with GeoEnrichment widgetsLesson review

iii

7 Editing featuresLesson introductionUnderstanding web editing scenariosConfirming web editing requirementsEditing with feature servicesAdding editing functionalityEditing geometryAdd feature editing to an applicationEditing attributesEditing attachmentsExercise 7: Add editing functionality

Import the starter applicationAdd editable wildfire feature layersAdd an Editor widgetAdd a custom TemplatePicker widgetCustomize the Editor toolbarEdit large feature geometryEnable edit rollback functionality

Enabling advanced editing functionalityLesson review

8 Develop an ArcGIS web applicationLesson introductionDevelop an ArcGIS web applicationLocate developer resourcesScenario 1: Implement an Analysis widgetScenario 2: Develop a secure applicationScenario 3: Develop a responsive design applicationLesson review

Appendixes

Appendix A: Esri data license agreementAppendix B: Answers to lesson review questions

Lesson 1: Introduction to the ArcGIS API for JavaScriptLesson 2: Working with the mapLesson 3: Working with tasks and widgetsLesson 4: Applying queries to dataLesson 5: Visualizing and rendering dataLesson 6: Using tasks and widgets for analysisLesson 7: Editing featuresLesson 8: Develop an ArcGIS web application

iv

Table of Contents