Customizing the Web Mapping Application

Opening a WMA in an IDE

1. Open Visual Studio.
2. Open your WMA. Click File, click Open, and click Web site.
3. In the left panel, click Local IIS if it is not already selected.
4. Select your application from the list and click Open.
5. After the application opens, double-click Default.aspx in Solution Explorer located in the upper right of the IDE. Default.aspx is the main Web page that shows the layout of the application either graphically or in HTML. By default, the page opens in Source view, which shows the HTML source.
6. In the lower left area of the IDE, click the Design tab to switch to Design view.

Accessing Web control properties

• Right-click the Web control on the Design view page.
• Click the drop-down arrow on the Properties window and select the Web control. See the following screen shot:
  
  

Working with the WMA file structure

• App_Code—Standard ASP.NET folder for code modules used in the application. Contains Native64BitSupport.vb or Native64BitSupport.cs, which cab be used if running application in a 64-bit application pool.
• App_Themes—Standard ASP.NET folder for application theme files, such as style sheets, skin files, and images. For more information, see the Using themes and style sheets section.
• Help—Folder containing the Help files for the WMA. These are plain HTML files that can be customized for your application.
• images—Folder containing images used by the WMA.
• JavaScript—Folder containing two javascript library files used by the WMA , namely display_measure.js and WebMapApp.js.
• ApplicationClosed.aspx—This page displays if the Close link is clicked when the Web application is using a non-pooled ArcGIS Server data source. This allows the application to release resources used on the geographic information system (GIS) server as soon as you're finished with them.
• Default.aspx—The main Web page includes the map, associated controls, and content.
• ErrorPage.aspx—This page is shown if the Web application encounters an unhandled error.
• Global.asax—Contains code that runs when the application and session start and end.
• Login.aspx—Used only when the application requires a login using a form (Forms authentication). If the application was created and security applied in Manager, this page is displayed when you open the application. If the application was created in Visual Studio or otherwise is not visible to Manager, security can be configured with other tools, such as the Web Site Administration Tool, available from the Visual Studio menu at ASP.NET Web Site Configuration.
• Measure.ascx—A custom user control used in Default.aspx as a tool for measuring distance and area on the map.
• PasswordRecoveryMail.txt—Contains the text to use when sending the user an e-mail to recover a lost password. Only used if the form-based login is active (see Login.aspx) and a mail server is defined in the Web.config file. For more information, see security topics in the Server Help.
• ReadMe.txt—Contains brief instructions on setting up a WMA in Visual Studio.
• Web.config—Standard ASP.NET configuration file that stores references to .NET assemblies used, identity when using an ArcGIS Server local data source, and other configuration settings.

Navigating Default.aspx (the mapping page)

• PageHeader Panel—Contains the title bar.
• LinkBar Panel—Contains the toolbar and menu-based hyperlinks.
• Page Content Panel—Contains Map and Control panels. The map is in a panel control called Map_Panel. The Control Panel is the area on the left that contains task and results panels, an overview map, and a table of contents. The Control Panel is contained in a table and nested in several DIV tags, the innermost being LeftPanelCellDiv. These DIV tags control the resizing and position of the Control Panel.

Working with Web controls on the mapping page

Selecting an overview map

• Add a service to the list of map resources in your IDE.
• Hide this map from view and from the table of contents.
• Associate the overview map with the map you added to the list of map resources.

1. Click the MapResourceManager control in Design view, or click the drop-down arrow on the Properties window and select MapResourceManager1.
2. Click the ResourceItems property, and click the ellipsis button. The MapResourceItem Collection Editor dialog box opens.
3. Click Add. A new resource is added.
4. On the right side of the MapResourceItem Collection Editor dialog box, click the Definition property, and click the ellipsis button. The Map Resource Definition Editor dialog box opens.
5. In the editor, select the type of service to add from the drop-down list.
6. Click the Data Source ellipsis button and add the required information for your data source.
7. Click the Resource ellipsis button, select a service from the drop-down list, and click OK.
8. Click OK to close the Map Resource Definition Editor dialog box.
9. On the right side of the MapResourceItem Collection Editor dialog box, click the Name property and type the name of your service.
10. Click the DisplaySettings property, and click the ellipsis button. The Map Resource Display Settings Editor dialog box opens.
11. Uncheck Visible, uncheck Display in the Table of Contents, and click OK to close the dialog box. See the following screen shot:
    
    Click OK to close the MapResourceItem Collection Editor dialog box.
