Common Custom JavaScript



Description:

This sample illustrates how to use the Web ADF JavaScript Library included with the Web ADF. The Web ADF JavaScript Library is built on the ASP.NET AJAX JavaScript library and thus has access to the capabilities of the ASP.NET AJAX client framework. As a result, you have the ability to interact with Web ADF controls using a pure browser JavaScript 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 a map tip callout; add an ArcGIS Server cached resource dynamically.
  • MapDataGridHover.aspx - Enable hover/highlight capabilities on a data table associated with a graphics layer.
  • AddArgumentsToTool.aspx - Add custom argument\value content to a Web request generated by the map and process it on the server.
  • AddArgumentsToWebRequest.aspx - Illustrates a technique for modifying the content of a Web request when using a partial postback. Enables you to customize the argument\value content sent to the server.
  • MapResizeToWindow.aspx - Demonstrates how to 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.
  • Products:
    Server: C#, VB.NET

    Platforms: Windows

    Minimum ArcGIS Release: 9.3

    How to use:
    1. 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>\DeveloperKit\SamplesNet\Server\Web_Applications and unzip Common_CustomJavaScriptCSharp.zip or Common_CustomJavaScriptVBNet.zip to a location of your choice. You should see either a CSharp or VBNet folder appear where you unzipped the files.
      3. In Windows Explorer, open the directory referencing the language of your choice: CSharp or VBNet. Copy the folder, Common_CustomJavaScript_<language>, to c:\inetpub\wwwroot. The <language> variable may 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.
      6. Expand Default Web Site then right-click the Common_CustomJavaScript_<language> folder and click Properties.
      7. On the Directory tab, click the Create button in the Application Settings section of this panel. Click OK to dismiss the Properties dialog.
      8. Launch Microsoft Visual Studio. Open the solution for the version of the Visual Studio you are 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 located in the c:\inetpub\wwwroot\Common_CustomJavaScript_CSharp folder.
      9. In the Solution Explorer, right-click the page you would like to view and select 'Set As Start Page'.
      10. Open the same page in design view. Open the properties window for the MapResourceManager control. Click the ellipsis next to the ResourceItems property. The ResourceItem Collection Editor dialog should display.
      11. Add or change the MapResourceItem associated with a map service (ArcGIS Server, ArcIMS, ArcWeb, etc.). Some of the sample code assumes that the resource is in a geographic coordinate system.
      12. If necessary, set the runtime identity of the Web application:
        1. At design-time, the identity of the user running Visual Studio is used to connect to an ArcGIS Server local data source. At runtime, that identity is established by the Web application. Only one identity can be used to define access to all 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 which will be used to access ArcGIS Server local resources at runtime. This information will be added to the web.config file within a standard ASP.NET identity tag. If the "Encrypt identity in web.config" checkbox is checked, the identity tag will be encrypted, otherwise the username and password will be stored as clear text.
          -or-
        2. Open the web.config file and add an <identity> element within <system.web>. Set the impersonate attribute to "true". Add a userName and password attribute and set them to a valid user account. If working with ArcGIS Server Local data sources, make sure the account has access to the GIS Server resources referenced in the Map control.
      13. Save the project.
      14. Click the "Debug" drop-down menu and choose "Start".
    2. Run Time:
      1. Browse to viewer's URL (for example, http://localhost/Common_CustomJavaScript_CSharp).
      2. In the Default.aspx, click on the Zoom In button to zoom in on the map.
      3. Note that map coordinates are updated in the browser's status bar when the mouse cursor hovers over the map.
      4. Enter a value in the text box to display in a map tip. Pan the map to a location you want to place a graphic with a map tip callout. Press and hold the A key and click (left mouse button) on the map. Depending on which geometry type you have selected in the JavaScript code (point by default) you can input a graphic on the the map. When finished, hover over the graphic to see the map tip callout.
      5. Click on the Add Layer button to add an ArcGIS Server cached service dynamically. You will need to modify the code to point to a value cache location and define the appropriate parameters.
      6. In MapDataGridHover.aspx, three random points have been generated and rendered as Web ADF graphics on top of the USA_Data sample dataset. The graphics are rendered on the client so they can be interacted with using the Web ADF JavaScript Library. Hover over a row in the GridView and note the cooresponding feature in the map is highlighted. Click on the row in the GridView and the map will zoom 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 while the other is a client 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.

    Download the C# files
    Default.aspx Custom JavaScript is included in this page.
    Common_CustomJavaScript_CSharp/Default.aspx.cs The code behind the user interface. No custom JavaScript is contained in this page.
    MapDataGridHover.aspx Custom JavaScript is included in this page.
    Common_CustomJavaScript_CSharp/MapDataGridHover.aspx.cs The code behind the user interface. Adds custom client-side interaction to GridView.
    AddArgumentsToWebRequest.aspx Contains a button to initiate a partial postback. Also contains a set of elements to add to the Web request.
    Common_PartialPostback_CSharp/AddArgumentsToWebRequest.aspx.cs The code behind the user interface. Parses the custom Web request content.
    AddArgumentsToTool.aspx Custom JavaScript is included in this page. Uses the Map's onServerRequest event to modify the argument\value array.
    Common_CustomJavaScript_CSharp/AddArgumentsToTool.aspx.cs The code behind the user interface. No custom JavaScript is contained in this page.
    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 The code behind the user interface.
    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 The code behind the user interface.
    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 The code behind the user interface.
    Common_CustomJavaScript_CSharp/App_Code/CustomTools.cs Custom tool implementation showing how to retrieve custom arg\val content.
    Download the VB.NET files
    Default.aspx Custom JavaScript is included in this page.
    Common_CustomJavaScript_VBNet/Default.aspx.vb The code behind the user interface. No custom JavaScript is contained in this page.
    AddArgumentsToWebRequest.aspx Contains a button to initiate a partial postback. Also contains a set of elements to add to the Web request.
    Common_PartialPostback_VBNet/AddArgumentsToWebRequest.aspx.vb The code behind the user interface. Parses the custom Web request content.
    MapDataGridHover.aspx Custom JavaScript is included in this page.
    Common_CustomJavaScript_VBNet/MapDataGridHover.aspx.vb The code behind the user interface. Adds custom client-side interaction to GridView.
    AddArgumentsToTool.aspx Custom JavaScript is included in this page. Uses the Map's onServerRequest event to modify the argument\value array.
    Common_CustomJavaScript_VBNet/AddArgumentsToTool.aspx.vb The code behind the user interface. No custom JavaScript is contained in this page.
    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 The code behind the user interface.
    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 The code behind the user interface.
    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 The code behind the user interface.
    Common_CustomJavaScript_VBNet/App_Code/CustomTools.vb Custom tool implementation showing how to retrieve custom arg\val content.

    Download the files for all languages