English

How To: Display a map at the proper reference scale using an ArcIMS client

Summary

In order to conceptualize the size of features and distances on a map, we must establish and indicate a consistent relationship between size on the map and size in real life. This relationship is the map's reference scale. For instance, a map may use one inch to represent what is actually 24,000 inches on earth. The reference scale is expressed as a mathematical ratio, or fraction where the unit on the map is expressed as the number one (numerator). A scale of 1:24,000 would be read as "one to twenty-four thousand." A value such as 24,000 inches cannot be easily visualized, therefore maps usually convert the ratio to another unit of measurement. For example, a 1:24,000 map can also be expressed as 1 inch = 2000 feet.

Concepts for defining a reference scale for a map are cross-application, namely they apply to all mapping applications. When working with an ArcIMS image service, the output map is generated as an image, thus reference scale concepts must be to applied to the contents of the map image. When displaying map images in an application, rendering the map image at the proper scale depends on three variables: the resolution of the image and the resolution and display area of the clients monitor, and the map extent. The image size and monitor resolution are measured in pixels while a monitor's display area and the map extent is expressed using a measurable unit like inches or meters. In general, on a computer screen, reference scale equals:

(map units / pixel) * (pixels / inch of display area) * (screen units / map unit)

The number of map units per image pixel (map units / pixel) is commonly referred to a the Map Scale Factor and can be easily calculated. For example:

(maximum x value for map extent - minimum x value for map extent) / width of map image in pixels

It is somewhat more difficult to determine how many pixels are rendered per inch of display area (pixels / inch of display area) since the monitor display size and resolution must be known - usually referred to as ppi (pixels per inch). Unfortunately, client-side scripting (i.e. JavaScript, VBScript) cannot retrieve a client's viewable display area in a measured unit, therefore we must prompt the user to provide this information. We can, however, return the screen resolution in pixels, which will be used to calculate the ppi.

The number of screen units in one map unit (screen units / map unit) is a constant value depending on which units are being used. In most applications, the screen is measured using inches while the map unit is in meters or feet. For example, there are 39.3701 inches in 1 meter.

See the following example to calculate the new extent of a map image given a specific reference scale and monitor display width:

Known Values----------

(User Provided) Reference Scale = 1:1000000
(User Provided) Monitor Display Width = 12 inches
Screen Width = 1024 pixels

Screen Units = inches
Map Units = meters

Map Image Size:
Width = 786 pixels
Height = 422 pixels

Initial Map Extent in meters:
Width: xmin = 187696.6978
xmax = 200594.4110
Height: ymin = 282314.4923
ymax = 289186.0772

------------------------

1) In order to determine a new map extent, the Map Scale Factor must be calculated using the following equation:

Map Scale Factor = Reference Scale / (ppi * constant)

where:
ppi = 1024 pixels / 12 inches = 85.3334 pixels per inch
constant = 39.3701 inches per meter

Therefore:
Map Scale Factor = 1000000 / (85.3334 * 39.3701) = 297.656 meters per pixel

2) The Map Scale Factor can be used to calculate the width and height (in map units) of the new map extent. Multiply the Map Scale Factor by the map image width and height to return the new map extent width and height:

Map Extent Width = 297.656 meters per pixel * 786 pixels = 213419.416 meters
Map Extent Height = 297.656 meters per pixel * 422 pixels = 113704.6261 meters

3) To calculate the new map extent, the difference between the initial and new map width and height must be determined. First the absolute width and height of the initial map image are calculated:

Initial Map Width = (xmin - xmax) = (187696.6978 - 200594.4110) = 12897.7132 meters
Initial Map Height = (ymin - ymax) = (282314.4923 - 289186.0772) = 6871.585 meters

then subtract the initial values from the new values to determine the absolute difference:

Map Width Difference = 213419.416 - 12897.7131 = 200521.7028 meters
Map Height Difference = 113704.6261 - 6871.585 = 106833.041 meters

4) To change the extent parameters to reflect this change, the absolute difference for both width and height must be divided by 2, then added to the initial maximum x and y values and subtracted from the initial minimum x and y values:

New xmin = 187696.6978 - (200521.7028 / 2) = 228897.9717
New xmax = 200594.4110 + (200521.7028 / 2) = 342602.5978
New ymin = 282314.4923 - (106833.041 / 2) = 87435.8464
New ymax = 289186.0772 + (106833.041 / 2) = 300855.2624

The new map extent envelope can be defined as needed.

The following sample integrates these calculations into an HTML Viewer. The user is prompted for two pieces of information: 1) the ratio (reference) scale at which the map image should be rendered and 2) the width of their monitor's viewable area. Note that the ArcIMS Java Custom Viewer already contains the reference scale in the IMSScaleBar applet.

Procedure

To start you will need:

1) One ArcIMS image service containing a single data set in a projected coordinate system
2) An HTML Viewer referencing this image service
3) The ratio.zip file included with this document

The ratio.zip file includes:

toolbar.htm
aimsClick.js
ratioForm.htm
aimsCustom.js

  1. In the HTML Viewer's root directory, open the ArcIMSParam.js file in a text editor. Add the following line at the top of the file:

    Code:
    var useRatioScale=true;


    Save and close the file.
  2. Copy the toolbar.htm file included with ratio.zip to the HTML Viewer's root directory. This file contains a reference to a custom button at the bottom of the toolbar. The custom button uses the wrench image.
  3. Copy the ratioForm.htm file included with ratio.zip to the HTML Viewer's root directory. This file contains the form elements used to prompt the user for a reference scale and screen width (in inches).
  4. Copy the aimsClick.js file included with ratio.zip to the HTML Viewer's javascript directory. This file calls the promptRatio() function in aimsCustom.js.
  5. Copy the aimsCustom.js file included with ratio.zip to the HTML Viewer's javascript directory. This file sets global variables, initializes the ratioForm.htm in the TextFrame, and adjusts the appropriate map extent parameters before retrieving a new map image.
  6. Open a browser and load the HTML Viewer
  7. Select the button with the wrench icon at the bottom of the toolbar.
  8. The TextFrame will be populated with a new form (ratioForm.htm). This form contains two text boxes for input: reference scale and screen display width. Note that while width is used in this example, either display width or height can be used.
  9. Measure (if needed) and type the display width (in inches) of the monitor. For a 15 inch monitor, the actual screen display width is approximately 12 inches. The field will accept decimal values.
  10. Type a reference scale. For example, type '63360' (without the quotes) and press Enter or the Set Display Scale button. Note that there are 63360 inches in one mile, therefore the new map image should render 1 inch on the screen = 1 mile (or 63360 inches) on the map image. Check the new map image for accuracy.

Related Information