12. Reference the new service in the overview map by clicking the OverviewMap control in the lower left of the Design area or by clicking the drop-down arrow on the Properties window and selecting OverviewMap1.
13. Click the OverviewMapResource property and select the service from the drop-down list.
14. Save your changes.
15. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Changing Navigation control properties

1. Click the Navigation control in Design view, or click the drop-down arrow on the Properties window and select Navigation1.
2. Change the property values as appropriate. Common Navigation control properties are as follows:
• DisplayCharacter—The font and character index of a glyph
• ImageFormat—The output format for the image
• Size—The size of the image in points
• Speed—The higher the value, the faster the map moves
3. Save your changes.
4. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Changing Toc control properties

1. Click the Toc control in Design view, or click the drop-down arrow on the Properties window and select Toc1.
2. Change the property values as appropriate. Common Toc control properties are as follows:
• ExpandDepth—A value of 2 means the TOC will expand to the second level by default. This expansion is enough to see the swatches.
• Font—The font used for specifying layer names
• ForeColor—The font color
• ShowLayerCheckBoxes—Allows users to turn layers on and off
• ShowResourceCheckBoxes—Allows users to turn services on and off
• TocType—Allows to choose to display legend with swatches(Layer symbol) or only layer names.
3. Save your changes.
4. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Changing ScaleBar control properties

1. Click the ScaleBar control in Design view, or click the drop-down arrow on the Properties window and select ScaleBar1.
2. Change the property values as appropriate. Common ScaleBar control properties are as follows:
• BarColor—The scale bar color
• BarFont—The font used for scale bar text
• BarHeight—Height of the scale bar
• BarUnits—Scale bar units, such as miles or kilometers
• ForeColor—The font color
• Width—Length of the scale bar
3. Save your changes.
4. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Adding a copyright statement

1. Click the MapCopyrightText control in Design view, or click the drop-down arrow on the Properties window and select MapCopyrightText1.
2. Change the "Text" property to display the copyright text. Other properties may be changed as required.
3. Save your changes.
4. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Adding a north arrow

1. Click the Source tab to access the HTML page. The Source tab is shown in the following partial screen shot:
   
   
2. Search for "Map_Panel". You'll find the following lines of HTML code:

<div id="Map_Panel" style="...">
  <esri:Map ID="Map1" runat="server" ...>
  </esri:Map>
</div>

<div style="position:absolute; bottom:25px; left:20px;z-index:98; font-family:ESRI North;
font-size:36pt;color:Black;">
&#176
</div>

Character	Symbol
Capital letter I or &#68
&#176 (No keyboard equivalent in English)

4. Save your changes.
5. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Using themes and style sheets

• Default.skin—Defines display properties for some of the server-side controls, such as task floating panel, and magnifier
• MapViewerStyleSheet.css—Contains styles for many of the surrounding elements, such as the title bar area
• Images—Used by skins and styles for background images

<span
  id="MapViewer_TitleTextShadowLabel"
  style="color:White;font-family:Verdana;font-size:12pt;font-weight:bold;position:
absolute; left: 5px; top: 5px;">
  Web Mapping Application
</span>

Modifying an existing theme

1. In Solution Explorer, double-click Web.config to open the file.
2. Scroll until you come to the theme reference. The name of the theme reflects the directory your application is currently referencing. See the following code:

<pages theme="Blue_Bridge"/>

3. Double-click Default.skin or MapViewerStyleSheet.css to open the files. Make changes to fonts, colors, and other formatting attributes as appropriate.
4. Save your changes.
5. Click the Default.aspx tab to make Default.aspx the active page. See the following partial screen shot:
   
   
6. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Adding a theme

1. Add a theme directory under App_Themes.
1. In Solution Explorer, right-click App_Themes, and select Add ASP.NET folder.
2. Add and rename the folder.
3. Right-click the new folder, and select Add Existing Item.
4. Navigate to the location of the theme folder you want to use and copy the .css and .skin files you want to use.
5. If necessary, repeat steps a–d to add subfolders, such as one for images.

2. Make changes to the files as needed.
3. In Solution Explorer, double-click Web.config to open the file.
4. Scroll until you come to the theme reference. Change the theme reference to the new folder name as shown in the following code:

<pages theme="mytheme"/>

