Scribd
Upload

Building Web Application Using The ArcGIS API JavaScript

202 views261 pages
Building Web Application Using the ArcGIS API JavaScript

Uploaded by

Htv AG
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, ‘[Link] 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. (@[Link], 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 [Link]. 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 JIIIFIIIIIVPIIIIIIIIIIIIIIIIIIIPIPIIIIIIIIIIIIII FIFFIFFIFIFIIFIIIHIFIFIIIIIIIFIIII>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 CeLEEeEeePErEeeeeeererrereeee FIDFIFFFIOODDIO 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 review mt 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 [Link] 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 PIIPIIIIIIIIIIF 22>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 [Link] 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 Bel Introduction 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 A 3333339333373 333333339933333333333239333339337d Additional resources Building Web Applications Using the ArcGIS API for JavaScript (BAAJ) Resource Center http:/ /trainingcloud. [Link]/baaj ‘This web page will serve as the gateway to the resources that you will use in this course. ArcGIS Resource Centers [Link] This site provides unified access to web-based Help, online content, and technical support. ArcGIS API for JavaScript Resource Center [Link] 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. [Link] I[Link] 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 Ess DIFIIDPDPOIPISOID 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 1 Building 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 [Link] 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 13 Building 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. ([Link] [Link]) 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 PIIIIIIIIIIFPIFDIIIIIIIIIPIIPAIIIIDIIIIIIIIIIIIID FIFFIFIFFFFIFIFFFFIIIIIIDA>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., [Link]) * Pointing to an external web address (e.g., [Link],js) - <= _ ( ‘Opening tags CSS reference = < Step: Create page divisions Untitled Document
Step: Add a text input box and button body class="claro">
Copyright © 2011 Esc 29 Getting started with the ArcGIS API for JavaScript 240 Map service overlay comparison chart When combining multiple map services, itis important to be aware of the coordinate system and tiling scheme of the maps. As a general rule, tiled map services will not re-project, thus any combination that displays a tiled map service over a service in any other projection will not display. Dynamic services can always be re-projected to match the projection of the basemap; however, it is not best practice to do so. 1. Which map service coordinate system and tiling combinations will display properly? (¥ = overlay will draw on map; N = overlay will NOT draw on map) Basemap Layer (TILED or DYNAMIC) ee ENG Note: Fora list of the WKIDs of geographic and projected coordinate systems, go to help [Link] and search for the documentation topic Coordinate system IDs. Copyright © 2011 Esa PIFPIIIIIIIPIIIIIPIIIIIIIIIIIIIIINIIIIIIIIIIIIIII DIF FIFTFFFVFDFDHUDFD HOD HOH HSOSO HOD PD POD SOD SOP HPI PDO PD PO IO HOP IIIIII? i | Best practice: When overlaying multiple services, it is important to consider the WKID (spatial reference) of each service. Guidelines + Whenever possible, use WKID 102100 (or 3857, which is the same spatial reference). This WKID will overlay with ArcGIS Online, Google, and Bing maps. * When overlaying two tiled services, the WKID must be the same. * Avoid using dynamic layers as basemaps. + Dynamic services can be re-projected on the fly; however, this is bound to be resource intensive. Copyright © 2011 sri an Getting started withthe ArcGIS API for JavaScript 242 Exercise 2: Create a simple mapping application Estimated time: 30 minutes ‘The ArcGIS API for JavaScript allows you to create interactive and expressive web applications leveraging ArcGIS Server resources (such as maps, locators, and geoprocessing models) and Dojo components (such as grids and charts) In this exercise, you will: * Add a basemap to your starter template * Set the initial map extent * Add an operational layer * Add a basemap gallery widget Step 1: Install the Code Assist plugin for the API ‘The ArcGIS API for JavaScript includes a Code Assist plugin which provides information about the ArcGIS API for JavaScript classes and their properties and methods from within an IDE. Using the steps below, you will download an ArcGIS API for JavaScript plug-in for Aptana Studio that provides the following context-sensitive information: * Auto-completion of source code * Summary of classes, constructors, properties, methods, and globals + Parameter hints for constructors and methods ‘To do so, you must log in with an Esri Global Account. In your web browser, go to the ArcGIS Resource Center at [Link] Q In the upper right comer, click the Sign In link. G1 Ifyou already have an Esti Global Account, enter your username and password and click Login. Q Ifyou do not have an Esri Global Account: * Click the Create a new Esri Global Account link (creating an account is free and takes only a few moments). * In the form that displays, type a user name and password of your choice and fill out the remaining required fields. * Click the "create my Esri Global Account" button. * Confirm your e-mail address to activate your account. Copyright © 2011 Essi PIPIIIIIIIIIIAIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII Lesson 2) ‘Next, you will access the Resource Center for the JavaScript API from the BAAJ Resource | Center. Go to the BAAJ Resource Center (you bookmarked this website earlier). Under Resources, click the ArcGIS API for JavaScript Resource Center link. Click the API Reference tab. | In the frame on the left, click Code Assist Plugins. oooosno On the right, scroll down and click to download the plugin for the ArcGIS JavaScript API version 2.1. o ‘When prompted, save the .zip file to your desktop. o Extract the contents of the .zip file to your Aptana plugins folder: C:\Users\student\ AppData\Local\ Aptana Studio 2.0\plugins\ Open Aptana Studio. Q From the Window menu, choose Show View > References. The References view displays on the left. Expand the Global References tab and check the box to enable the ArcGIS JSAPI 2.1 plugin. aa 2: Reference ArcGIS API for JavaScript CSS and JavaScript ibraries ‘Now that you have installed the ArcGIS API for JavaScript Code Assist plugin, you are ready to begin working with the API. In this step, you will modify references to the stylesheet and JavaScript library to incorporate the JavaScript API in your existing application. From the File menu, choose Open File. Q Navigate to C:\student\BAAJ and open Ex!_MyTemplate.htm | Q Save this file in the C:\Student\BAAJ folder as Ex2_MyFirstMap.html. Copyright © 2011 Ess 243 “ a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a e e a a a a a Getting started with the ArcGIS API for JavaScript Locate the Claro stylesheet reference and replace the Google API Ajax library with the Server API JavaScript API version 2.1 as shown below: Google Pl [Link] /thenes/claro/[Link] AroGIS API for http: //sexverapi .[Link]/jsapi/arcgis/2.1/js JavaScript /do}0/dijit/themes/claro/[Link] Note: Alternatively, you could copy URLs for the stylesheet (and JavaScript API reference) from any of the samples available on the Resource Center. This replacement URL references the location of the ArcGIS API for JavaScript files, which also includes the Dojo libraries. When new versions of the API are released, you would just need to update the version number to work with the updated version, QQ Atthe bottom of the Editor pane, click the IE tab to preview your page and verify that the Page still displays properly. O Click the Source tab to return to your code. Q Locate the JavaScript library reference and modify it to reference the ArcGIS API for JavaScript: Google API ajax. [Link]/ajax/1ibs/do}o/1.5/dojo/[Link].38 ArcGIS API for serverapi arcgisonline. con/jsapi/arcgis/?v=2.1 JavaScript View your page once again to verify that changes have been successfully applied. Step 3: Add a map In order to add a map to your existing border container, you will use the Map class. The [Link] class creates a container and required DOM (Document Object Model) structure for adding layers, graphics, an info window, and other navigation controls. @ Return to the API Reference. (In the BAAJ Resource Center, under Resources, click the API Reference tink.) 244 Copyright ©2011 Esci PIFIFIIFIIIIIIIIIIIIIPII—IPIIIPIIPIIIIIIIIIIIIIIIIIII DI FIFFTFIFDIFDIDIDHOD THO HOD FSD HDHD HDD IO D HO HOD HOP OPO IOI PORIFIPFIIIIIIMI’D (—Tesson2 Q On the left, under the esri book, click the Map class reference. O Review the Description section. 1. Using the API Reference as a guide, complete the following code to load the module for the Map class (the syntax is provided in the Description section): dojo-require(" a Note: The dojo. require () function imports resources into your JavaScript page (Gimilar to the tag: * Call dojo. addontoad(). * Pass in the init function. Copyright © 2011 Ese 2a7 Gatting started withthe ArcGIS API for JavaScript © Preview your application to verify that the map displays. Q Return to the Source tab. Step 4: Set the default map extent By default, the map extent is set to the full extent of the basemap. In this step, you will add code to set the initial extent of the map to show just the area around Redlands, CA. Within the init () function, as the first line of code: * Create a new instance of an [Link] () object named initial&xtent. ‘The Extent object requires five parameters that define the minimum and maximum X and Y coordinate values for the extent, as well as the spatial reference for those coordinates. In the API Reference, expand geometry and click Extent, © Review the syntax for the constructor. 248 ‘Copyright ©2011 Esti PIIIIIIIIIIIIIPIIIIIIIIDIIIIIIIIIIIIIIIIIIIIIIII DIFFIFDFIDIODSODD SOD SID DI HPD FIO DDD ID HO>D HO FDI DIDI IDIIIIIIIIIIIMI Q Use a JSON-formatted string to specify the following coordinate and spatial reference values: "amin" 13049000 "ymin" 4034000 "xmax” -13041000 ymax" 4039000 “epatialReference” {"wkid" : 02100) Q Within the tap constructor, use a JSON-formatted string to set the extent parameter to the value of your initialmxtent variable, Switch to the IE tab and check that the map's default extent is set to show the Redlands, CA area. Q Returm to the Source tab. Step 5: Add an operational layer In this step, you will add an operational layer to the application. Q Goto the BAAJ Resource Center. Copyright © 2011 Ese 249 Getting started with the ArcGIS API for JavaScript Q From the BAAJ Services Directory, click the link for the Redlands_PointsOfinterest service. Note: Services found through the BAAJ Resource Center that point to the BAAJ | ArcGIS Server will be referenced as being from the BAAJ Services Directory. Examine the service properties. 6. Is the service cached or dynamic? Use the ArcGIS JavaScript preview to examine what the service looks like in the browser. Red stars display at various places around Redlands. This is a map service of all the points of interest in Redlands. Regardless of whether or not the service is cached or dynamic, all that is retumed to the JavaScript application is a picture of the features as they are symbolized by the ArcMap document—they carry no data, nor can they be asked to return anything more than what is requested at a particular extent. Close the browser. O Copy the URL for the Redlands_PointsOfinterest map service, then minimize the Services Directory. Just as it was for the basemap, the appropriate object for the map class will need to be specified for this operational layer in order for it to load. Q Inthe API Reference, locate the appropriate class for this layer. (Hint: Expand the layers book.) 7. What is the name of the constructor for this class? Q Within your init () function, below your basemap declaration: * Create a new instance of this object and assign it to a variable named operationalLayer. = For the parameter, pass in the URL for the Redlands PointsOfinterest map service. 220 Copyright © 2011 Esti PDIIFIIIIIIIIFIIPIIIII IPP IPIIIIIIIIIIIIIIINIIIIMIIA DIDFDIFFFDFDID DDFS FD SO HOD SOD DSO DOD DDD HO DOD DOD DIP IOP PDI IPIIIIIIII Ina previous step, you used the addLayers () method which adds layers to a map. In order for your operational layer to draw on top of the basemap, you will reference its variable after the basemap in an array. 8. Ifan array contains two elements, what is the JavaScript syntax for passing this array as a parameter to a method? G1 Inthe [Link] () method call, add the operationaltayer variable as the second array element. ‘The array order corresponds to the desired layer order in the client-side map. O Preview your application. ‘The basemap layer appears below the operational layer in the map. Return to the Source tab. Step 6: Configure a basemap gallery widget in the content pane Your application has a content pane on the right that contains a Find Features button. In this step, you will add a basemap gallery widget to this content pane, and will modify the pane to include two title panes: one for your existing button, and one for the basemap gallery widget. Copyright © 2011 Ess 221 Getting started withthe ArcGIS API for JavaScript ‘The basemap gallery dijit displays a collection of basemaps from [Link] or a user-defined set of map or image services. When a new basemap is selected from the basemap gallery, the existing basemap layer is removed from the map and the newly-selected basemap layer is added. First, you will add HTML elements to position the basemap gallery widget on the page. You ‘will position the widget so that it sits to the right of the map using a TitlePane dijit provided by Dojo. ‘The Dojo TitlePane is a container with a Title heading and a content section that slides opened and closed. TitlePane is an extension to di it. layout .ContentPane. Q Within the rightpane element, and below the element: + Add a
element with the following attribute values: id basemapGallery style overflow:scrol1; ‘This DIV will hold the basemap gallery. You will now add TitlePanes to organize the basemap gallery and separate it from the Find Features button. Add two more
elements, each with a dojotype attribute set to [Link]: * Position the opening and closing tags for one of these
elements around your basemapGallery
element. * Position the other around the and elements. With the tags in place, you are ready to set the attributes for each TitlePane. A TitlePane recognizes the following attributes: * title: The title to be displayed in the pane header. The default is an empty string. * open: Boolean option whether or not to diplay the pane contents. The default is true. G Set the titie attribute for the TitlePanes to Custom Tools and Switch Basemap, as appropriate. G For the Switch Basemap TitlePane, set the open attribute to false. Next, you will write code to implement the Basemap Gallery and display it in its TitlePane. 222 Copyright © 2011 Ese PIFIIPIIIIIPIIPIPIIIIIIIIIIIII~IIIIIIIIIIIIIIIIIA FPIDIDIDIPD DDD FD PDH HDHD DDD DIDI HHO FFIFDIDIFDIFDIFHIFIIIIIIII ao (Ctesson2_) Inthe appropriate section of your code, use dojo. require to load modules for the following dijits: * [Link] * [Link] Note: To find further details about the BasemapGallery dit, view its class description in the API Reference. O Switch to the IE tab to verify that the TitlePanes appear and that you can expand and collapse them, Below the findFeatures () function: * Define a new function named createBasemapGallery () that takes no parameters. ‘The BasemapGallery dijt has two required parameters: 1, A JSON object that contains configuration parameters. 2. A reference to the HTML element where the dijit should be rendered. Within your new createBasenapGallery () function: * Create a new instance of an [Link] () object named basemapGallery. * Pass in the following parameters to the constructor: 1. A JSON-formatted object with the following name/value pairs: Name Value Description map nap Tells the BaseMapGallery which DIV element contains the map showArcGSBasemaps true Tells the BasemapGallery to include {in the gallery) any basemaps available on [Link] 2. The ic value of the
element where the BasemapGallery dijit should display. Once configured, the Basemap Gallery dijit must be started before it will function on the page. Gi For the final line of code in your createBasenapGallezy () function, call the staztup() ‘method on your basemapGallery object. Copyright © 2071 Es 223 Gating started withthe ArcGIS API for JavaScript ‘You need to call your new function as part of your application's initialization process. © Atthe end of your init () function: = Call your createBasemapGallery () function. Q Switch to the IE tab. Click the Switch Basemap title to expand the pane. O Click a few basemaps to test the Basemap Gallery's functionality Q Save your application, if necessary. 228 Copyright © 2011 Esa 2IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIG FPIDIFDIDDFDIOD DODD HOD DDD DDI DODD HDD IIIAIFIIFIIIFIIIIIIIMI Lesson?) Lesson review 1. What functionality is included in the JavaScript API? 2. What is the Services Directory? How is it used in conjunction with the JavaScript API? 3. What information is presented in the API Reference? Copyright © 2011 Es 2.25 Getting started withthe ArcGIS API for JavaScrict Answers to Lesson 2 questions Accessing service information 1. What are the values for the following properties of the World_Street_Map service: ‘htip:/ /[Link]/ ArcGIS rest/services/ World_Street Map/MapServer # of Layers 1 Spatial Reference 102100 (3857) Single Fused Map Cache [true # of Levels of Details (scales) | 18 Tile format JPEG Units of Coordinate System | esriMeters (2. What are the values for the following properties of ESRI_Population_World (MapServer): ttp:/ /[Link] ArcGIS /rest services / Demographics ESRI Population_World/ MapServer # of Layers 1 Spatial Reference 4326 ‘Single Fused Map Cache —_| false # of Levels of Details (scales) | n/a Tile format nla Units of Coordinate System | esriDecimalDegrees | 226 Copyright © 2011 Essi PIFDIDFIFIFPIIIIIIIIIIIIPIPIIIIIIIIIIIIIIINIIIIIIIII Map service overlay comparison chart 1. Which map service coordinate system and tiling combinations will display properly? (¥ = overlay will draw on map; N = overlay will NOT draw on map) Basemap Layer (TILEDor DYNAMIC) ener neni Exercise 2: Create a simple mapping application 1. Using the API Reference as a guide, complete the following code to load the module for the Map class (the syntax is provided in the Description section): [Link] (“[Link]") ; 2. In which section of your code will you load the map module? “Requires and Functions --> 3. What is the value for the id attribute of this DIV element? map Copyright ©2011 Ess 227 DIDIFFDFDIDHD PDP DID DID IID DISD HOD IIIDIIIIIIIFIFIHIIFIIIIIIIII Getting started with the ArcGIS API or JavaScript 4, Is the World Street Map service cached or dynamic? This is a cached (or tiled) map service. 5. Complete the syntax below for the object constructor: esti. layers ArcGISTiledMapServiceLayer (url, options?) 6. Isthe service cached or dynamic? Dynamic 7. What is the name of the constructor for this class? esri. layers ArcGISDynami MapServiceLayer () 8. Ifan array contains two elements, what is the JavaScript syntax for passing this array asa parameter to a method? object method ([array_elenent1, array_elenent2]) ; Lesson review 1. What functionality is included in the JavaScript API? Maps, graphics, tasks, and widgets 2. What is the Services Directory? How is it used in conjunction with the JavaScript API? The Services Directory is a catalog of available GIS services on a server. Use it to access REST endpoints and detailed information about services. 3. What information is presented in the API Reference? Detailed descriptions for each class in the API (constructors, properties, methods, events, etc.) 228 Copyright ©2011 Esri PDIFIIIIIIIIIIPIIPIIIPIPIIIIIIIIIIIIIIIIIIIIIIII 1 1 | | | | | a A a a a ea a a a a a a a a a a a a a a e a a a a a “ a e a a A a a e a a a a a a a a a a a Exercise solution Note: For printing purposes, some lines of code in this solution may wrap. ‘Step: Reference ArcGIS API for JavaScript CSS and JavaScript libraries true }; /48/do}0/dijit/thenes/claro/[Link]"> ‘stylesheet type="text/css" ‘http: //[Link]/BAAJ/styles/css/BAAJ_Clean.css"> href: Step: Add a map Copyright © 2011 Ese 229 Getting started with the ArcGIS API for JavaScript Step: Set the default map extent function init() { var initialfxtent = new [Link]( { “amin” :-13049000, ymin" :4034000, “smax" : 13041000, ymax" : 4039000, “spatialReference" :{""wkid" :102100} ne map = new [Link]("nap", { extent:initialExtent }); var basemap = new esri. [Link] ( “nttp: //[Link]/ArcGIS/rest /services/World Street_Map/MapServer™) : Step: Add an operational layer var basemap = new [Link] ( “http: //[Link]/ArcGIS/rest. /services/World_street_Map/MapServer") + var operationalLayer = new esri. layers .ArcGISDynamicMapServiceLayer ( “http: //[Link] .com/ArcGIS/rest /sexvices/Redlands PointsOfInterest/MapServer") ; [Link] (|basemap, operationalLayer]) } 230 Copyright © 2011 Ess PIDIIIIIIIIIIIIIIIIIIPIIIIIIFIIIIIIIIPIIIIIIII DF FDFFFDIFDIDIDDID ID ADHD IIOP ODD DDO SDP SOD OHO DHIIIFAIIIIAHHNIIIIIII Lesson Step: Configure a basemap gallery widget aun Instagram

    • Get our free apps

    About

    Legal

    Support

    Social

    Get our free apps

    Language:
    Copyright © 2026 Scribd Inc.
    We take content rights seriously. Learn more in our FAQs or report infringement here.
    We take content rights seriously. Learn more in our FAQs or report infringement here.
    Language:
    Copyright © 2026 Scribd Inc.