Common Custom JavaScript


Purpose
This sample demonstrates how to use the Web Application Developer Framework (ADF) JavaScript Library included with the Web ADF. The Web ADF JavaScript Library is built on the ASP.NET Asynchronous JavaScript and XML (AJAX) JavaScript library and has access to the capabilities of the ASP.NET AJAX client framework. As a result, you can interact with Web ADF controls using a pure browser JavaScript application programming interface (API). When necessary, changes to the controls are synchronized with their server-side representation. The following pages and Web ADF JavaScript capabilities are provided:
  • Default.aspx:
    • Navigates a map
    • Adds a mouse event on the map to return map coordinates based on cursor location
    • Adds a key event on the map to capture a user click
    • Adds graphics and MapTips
    • Adds an ArcGIS for Server cached resource dynamically
  • MapDataGridHover.aspx:
    • Enables hover and highlight capabilities on a data table associated with a graphics layer
  • AddArgumentsToTool.aspx:
    • Adds custom argument and value content to a Web request generated by the map and processes it on the server
  • AddArgumentsToWebRequest.aspx:
    • Modifies the content of a Web request when using a partial postback and customizes the argument and value content sent to the server
  • MapResizeToWindow.aspx:
    • Uses JavaScript and markup to automatically resize a map control to match the browser window size
  • ClientTool.aspx:
    • Adds implementation code for a tool in a Toolbar control using ADF JavaScript
  • CustomCallout.aspx:
    • Creates a custom callout window for graphic features added to a map via a user click

How to use

If the sample has associated data, you will find that the sample's zip file includes a "data" folder alongside the language folders. However, you will need to update the sample to point to the location of the data once you have extracted all the files.

At design time
  1. Verify that the Web ADF for the .NET Framework is installed and functioning properly. For information on installing and configuring the Web ADF, consult the installation guide.
  2. In Windows Explorer, navigate to <ArcGIS Developer Kit install location>\Samples\ServerNET. This folder contains the Common_CustomJavaScript CSharp and VBNet folders.
  3. Open the folder of the language you are going to use (that is, CSharp or VBNet), and copy the Common_CustomJavaScript_<language> folder to c:\inetpub\wwwroot. The <language> variable can be CSharp or VBNet.
  4. Open the IIS Manager from Control Panel, Administrative Tools, Internet Information Services (IIS) Manager, or Internet Information Services.
  5. In the console tree view on the left, navigate to Local Computer, Web Sites, Default Web Site. Expand Default Web Site. Right-click the Common_CustomJavaScript_<language> folder, and click Properties. The Properties dialog box appears.
  6. Click the Directory tab, click the Create button in the Application Settings section, then click OK to close the Properties dialog box.
  7. Start Visual Studio 2010 and open the solution Common_CustomJavaScript_CSharp2010.sln located in the c:\inetpub\wwwroot\Common_CustomJavaScript_CSharp folder.
  8. In the Solution Explorer, right-click the page you want to view and select Set As Start Page.
  9. Open the page in Design view, open the properties window for the MapResourceManager control, and click the ellipsis next to the ResourceItems property. The ResourceItem Collection Editor dialog box appears.
  10. Add or change the MapResourceItem associated with a map service (for example, ArcGIS for Server, ArcIMS, and so on). Some of the sample code assumes that the resource is in a geographic coordinate system (GCS).
  11. If necessary, set the run time identity of the Web application using one of the next two steps. If not necessary, proceed to Step 14.
  12. At design time, the identity of the user running Visual Studio is used to connect to an ArcGIS for Server local data source. At run time, that identity is established by the Web application. Only one identity can be used to define access to the ArcGIS for Server local data sources in a single Web application. This identity can be explicitly defined when building the Web ADF application in Visual Studio by right-clicking the Web project in the Solution Explorer and selecting the Add ArcGIS Identity option. Add the identity credentials that will be used to access ArcGIS for Server local resources at run time. This information is added to the web.config file in a standard ASP.NET identity tag. If the Encrypt identity in web.config check box is selected, the identity tag will be encrypted; otherwise, the username and password are stored as clear text.
  13. Open the web.config file and add an <identity> element in <system.web>. Set the impersonate attribute to true. Add a username and password attribute, and set them to a valid user account. If you are working with ArcGIS for Server local data sources, ensure that the account has access to the geographic information system (GIS) server resources referenced in the Map control.
  14. Save the project.
  15. Click the Debug drop-down menu and click Start Debugging.

