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
    • Navigate a map
    • Add a mouse event on the map to return map coordinates based on cursor location
    • Add a key event on the map to capture a user click
    • Add graphics and MapTips
    • Add an ArcGIS Server cached resource dynamically
  • MapDataGridHover.aspx
    • Enable hover and highlight capabilities on a data table associated with a graphics layer
  • AddArgumentsToTool.aspx
    • Add custom argument and value content to a Web request generated by the map and process it on the server
  • AddArgumentsToWebRequest.aspx
    • Modify the content of a Web request when using a partial postback and customize the argument and value content sent to the server
  • MapResizeToWindow.aspx
    • Use JavaScript and markup to automatically resize a map control to match the browser window size
  • ClientTool.aspx
    • Add implementation code for a tool in a Toolbar control using ADF JavaScript
  • CustomCallout.aspx
    • Create 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 install location>\DeveloperKit10.0\Samples\ServerNET. This folder contains the Common_CustomJavaScript CSharp and VBNet folders.
  3. Open the folder of the language you're going to use—CSharp or VBNet—and copy the Common_CustomJavaScript_<language> folder to c:\inetpub\wwwroot. The <language> variable can be either 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 opens.
  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 Microsoft Visual Studio (2008 or 2010) and open the solution for the version of Visual Studio you're using. The Visual Studio version is appended to the solution file name. For example, the Visual Studio 2008 solution file for the Common_CustomJavaScript_CSharp sample is Common_CustomJavaScript_CSharp2008.sln and is located in the c:\inetpub\wwwroot\Common_CustomJavaScript_CSharp folder.
  8. In 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 opens.
  10. Add or change the MapResourceItem associated with a map service (ArcGIS Server, ArcIMS and so on). Some of the sample code assumes that the resource is in a geographic coordinate system.
  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 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 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 Solution Explorer and selecting the Add ArcGIS Identity option. Enter the identity credentials that will be used to access ArcGIS 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 checked, 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're working with ArcGIS 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, and press and hold the A key and 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 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. 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 user interface. 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 user interface. 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 user interface. 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 user interface.
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.
Common_CustomJavaScript_CSharp\CustomCallout.aspx.cs Code behind the user interface.
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 user interface.
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. 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 user interface. 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 user interface. 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 user interface. 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 user interface.
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.
Common_CustomJavaScript_VBNet\CustomCallout.aspx.vb Code behind the user interface.
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 user interface.
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