Developing Web Apps with ArcGIS®

API for JavaScriptTM

STUDENT EDITION

Copyright © 2016 EsriAll rights reserved.

Course version 1.4. Version release date October 2016.

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, Esri—Team GIS, Esri—The GIS Company, Esri—The GIS People, Esri—The 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, MPS—Atlas, PLTS,Rent-a-Tech, SDE, SML, Sourcebook·America, 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 ArcGIS API for JavaScript

Lesson introductionArcGIS for JavaScript applicationsDeveloper requirementsDeveloper resourcesUsing the SDKIntroduction to ArcGIS API for JavaScriptGetting started with the APIArcGIS 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 map

Lesson introductionAdding data to the mapCombining map layersVector tile layersWorking with map layersAdding layers programmaticallyExercise 2A: Add data to your map using layers

Open the starter applicationSpecify an initial extentAdd tiled and dynamic layersAdd a feature layer

Using widgetsWorking with eventsExercise 2B: Add widgets

Add a BasemapToggle widgetAdd a Legend widget

Displaying a web mapReference a web map layer

i

Exercise 2C: Add data to your map using web mapsTraining Services account credentialsOpen the starter applicationUse a web mapAdd a BasemapGallery widgetUpdate the legend

Lesson review

3 Working with tasks and widgets

Lesson introductionUsing tasks and widgetsWorking with GIS servicesWorking with secure GIS resourcesTask implementation workflowExplore task implementationGeocoding and searchingDirections and routingExporting a web mapExercise 3: Geocode and find directions

Open the SearchWidget starter applicationAdd a Search widgetOpen the LocatorTask starter applicationUse a Locator taskOpen the Directions-Output starter applicationAdd a Directions widget(Optional) Add a Print widget

Lesson review

4 Applying queries to data

Lesson introductionDisplaying temporary data in the mapUnderstanding graphicsUnderstanding symbolsDrawing graphics on the mapExercise 4A: Add a drawing tool

Open the starter applicationImplement a drawing toolDisplay user input on a graphics layer

Using the API to answer questionsDisplaying query resultsSetting up the Query objectExecuting a queryUnderstanding the FeatureSetDisplaying selected features in a table

ii

Query and select featuresExercise 4B: Query data

Select featuresDisplay selected features in a table

Optimizing the FeatureLayerUsing FeatureLayer modesLesson review

5 Visualizing and rendering data

Lesson 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

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

Lesson review

6 Using tasks and widgets for analysis

Lesson introductionAchieving custom analysisUsing the GeoprocessorWorking with geoprocessing parametersExecuting a geoprocessing taskUsing geoprocessing services and tasksExercise 6A: Implement a geoprocessing task

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

Performing measurementsUsing the Geometry serviceUsing ArcGIS analysis services

iii

Working with GeoEnrichment widgetsWorking with analysis widgetsExercise 6B: Implement an analysis widget

Review the application requirementsLesson review

7 Editing features

Lesson 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 application

Lesson introductionDevelop an ArcGIS web applicationLocate developer resourcesScenario 1: Develop a secure applicationScenario 2: Develop a responsive design applicationLesson review

Appendixes

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

iv

Lesson 1: Introduction to 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

v