Click or drag to resize

Telogis.GeoBase.Widgets.ScaleSkin

Verizon Connect Logo
Print this page
Learn more about Verizon Connect GeoBase.
Get information about the latest release

Widgets.ScaleSkin inherits from Skin.

A simple class that combines all the information describing the appearance of a map-scale widget, and can be used to theme map-scales reasonably painlessly.

Constructor
NameDescription
Widgets.ScaleSkin(config)

Arguments

  • config (Object) - The configuration options for the scale skin.

    Properties
    NameTypeDescription
    barDepthNumber

    The pixel offset within the image at Widgets.ScaleSkin.config.bodySrc of the scale bar, perpendicular to the bar itself. This will be in the y-direction if the widget is horizontal, or in the x-direction if it is vertical.

    Defaults to 0.
    barEndNumber

    The pixel offset within the image at Widgets.ScaleSkin.config.bodySrc of the end point of the scale bar, parallel to the bar itself. This will be in the x-direction if the widget is horizontal, or in the y-direction if it is vertical.

    Defaults to 0.
    barStartNumber

    The pixel offset within the image at Widgets.ScaleSkin.config.bodySrc of the start point of the scale bar, parallel to the bar itself. This will be in the x-direction if the widget is horizontal, or in the y-direction if it is vertical.

    Defaults to 0.
    bodySrcString

    The URL of the image to use as the body / background of the scale widget, relative to Widgets.ScaleSkin.config.folder.

    Defaults to "body.png".
    folderString

    The base URL to load the scale skin's images from.

    Defaults to "".
    labelStyleObject

    the collection of CSS/JavaScript properties to apply to the text elements displaying both the units and magnification of the scale, before their individual styles (see Widgets.ScaleSkin.config.scaleLabelStyle and Widgets.ScaleSkin.config.unitLabelStyle) are applied. This should include (vertical) positioning information.

    Defaults to {}. Properties
    NameTypeDescription
    backgroundColorString

    The background color of the label, for example "#ffffff"

    borderString

    The width and color of the label border, for example "2px solid red"

    colorString

    The color of the label, for example "#000000"

    fontFamilyString

    The font family used by the label, for example "sans-serif"

    fontSizeString

    The font size used by the label, for example "8px"

    fontWeightString

    The font weight used by the label, for example "bold"

    paddingString

    The size of the padding around the label, for example "10px"

    textAlignString

    The label's horizontal text alignment, for example "center"

    verticalAlignString

    The label's vertical text alignment, for example "middle"

    widthString

    The label's width, for example "200px"

    layoutNumber

    The direction in which scales using this skin are to be laid out. May be either Widgets.ScaleSkin.HORIZONTAL or Widgets.ScaleSkin.VERTICAL.

    Defaults to Widgets.ScaleSkin.HORIZONTAL.
    markSrcString

    The URL of the image to use for each mark of the scale widget, relative to Widgets.ScaleSkin.config.folder.

    Defaults to "mark.png".
    scaleLabelStyleObject

    The collection of CSS/JavaScript properties to apply to the text element displaying the magnification of the scale. This should include (horizontal) positioning information. See also labelStyle.

    Defaults to {}.
    unitLabelStyleObject

    The collection of CSS/JavaScript properties to apply to the text element displaying the units of the scale. This should include (horizontal) positioning information. See also labelStyle.

    Defaults to {}.
Functions
NameDescription
applyScaleLabelStyle (Element label)

Applies the CSS properties for labels and then, more specifically, a scale-indicator label, to an element in the scale widget. These properties can be specified on construction with the Widgets.ScaleSkin.config.labelStyle and Widgets.ScaleSkin.config.scaleLabelStyle configuration properties.

Arguments
  • label (Element) - The label DOM element to style as a scale indicator.

applyUnitLabelStyle (Element label)

Applies the CSS properties for labels and then, more specifically, a unit-indicator label, to an element in the scale widget. These properties can be specified on construction with the Widgets.ScaleSkin.config.labelStyle and Widgets.ScaleSkin.config.unitLabelStyle configuration properties.

Arguments
  • label (Element) - The label DOM element to style as a unit indicator.

createMark (String id)

Creates an image element and and initializes it so that it can be used as a unit mark on the scale. This involves setting its 'src' attribute to the skin's mark image URL -- additional CSS tweaks are handled by the calling object.

Arguments
  • id (String) - The string to identify the created element by.

Returns

Element - The new mark element.

getBarEnd ()

Finds the point within the body image that signifies the end of the scale bar.

Returns

Point - The pixel offset in the body image of the second scale bar end-point.

getBarLength ()

Finds the pixel length of the bar displayed as part of the scale's background image.

Returns

Number - The length, in pixels, of the bar feature of the body image.

getBarStart ()

Finds the point within the body image that signifies the start of the scale bar.

Returns

Point - The pixel offset in the body image of the first scale bar end-point.

getSize ()

Finds the dimensions of the scale widget, which are determined by the size of the body image. Should only be called once the skin has loaded.

Returns

Size - The pixel width and height of scales that use this skin.

initBody (Element elem)

Sets up a given element to act as the body of the scale by sizing it appropriately and setting its background image to be the body image. Should only be called once the skin has loaded.

Arguments
  • elem (Element) - The body element to initialize.

placeMark (Element elem, Number pos)

Adjust the CSS positioning of a given mark element so that it is displayed a certain number of pixels along the length of the scale bar depicted on the scale's body image. Should only be called once the skin has loaded.

Arguments
  • elem (Element) - The mark element to place.

  • pos (Number) - The pixel offset along the scale bar to place Widgets.Scale.placeMark.elem at.

Properties
NameTypeDescription
HORIZONTALNumber

An enumerated value representing horizontal layout for a scale widget.

VERTICALNumber

An enumerated value representing vertical layout for a scale widget.