Customizing the Web Mapping Application

In this topic

• Opening a WMA in an IDE
• Accessing Web control properties
• Working with the WMA file structure
• Navigating Default.aspx (mapping page)
• Working with Web controls on the mapping page
• Selecting an overview map
• Changing Navigation control properties
• Changing Toc control properties
• Changing ScaleBar control properties
• Adding a copyright statement
• Adding a north arrow
• Using themes and style sheets
• Modifying an existing theme
• Adding a theme
• Referencing a theme's style sheet
• Adding or modifying template themes
• Adding and removing tools from the toolbar
• Pass initialization parameters in the URL

Opening a WMA in an IDE

1. Start Visual Studio.
2. Open your WMA. Click File, click Open, then click Web site.
3. In the left panel, click Local Internet Information Services (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 the Solution Explorer located in the upper right of the IDE. Default.aspx is the main Web page that shows the layout of the application 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

1. Right-click the Web control on the Design view page.
2. 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 following section in this topic, Using themes and style sheets.
• 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—Displays if the Close link is clicked when the Web application is using a non-pooled ArcGIS for Server data source. This allows the application to release resources used on the geographic information system (GIS) server as soon as you are finished with them.
• Default.aspx—Main Web page that includes the map, associated controls, and content.
• ErrorPage.aspx—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 shows 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. For more information, see ASP.NET Web Site Configuration on the Microsoft Developer Network (MSDN) Web site.
• Measure.ascx—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 the 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 for Server local data source, and other configuration settings.

Navigating Default.aspx (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 TOC. 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, then click the ellipsis button. The MapResourceItem Collection Editor dialog box appears.
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 appears.
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 appears.
11. Clear the Visible and Display in the Table of Contents check boxes, and click OK. See the following screen shot:
    
    
    
12. Click OK to close the MapResourceItem Collection Editor dialog box.
13. 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.
14. Click the OverviewMapResource property and select the service from the drop-down list.
15. Save your changes.
16. To see your changes in a Web 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—Font and character index of a glyph.
• ImageFormat—Output format for the image.
• Size—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 Web 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—Value of 2 means the TOC expands to the second level by default. This expansion is enough to see the swatches.
• Font—Used for specifying layer names.
• ForeColor—Color of the font.
• 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 Web 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—Scale bar color
• BarFont—Font used for scale bar text
• BarHeight—Height of the scale bar
• BarUnits—Scale bar units, such as miles or kilometers
• ForeColor—Font color
• Width—Scale bar length
3. Save your changes.
4. To see your changes in a Web 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 can be changed as required.
3. Save your changes.
4. To see your changes in a Web 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 screen shot:
   
   
   
2. Search for Map_Panel. See the following code example:

<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 Web 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 the 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 example:

<pages theme="Blue_Bridge"/>

3. Navigate to this directory in the Solution Explorer.
4. Double-click Default.skin or MapViewerStyleSheet.css to open the files. Make changes to fonts, colors, and other formatting attributes as appropriate.
5. Save your changes.
6. Click the Default.aspx tab to make Default.aspx the active page. See the following screen shot:
   
   
   
7. To see your changes in a Web 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 the 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 1, a–d to add subfolders, such as one for images.
6. Optionally, copy an existing directory to App_Themes.
2. Make changes to the files as needed.
3. In the 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 example:

<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 Web 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.
   
   See the following code example:

<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:
• C#—C:\Inetpub\wwwroot\ArcGIS\Manager\Modules\Applications\Templates\mv_cs\App_Themes
• For VB.NET—C:\Inetpub\wwwroot\ArcGIS\Manager\Modules\Applications\Templates\mv_vb\App_Themes
3. Close all browsers.
   
   The next time you open Manager or Web Manager, your new or updated theme is included in the drop-down list in the Page properties.

Adding and removing tools from the toolbar

• ZoomToScale—Zooms to selected and 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 the last or previous extent.
• Forward Extent—Takes the map to next/forward extent.
• Go to Location— Allows the entry of 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 the Visual Studio IDE and select the toolbar control.
2. Select ToolbarItems property and click the ellipsis to show the ToolbarCollectionEditorForm.
3. Make the changes and click OK to close the form.
4. To see your changes in a Web browser, click File, and click View in Browser on the drop-down menu.

Pass initialization parameters in the URL

1. Start Visual Studio and create a Web mapping application using the template.
2. Set up Map and MapResourceManager by adding a valid map resource item.
3. Double-click Default.aspx.cs in the 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 example:

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();
    }
}