5. Save your changes.
6. Click the Default.aspx tab to make Default.aspx the active page.
7. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Referencing a theme's style sheet

1. Click the control in Design view, or click the drop-down arrow on the Properties window and select the control.
2. Check if the control has a CssClass property. If this property is populated, the control is referencing MapViewerStyleSheet.css. To reference the style sheet if this property is not populated, set the value for CssClass to one of the classes in MapViewerStyleSheet.css. For example, set the CssClass value for MapViewer_TitleTextShadowLabel to MapViewer_TitleBarStyle.
3. Click the Source tab.
4. If the cursor is not already at the control you want to change, search for the control.
5. Remove any font, color, or other formatting attributes that are included in the style sheet. For example, for MapViewer_TitleTextShadowLabel, remove all the font attributes since they are already included in the MapViewer_TitleBarStyle class.

<asp:Label ID="MapViewer_TitleTextShadowLabel" runat="server" Text="Web
Mapping Application" Font-Size="12pt" Font-Names="Verdana" ForeColor="White"
Font-Bold="True" style= "position: absolute; left: 5px; top:
5px;"CssClass="MapViewer_TitleBarStyle">
</asp:Label>

<asp:Label ID="MapViewer_TitleTextShadowLabel" runat="server" Text="Web
Mapping Application" style="position: absolute; left: 5px; top: 5px;"
CssClass="MapViewer_TitleBarStyle">
</asp:Label>

6. Save your changes.

Adding or modifying template themes

1. Create a theme or modify an existing theme in an application.
2. Copy the theme directory from your application to the Manager directory typically located in the following locations:

3. Close all browsers.

Adding and removing tools from the toolbar

• ZoomToScale—Zooms to selected/entered map scale.
• Zoom In—Zooms in to the area of the map that you click or drag a box around
• Zoom Out—Zooms out from the area of the map that you click or drag a box around
• Pan—Pans the map display in the direction you drag the mouse pointer
• Full Extent—Zooms to the full extent of the map
• Previous Extent—Takes the map to last/previous extent
• Forward Extent—Takes the map to next/forward extent
• Go to Location— Allows to enter a X Y coordinates and zooms to that location
• Identify—Lists the attributes of the feature you clicked
• Measure—Measures distance or area
• Magnify—Magnifies a section of the map

1. Click the toolbar control in Design view, or click the drop-down arrow on the Properties window in Visual Studio IDE and select the toolbar control.
2. Select ToolbarItems property and click on the ellipsis to show the ToolbarCollectionEditorForm as seen above.
3. Make the changes and hit OK to close the form.
4. To see your changes in a browser, click File, and click View in Browser on the drop-down menu.

Pass initialization parameters in the URL

1. Open Visual Studio 2008 and create a Web mapping Application using template.
2. Set up Map and MapResourceManager by adding a valid map resource item.
3. Double-click Default.aspx.cs in Solution Explorer.
4. Add a member variable to store the collection of name-value pairs passed to the Web application in the URL as shown in the following code:

public partial class _Default: System.Web.UI.Page
{

    private NameValueCollection queryvalues = null;

protected void Page_Init(object sender, EventArgs e)
{
    if (!IsCallback)
    {
        queryvalues = Request.QueryString;
    }
}

6. Add the Page_PreRender method with the following signature and code in the _Default class:

protected void Page_PreRender(object sender, EventArgs e)
{
    string[] values = queryvalues.GetValues("Extent");
    if ((values != null) && (values.Length > 0))
    {
        string[] extentparams = values[0].Split(',');
        ESRI.ArcGIS.ADF.Web.Geometry.Envelope env = new
            ESRI.ArcGIS.ADF.Web.Geometry.Envelope(Double.Parse(extentparams[0]),
            Double.Parse(extentparams[1]), Double.Parse(extentparams[2]),
            Double.Parse(extentparams[3]));
        Map1.Extent = env;
        Map1.Refresh();
    }
}

7. Run the application. In the browser, add the custom name-value pair to the Web Mapping Application URL and reload the page. The format is Extent=minx,miny,maxx,maxy. For example, Extent=-90,30,-70,50. Include a question mark (?) after the Web Mapping Application path to indicate that a set of name-values pairs is provided. The full URL appears as follows: http://localhost/SampleWebApp/default.aspx?Extent=-90,30,-70,50. See the following screen shot: