Developing Web Applications with the Web ADF - Web controls  

ScaleBar control

The ScaleBar control provides a simple scalebar for the map.  By default the scale bar is rendered on the client using dynamic HTML and JavaScript.  This provides a consistent view regardless of data sources used in the map and does not require an explicit server request to re-render.  Some properties, such as color, font, height and units of a scale bar can be modified via public properties.  If rendered on the server, the appearance of the scale bar is determined by the type of primary map resource in the Map buddied with the ScaleBar control.   ArcGIS Server and ArcIMS map services can generate scale bar images.  Differences in scale bar appearance based on the resource type are provided below:

scalebar examples
The scalebar may report incorrect scales if the map resource reports incorrect units. For example, if using an ArcIMS service, and the ArcXML definition file for the service contains no or incorrect map units, then the scale may be incorrect on the scalebar.

Assembly: ESRI.ArcGIS.ADF.Web.UI.WebControls.dll
Class: ESRI.ArcGIS.ADF.Web.UI.WebControls.ScaleBar

Using the ScaleBar control
  1. Add the controls to the page

    Open or create a Web site within Visual Studio.NET.   Open a Web form in design mode, select the Toolbox, and expand the ArcGIS Web Controls tab.  Drag and drop a MapResourceManager, a Map control, and a ScaleBar control onto the Web form.

    Add one or more resources to the MapResourceManager.  See the Add Resources section in the MapResourceManager control topic for information on how to do this. Also set the Map control's MapResourceManager property to Map1. See Map Control for information on setting this property. Your page should resemble the following in Visual Studio.NET:

    Visual Studio design form  
  2. Set ScaleBar control properties

    Select the ScaleBar control.  In the Properties page:
    1. Set the Map property to Map1, the map control added earlier. 
    2. Note the RenderOnClient property.  By default, RenderOnClient is true which indicates the scale bar is rendered on the client using HTML and JavaScript.  If set to false a scale bar image is generated by an ArcGIS Server or ArcIMS map service.  In most cases, this property should remain true.    
    3. Set the BarUnits property to the units desired for the scalebar. Options are: Feet, Kilometers, Meters, and Miles. 
    4. Set the Width property to the width desired for the scalebar (or, resize the control in the design page by clicking and dragging the edges). The width includes both the scalebar and the distance text.
    5. Additional properties can be configured to change the scalebar appearance. These include:
      • BarFont : font properties for the scalebar text
      • BackColor : background color of scalebar (default is transparent)
      • BarColor : color of the scalebar's bar
      • ForeColor : color of scalebar text
      • Height: height of the overall scalebar control, including bar, text and background




  The following table provides a list of properties of interest.  For complete reference information, see the ScaleBar control in the library reference section.

Property Name  Type Description
BackColor Color The background color of ScaleBar.
BarColor Color The bar color of the scale bar image.
BarFont  Font The font used in the display of the scalebar text labels.
BarHeight int The ScaleBar height in points (1/72 inch).
BarUnits ScaleBarUnits The units of the scale bar to report.
ForeColor Color The color of scalebar text.
Height Unit The height of the ScaleBar control.
Map string The Map Control to associate with this ScaleBar Control.
RenderOnClient bool Determines if the service associated with the primary map resource generates a scale bar image (false) or if dynamic html and JavaScript are used to render the scale bar on the client (true). 
RequestMimeData bool  Gets or sets a value indicating whether MIME data for the image should be requested.
Width Unit The Width of the ScaleBar control.



    1. From the Visual Studio menu, choose Layout --> Position --> Auto-position Options.
    2. In the Options dialog under the HTML Designer category, choose CSS Positioning.
    3. Check the box near the top to enable the option for changing position when dragging and dropping controls. Then select the 'Absolutely Positioned' option from the drop down. Click OK to dismiss the dialog.
    4. Now you can drag and drop new controls onto the page and move them to a position on the page.

Be aware the changing the above option will affect all subsequent pages created in Visual Studio. To disable absolute positioning, use the above dialog to uncheck the option to absolutely position controls.