ZoomToScale control

In this topic

About the ZoomToScale control

The ZoomToScale control uses the primary map resource to determine how it functions at runtime. If the primary map resource is a cached service, a user can select from a list of cache levels. If the primary map resource is dynamic, a user can add the scale in a text box. The control is buddied to a Map control and can be placed on the form or hooked to the toolbar.

Using the control

Do the following to use the control:
  1. Start Visual Studio and add supporting controls to the page. Set up a Web application with, at minimum, a MapResourceManager control and a Map control. Other controls can optionally be added, such as a Toc control and Toolbar control for zoom and pan functionality (you can also zoom and pan by using mouse and keyboard combinations).
  2. Drag a ZoomToScale control to add it on the page. Move the control to the position where you want it be displayed because it cannot be moved around at runtime. See the following screen shot that shows the page in Visual Studio in a table layout:

  1. In design mode, click the ZoomToScale control to set the properties. The Properties window appears showing the control's properties. The only property that must be set for the ZoomToScale control is the Map property. Click the Map drop-down arrow for the property's value, then choose the previously added Map control. See the following screen shot:

  1. Save and run the Web application. The ZoomToScale control displays as shown in the following screen shot:

Hooking to the toolbar

Do the following to hook the ZoomToScale control to the toolbar:
  1. Add the Toolbar control and the ZoomToScale control in an Hypertext Markup Language (HTML) <table> tag as shown in the following Extensible Markup Language (XML) code example:
[XML] 
<table id="tblToolBarCell" cellpadding="0" cellspacing="0" align="left">
  <tr>
    <td style="height: 28px; " align="left">
      <esri:ZoomToScale ID="ZoomToScale1" runat="server" Height="28px" Width="210px" Map="Map1"/>
    </td>
    <td style="height: 28px; ">
      <esri:Toolbar
        ID="Toolbar1"
        runat="server"
        Height="30px"
        Width="472px"
        BuddyControlType="Map"
        Group="Toolbar1_Group"
        ToolbarItemDefaultStyle-BackColor="White"
        ToolbarItemDefaultStyle-Font-Names="Arial"
        ToolbarItemDefaultStyle-Font-Size="Smaller"
        ToolbarItemDisabledStyle-BackColor="White"
        ToolbarItemDisabledStyle-Font-Names="Arial"
        ToolbarItemDisabledStyle-Font-Size="Smaller"
        ToolbarItemDisabledStyle-ForeColor="Gray"
        ToolbarItemHoverStyle-BackColor="White"
        ToolbarItemHoverStyle-Font-Bold="True"
        ToolbarItemHoverStyle-Font-Italic="True"
        ToolbarItemHoverStyle-Font-Names="Arial"
        ToolbarItemHoverStyle-Font-Size="Smaller"
        ToolbarItemSelectedStyle-BackColor="White"
        ToolbarItemSelectedStyle-Font-Bold="True"
        ToolbarItemSelectedStyle-Font-Names="Arial"
        ToolbarItemSelectedStyle-Font-Size="Smaller"
        ToolbarStyle="ImageOnly"
        WebResourceLocation="/aspnet_client/ESRI/WebADF/">
        <ToolbarItems>
          <esri:Tool
            ClientAction="DragRectangle"
            DefaultImage="esriZoomIn.gif"
            HoverImage="esriZoomInU.gif"
            JavaScriptFile=""
            Name="MapZoomIn"
            SelectedImage="esriZoomInD.gif"
            ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
            ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapZoomIn"
            Text="Zoom In"
            ToolTip="Zoom In"/>
          <esri:Tool
            ClientAction="DragRectangle"
            DefaultImage="esriZoomOut.gif"
            HoverImage="esriZoomOutU.gif"
            JavaScriptFile=""
            Name="MapZoomOut"
            SelectedImage="esriZoomOutD.gif"
            ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
            ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapZoomOut"
            Text="Zoom Out"
            ToolTip="Zoom Out"/>
          <esri:Tool
            ClientAction="DragImage"
            DefaultImage="esriPan.gif"
            HoverImage="esriPanU.gif"
            JavaScriptFile=""
            Name="MapPan"
            SelectedImage="esriPanD.gif"
            ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
            ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapPan"
            Text="Pan"
            ToolTip="Pan"/>
          <esri:Command
            ClientAction=""
            DefaultImage="esriFullExt.gif"
            HoverImage="esriFullExtU.gif"
            JavaScriptFile=""
            Name="MapFullExtent"
            SelectedImage="esriFullExtD.gif"
            ServerActionAssembly="ESRI.ArcGIS.ADF.Web.UI.WebControls"
            ServerActionClass="ESRI.ArcGIS.ADF.Web.UI.WebControls.Tools.MapFullExtent"
            Text="Full Extent"
            ToolTip="Full Extent"/>
          <esri:Command
            BuddyItem="MapForward"
            ClientAction="ToolbarMapBack"
            DefaultImage="esriBack.gif"
            Disabled="True"
            DisabledImage="esriBack.gif"
            HoverImage="esriBackU.gif"
            JavaScriptFile=""
            Name="MapBack"
            SelectedImage="esriBackD.gif"
            Text="Back"
            ToolTip="Map Back Extent"/>
          <esri:Command
            BuddyItem="MapBack"
            ClientAction="ToolbarMapForward"
            DefaultImage="esriForward.gif"
            Disabled="True"
            DisabledImage="esriForward.gif"
            HoverImage="esriForwardU.gif"
            JavaScriptFile=""
            Name="MapForward"
            SelectedImage="esriForwardD.gif"
            Text="Forward"
            ToolTip="Map Forward Extent"/>
        </ToolbarItems>
        <BuddyControls>
          <esri:BuddyControl Name="Map1"/>
        </BuddyControls>
      </esri:Toolbar>
    </td>
  </tr>
</table>
  1. Save and run the application. The following screen shot shows the ZoomToScale control hooked up with the Toolbar control:


See Also:

Web controls



To use the code in this topic, reference the following assemblies in your Visual Studio project. In the code files, you will need using (C#) or Imports (VB .NET) directives for the corresponding namespaces (given in parenthesis below if different from the assembly name):
  • ESRI.ArcGIS.ADF.Web.UI.WebControls.dll