At run time
  1. Browse to the viewer uniform resource locator (URL), for example, http://localhost/Common_CustomJavaScript_CSharp.
  2. In the Default.aspx page, click the Zoom In button to zoom in on the map. The map coordinates are updated in the browser's status bar when the mouse cursor hovers over the map.
  3. Type information in the text box to display in a MapTip, pan the map to a location you want to place a graphic with a MapTip, press and hold A on the keyboard, then click the map. Depending on the geometry type you selected in the JavaScript code (point by default), you can input a graphic on the map. When finished, hover over the graphic to see the MapTip.
  4. Click the Add Layer button to add an ArcGIS for Server cached service dynamically, modify the code to point to a value cache location, and define the appropriate parameters. In MapDataGridHover.aspx, three random points have been generated and rendered as Web ADF graphics on top of the USA sample dataset. The graphics are rendered on the client so you can interact with them using the Web ADF JavaScript Library.
  5. Hover over a row in GridView. The corresponding feature in the map is highlighted.
  6. Click the row in GridView. The map zooms to the feature clicked.
  7. In AddArgumentsToTool.aspx, select an item from the drop-down list boxes to the right of the map. One drop-down list is a server control and the other is a client Hypertext Markup Language (HTML) element. Using the Web ADF JavaScript Library, the value of each is appended to the Web request initiated via a custom tool on the map. The server-side code illustrates how to retrieve the custom items.

Common_CustomJavaScript_CSharp\Default.aspx Custom JavaScript is included in this page.
Common_CustomJavaScript_CSharp\Default.aspx.cs Code behind the user interface (UI). No custom JavaScript is contained in this page.
Common_CustomJavaScript_CSharp\MapDataGridHover.aspx Custom JavaScript is included in this page.
Common_CustomJavaScript_CSharp\MapDataGridHover.aspx.cs Code behind the UI. Adds custom client-side interaction to GridView.
Common_CustomJavaScript_CSharp\AddArgumentsToWebRequest.aspx Contains a button to initiate a partial postback and a set of elements to add to the Web request.
Common_CustomJavaScript_CSharp\AddArgumentsToWebRequest.aspx.cs Code behind the UI. Parses the custom Web request content.
Common_CustomJavaScript_CSharp\AddArgumentsToTool.aspx Custom JavaScript is included in this page. Uses the Map's onServerRequest event to modify the argument and value array.
Common_CustomJavaScript_CSharp\AddArgumentsToTool.aspx.cs Code behind the UI. No custom JavaScript is contained in this page.
Common_CustomJavaScript_CSharp\MapResizeToWindow.aspx Custom JavaScript is included in this page. Resizes the Map control based on the browser window size.
Common_CustomJavaScript_CSharp\MapResizeToWindow.aspx.cs Code behind the UI.
Common_CustomJavaScript_CSharp\CustomCallout.aspx Custom JavaScript is included in this page. Uses ADF JavaScript to create a graphic feature with a custom callout dialog box.
Common_CustomJavaScript_CSharp\CustomCallout.aspx.cs Code behind the UI.
Common_CustomJavaScript_CSharp\ClientTool.aspx Custom JavaScript is included in this page. Uses ADF JavaScript, enabled via a tool in a Toolbar control, to interact with the Map control without requiring custom server-side code.
Common_CustomJavaScript_CSharp\ClientTool.aspx.cs Code behind the UI.
Common_CustomJavaScript_CSharp\App_Code\CustomTool.cs Custom tool implementation showing how to retrieve custom argument and value content.
Download the C# files
Common_CustomJavaScript_VBNet\Default.aspx Custom JavaScript is included in this page.
Common_CustomJavaScript_VBNet\Default.aspx.vb Code behind the user interface (UI). No custom JavaScript is contained in this page.
Common_CustomJavaScript_VBNet\AddArgumentsToWebRequest.aspx Contains a button to initiate a partial postback and a set of elements to add to the Web request.
Common_CustomJavaScript_VBNet\AddArgumentsToWebRequest.aspx.vb Code behind the UI. Parses the custom Web request content.
Common_CustomJavaScript_VBNet\MapDataGridHover.aspx Custom JavaScript is included in this page.
Common_CustomJavaScript_VBNet\MapDataGridHover.aspx.vb Code behind the UI. Adds custom client-side interaction to GridView.
Common_CustomJavaScript_VBNet\AddArgumentsToTool.aspx Custom JavaScript is included in this page. Uses the Map's onServerRequest event to modify the argument and value array.
Common_CustomJavaScript_VBNet\AddArgumentsToTool.aspx.vb Code behind the UI. No custom JavaScript is contained in this page.
Common_CustomJavaScript_VBNet\MapResizeToWindow.aspx Custom JavaScript is included in this page. Resizes the Map control based on the browser window size.
Common_CustomJavaScript_VBNet\MapResizeToWindow.aspx.vb Code behind the UI.
Common_CustomJavaScript_VBNet\CustomCallout.aspx Custom JavaScript is included in this page. Uses ADF JavaScript to create a graphic feature with a custom callout dialog box.
Common_CustomJavaScript_VBNet\CustomCallout.aspx.vb Code behind the UI.
Common_CustomJavaScript_VBNet\ClientTool.aspx Custom JavaScript is included in this page. Uses ADF JavaScript, enabled via a tool in a Toolbar control, to interact with the Map control without requiring custom server-side code.
Common_CustomJavaScript_VBNet\ClientTool.aspx.vb Code behind the UI.
Common_CustomJavaScript_VBNet\App_Code\CustomTool.vb Custom tool implementation showing how to retrieve custom argument and value content.
Download the VB.NET files

Download the files for all languages