0 ratings0% found this document useful (0 votes) 473 views261 pagesBuilding Web Application Using The ArcGIS API JavaScript
Building Web Application Using the ArcGIS API JavaScript
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content,
claim it here.
Available Formats
Download as PDF or read online on Scribd
233323333373
>
Building Web Applications Using the
ArcGIS® API for JavaScript™Copyright © 2011 Es
Al ights reserved
(Course version 1.1, Version ease date January 2011,
Pried inthe Une Stes of Amora
“The intormason contained in Bis documents the exclusive property of Es. This work is protect under Und States copyright lw and
ther intrnabonal copyright Weabes and conweitons, No pa oft work may be reproduced or anomitied i any fer or by ar means,
‘laconic or mecnancal,incksng photocopying and ecorcing, rbyanyiforton storage or retieval system, excep as exresty
‘permied in ring by Ext A request shouldbe sent o Aeon Corvacts and Legal Services Manaper, Eat 380 New Vork Steet,
Redlands, CA 82373-6100 USA
[EXPORT NOTICE: Use of these Matai subject to US, export conto laws and regulations including he U.S, Deparment of Commerce
Export Admnisaon Requatons (EAR). Diversion ofthese Materia onary t US. law is prone.
“Te nformaton contained in his documents subject to change witout natce.
U.S. GOVERNMENT RESTRICTEDILIMITED RIGHTS
‘Any softwar, documentation, andor data delved hereundarssubect othe arms of he Liconse Agroamant. The commercial
{Ronse nights inthe Ucense Agreement sty gover Leenseas use, eproducon, or dacosure ot he sofware, daa, and
‘documentation Inno event shal be U.S. Goverment acquregfeate’ han RESTRICTEDIUIMTED RIGHTS. Ata minimum, use,
‘upleaton.or aecoeure by the U.S. Goverment is subject festicton a el forth FAR §52227-14 Arates LM, andl (DEC
2007), FAR §£2 27-10(2) (DEC 2007) andr FAR §12 21112 212 (Commercial Techical Daa/Computer Software) and DFARS.
§252.227-7015 (NOV 1868) (Technical Data) anor DFARS §227 7202 (Computer Sofware). a8 sppeae, CorvactorManutacturer
IE E6r, 380 New York Steet Redands, CA 92573-8100, USA.
(@ext.com, 30 Analyst, ACORN, Adsress Coser, ADF, AML, AcAtas, AreCAD, AreCataog, AveCOGO, AeDeta,AeDee, Arcs
[NcEélor ACEupe, ArcExplrer, ArcExpess, AcGIS, AcGlbe, ACG, ArcIMS, ARCIINFO, Arcno, Aen ibrar, ArLesSon,
‘Location, ArcLogists, ArcMap, ArcNetwor, ArcNews, Objects, AOpen, Arad, ACPO, ArcPress, ArReader. AreScan
‘NeScene, AcSchool, ArcSrps, SOE, AcSd,AreSketeh, AcStom, AeSurvey, ACTIN, AcToolbox,ArcTodls, ACUSA,Arcser,
‘review, AcVoyagerArcach, Aree, AcWocs, ACKML, Alas GIS, Alas Ware, Avenue, BAO, Business Anahst, Business Analyst
‘nine, BusnestMMAP, Communtyino, Database Integrate, OBI KR, EDN, Ean, EsrTeam GIS, Ear—The GIS Company, Es\—The GIS
People. Ext—The GIS Sotware Leader, FamEdt, GeoColece, Geograptic Design System, Geograpty Matis, Geography Network, GIS
by Ess, GS Day, GIS for Everyone. GiSData Server, JTX, Malt Maplex, MapOtecs, Mapudio, Modeler. MOLE, MPS—Atas,
PLTS, Renta-Tech, SDE, SM, Souroebook America, Spat Database Engine, Sreefap, Tapes, he ARCAINFO logo, the ACIS loo,
{he ArcGIS Explorer logo, te ArcPad loge, the Es globe loge, te Es Press ogo the GIS Day logo, the Maptlogo, The Geographic
‘Advaniage, Th Geographic Appreach, The Works Leatng Desktop GIS, Water Wes, wn. esr con, wir gographynetwork com,
‘wan gecom, wow gtay.com. and Your Personal Geographic Intomaton Sytem ar rademarte, registered trademarks, or ence marks
OF Een the Untod States, te European Communty, of carain other nsdictons.
Cher companies and products mentioned herein may be raermarks or registered trademarks of ee respactve ademark owners
JIIIFIIIIIVPIIIIIIIIIIIIIIIIIIIPIPIIIIIIIIIIIIIIFIFFIFFIFIFIIFIIIHIFIFIIIIIIIFIIII>D
la
— Contents =
Introduction
Introduction.
COURSE GOAIS nn
Using the course workbook
Additional resources.
Installing the course data
Building JavaScript applications
tt
wo VD
Lesson introduction
‘What wil | buildin this course?
Getting started: Three approaches.
Creating a JavaScript application
Anatomy ofa JavaScript application (HTML fl).
Aptana: Overview,
Exercte 1: Add JavaScript components othe application. .
(Open Aptana and create a new web page.
Reference JavaScript and CSS libraries.
Create page divisions
‘Add a text input box and button.
Create additional page divisions
‘Apply a themed style sheet
Lesson review
‘Answers to Lesson 1 questions
Exercise solution .
Getting started with the ArcGIS API for JavaScript
Lesson introductior
Why choose the ArcGIS API or JavaScript?
Inside the AreGIS API for JavaScript
Leveraging the API....
Build options.
API Resources ...
ArcGIS Server and ArcGIS API
‘Accessing service information
‘Adding a simple map to your application...
‘Map service overlay comparison chart. son 240
Exercise 2: Create a simple mapping applications. ou BAB
Install the Code Assist plugin forthe APL 242— Contents —
Reference ArcGIS API for JavaScript CSS and JavaScript libraries .....2-13
Add a map
Set the default map extent,
‘Add an operational layer...
Configure a basemap gallery widget inthe content pane
Lesson review...
Answers to Lesson 2 questions ..
Exercise solution
Performing data queries
Lesson introduction
Data queries
Query task overview.
Query results
‘Comparing query task types.
Exercise 3A: Query data
Set up a query task
‘Add a graphics layer.
Query wit text sting
‘Query with WHERE clause...
Compare QueryTask and FeatureLayer.
Query with time slider: Overview.
FeatureLayer display modes.
Creating a time-enabled service so
Exercise 38: Query tme-enabled features witha FeatureLayer.
Explore and configure a feature layer
Configure time slider.
Set the FeatureLayer mode property...
Lesson review
‘Answers to Lesson 3 questions
Exercise solution: Exercise 3A...
Exercise solution: Exercise 3B.
Visualizing query results
Lesson introduction
Displaying feature and attribute data. 43
Infowindow. 48
Setting a definition expression 45
CECE CEE ELLE CeLEEeEeePErEeeeeeererrereeeeFIDFIFFFIOODDIO HDI SOHO DODD I HOIIIIFIFIIFIFIFIIIIIHIIIIIID
— Contents -
Using a DataGrid..
‘Simple renderer...
Unique value renderer. 48
Class breaks renderer... 49
Examine renderer types. 410
Exercise 4: Display query resuts... ant
Replace operational layer with feature layer. aren
Apply a definition query to a feature layer. 412
Display an InfoWindow nen sn 4A
Display attributes in a DataGrid... oe AAT
Apply a unique value renderer.. 4-22
Lesson review 4-28
‘Answers to Lesson 4 questions 4-28
Exercise solution . se 4-30
Working with tasks
Lesson introduction...
Anatomy of a task,
‘Steps for implementing a task
Locator task overview... cm
Exercise 5A: (Optional) Geocode with a locator task.
Examine properties of locator task.
Create locator task.
Configure user interface.
Clear graphics and execute the task.
Create and bind an event handler
Explore a geoprocessing model
Geoprocessor task overview.
ParameterValue array .. =
Exercise 5B: Configure a geoprocessing task..
Create user interface to hold task parameter values.
‘Add transit stop and city limit overtays..
Explore geoprocessing task parameters.
Create task reference and configure execution ..
Configure result hander
Network analysis tasks...
Closest facility task overview...
Compare network analysis task scenarios.
Lesson reviewmt Contents —
‘Answers to Lesson 5 questions. 5-36
Exercise solution: Exercise 5A..
Exercise solution: Exercise 5B..
Editing spatial data
Lesson introduction et
Web editing scenarios... 62
Using feature services to edit. 63
Using a proxy page 1m. 64
‘Authoring editing resources. 65
Publishing feature services ..
Using the Editor widget
Using a geometry service...
FeatureLayer display modes.
Explore editing scenarios
Exercise 6: Configure the Euitor widget
Explore and test a feature service layer.
Add feature layers.
Explore feature layer modes...
612
e14
‘Add an Editor widget and geometry service 6-15
Add editing toots 6-18
Lesson re¥i0W enn 621
How to: Configure a proxy page. 6-22
Answers to Lesson 6 questions 6-24
Exercise solution 6-28
Customizing applications
Lesson introduction...
Combining operations
Querying a FeatureLayer
Leveraging ArcGIS.com templates
Deploying your application
Exercise 7A: Chaining operations together.
‘Add schools as a Feature Layer.
‘Add an InfoTemplate,
Set up to query the schools,
Chain in the feature-selection operation
Restore InfoWindow functionality...
PIPIIIIIIIIPIIIPPDIIPI—DIPIIIP IP III PIIPIIIIIIIIIIF22>FFFIIIIIIIFIIIIINHdIIIIIIIIIFIII>IFIFIIIIIID
—— Contents ~
ch Conte ites gw)
Challenge: Add status messaging o 716
Challenge: Automatically resize the map...
Challenge: Add a legend widget...
Exercise 7B: Using and extending templates from ArcGIS.com 7-19
Create and download a web application template...
‘Add a basemap gallery widget.
Modify the design.
‘Add an editing widget.
Lesson review ...
‘Answers to Lesson 7 questions...
Challenge solution: Add status messaging
Challenge solution: Automatically resize the map
Challenge solution: Add a legend widget.
Exercise solution: Exercise 7A.
Exercise solution: Exercise 7B..
Appendixes
‘Appendix A: Esri data license agreement AA
‘Appendix B: Data acknowledgments. see BelIntroduction
Using the ArcGIS API for JavaScript, you can build high-performing, engaging web
applications that incorporate GIS mapping, editing, and geoprocessing functionality. This,
course teaches how to leverage the ArcGIS API for JavaScript and the Dojo framework to
efficiently develop lightweight applications that meet the needs of their intended audience. You
will leam about the resources available in the JavaScript API and how to incorporate basemaps
and other resources from ArcGIS Onlline to enhance your web applications.
Course goals
By the end of this course, you will be able to:
+ Develop, test, and deploy an application using the ArcGIS API for JavaScript.
* Incorporate ArcGIS Server services that allow end users to query, visualize, and edit GIS
data,
* Include time-aware data in an application.
* Display map features with different symbols.
* Display query results within a data grid.
Apply best practices to ensure high performance and proper communication between the
client application and the web server.
Using the course workbook
The course workbook is an integral part of your learning experience. During class, you will use
the workbook to complete activities and exercises that reinforce specific tasks and skills. After
class, the workbook is your personal reference to review concepts and activities or work through
exercises again to reinforce what you have leaned.
‘Copyright © 2011 Esti
a
A
s
a
A
a
x
A
A
a
A
A
A
a
a
A
A
a
A
A
a
4
A
A
A
A
a
A
A
A
ai
a
A
a
a
A
A
a
4
a
a
5
A
A
a
A3333339333373 333333339933333333333239333339337d
Additional resources
Building Web Applications Using the
ArcGIS API for JavaScript (BAAJ) Resource Center
http:/ /trainingcloud. arcgis.com/baaj
‘This web page will serve as the gateway to the resources that you will use in this course.
ArcGIS Resource Centers
http://resources.arcgis.com
This site provides unified access to web-based Help, online content, and technical support.
ArcGIS API for JavaScript Resource Center
http://links.esri.com/ javascript
This site provides access to the ArcGIS JavaScript API Reference, which includes information
about each object and its properties, methods, and events. This site also provides access to
relevant documentation, samples, forums and the code gallery.
ArcGIS.com
Ihttp://www.arcgis.com
A web site for finding and sharing geographic information system (GIS) content, organizing
geographic information into groups, and building communities.
Installing the course data
This course does not have a data CD. Alll the data that is required for exercises will be accessed
via the BAAJ Resource Center.
[D1scLATMER: SOME COURSES USE SAMPLE SCRIPTS OR APPLICATIONS THAT ARE SUPPLIED EITHER OW
‘THE CD OR GN THE INTERNET. THESE SAMPLES ARE PROVIDED ‘AS 1S, WITHOUT WARRANTY OF ANY
OND, ETHER DORESS OR IMPLI, CLUDING BUT HOT LIMITED TO, THEIMPLIED WARRANTIES OF
\MERCHANTABLITY AND FITNESS FOR A PARTICULAR PURPOSE. ESRI SHALL NOT BELIABLEFOR ANY
DAMAGES UNDER ANY THEDEY OF LAWBELATED TO THE LICENSEX'S USE OF THESE SAMPLES, EVEN IF
ESRIIS ADVISED OF THEPOSSIBLITY OF SUCHDAMAGE. PERABSSION TO USE, COPY, AND DISTRIBUTE
‘THESE SAMPLE SCHDTSIS HIGRBY GRANTED, PROVIDED THERES HO CHARGE OR FEEFOR SUCH COPIES
Copyright © 2011 EssDIFIIDPDPOIPISOID FS IHS HO SPP DSO O IPO > HOP POP IPIIIIDIDIIDIIIPIII?D
Introduction
In this lesson, you will create a JavaScript web application using the Aptana IDE. You will
create a new project in Aptana and add basic JavaScript components, then save it as an HTML,
file.
Topics covered
* Aptana IDE
* Creating a new Aptana project and HTML application
* JavaScript and Dojo components
Learning objectives
After completing this lesson, you will be able to:
* Explain the basic structure of a JavaScript web application
* Create a simple JavaScript application that leverages Dojo
1Building JavaScript applications
What will | build in this course?
\2 | Add a map, a basemap gallery widget, and a custom extent
[3 Perform data queries; visualize time enabled data =
4 Visualize query results (using a data grid, info window, and custom rendering)
5 ‘Add functionality: Geocoding and géoprocessing
6 ‘Add functionality: Editing
7
‘On your own: Customize pic com
AteGIS.com templates); apply finishing touches
functionality, leveraue
12 Copyright © 2011 Essi
PIFPIDPIIIIIIIIIIIIIPIIIPIIIPIIIIIIPIIIIIIINIIIINIIIWI>FITFIFIFIFFHIFIHFIF}IFIFIIIIIIIM?
>
‘a
Get
g started: Three approaches
‘There are several approaches you can use for developing your application. Use the approach (or
combination of approaches) that best achieves your development goals and schedules.
Write your Out-of-the-box viewer
own code (no coding)
Creating a JavaScript application
JavaScript applications are stored in simple text files, usually as part of HTML documents. They
are developed using a text editor such as Aptana. In order to create and deploy a JavaScript
application, the minimum requirements are a text editor, a web server, and a web browser.
2
Copyright © 2011 Es 13Building JavaScript applications
4
Within an HTML document, you can provide reference to the following:
* Cascading Style Sheets (CSS), which will describe the look and format of your
document.
* JavaScript code in a separate JS file
+ The Dojo JavaScript toolkit, which provides the basis for dijits (i.e., dojo widgets) and
other JavaScript tools. (http://www dojotoolkit.org)
Integrated
Development
Environment (IDE)
Many development environments are freely available to use for
writing applications with JavaScript. In this course, you will use
Aptana, which includes Code Assist for Dojo (as well as the
JavaScript API), but several others are free and available such
as Visual Web Developer, Notepad, and Notepad ++.
Web server
| Microsoft Internet Information Server (IIS) or other
| In order to deploy your application, you are essentially publishing
| the application to your web server, making your application
| available to the client.
Once you have copied your application to the appropriate
location on your web server, an end user may access it via a
standard URL to your website where the application resides.
Client (browser)
Al major web browsers are supported (j.e., Firefox 3.5, Google
Chrome 4, Intemet Explorer 7 and 8, Safari 3)
Copyright ©2011 Es
PIIIIIIIIIIFPIFDIIIIIIIIIPIIPAIIIIDIIIIIIIIIIIIIDFIFFIFIFFFFIFIFFFFIIIIIIDA>IOIIIIdD
Anatomy of a JavaScript application (HTML file)
‘You can reference JavaScript code in your application in a variety of ways:
* Directly within the HTML file
* Pointing to an external file which contains the code (e.g., mycode.js)
* Pointing to an external web address (e.g., dojo.xd,js)
- <= _
(
‘Opening tags CSS reference
=
<