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 enter the scale in a text box.
The control is buddied to Map control and can be placed on the form or hooked to the toolbar.

Using the control

  1. Open Visual Studio to 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, 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 run-time. 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 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 will be displayed as shown below:

Hook to the toolbar

ZoomToScale control can be hooked to the toolbar by adding both the toolbar control and the ZoomToScale control in an HTML <table> tag as shown in the XML markup below.
[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>
Save and run the application. As seen in the following screen shot, the ZoomToScale control is 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