Telogis.GeoBase.MapLayers.BalloonSkin

Arguments

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

  Properties

  Name	Type	Description
  bodyStyle	Object	The collection of CSS/JavaScript style properties to apply to the body element of the balloon, which will hold its content. All properties except 'position' are customizable. Defaults to {}. Properties Name Type Description backgroundColor String The background color of the balloon skin, for example "#ffffff" border String The width and color of the balloon skin border, for example "2px solid red" color String The color of the balloon skin, for example "#000000" fontFamily String The font family used by the balloon skin, for example "sans-serif" fontSize String The font size used by the balloon skin, for example "8px" fontWeight String The font weight used by the balloon skin, for example "bold" padding String The size of the padding around the balloon skin, for example "10px" textAlign String The balloon skin's horizontal text alignment, for example "center" verticalAlign String The balloon skin's vertical text alignment, for example "middle" width String The balloon skin's width, for example "200px"
  bottomLeftTagSrc	String	The image path (relative to MapLayers.BalloonSkin.config.folder) to load the balloon's tag image from when the balloon is bottom-left aligned. All tag images should be the same size. Defaults to 'tag-bottom-left.png'.
  bottomRightTagSrc	String	The image path (relative to MapLayers.BalloonSkin.config.folder) to load the balloon's tag image from when the balloon is bottom-right aligned. All tag images should be the same size. Defaults to 'tag-bottom-right.png'.
  folder	String	An optional folder path to prepend to each tag image URLs (saving repetitive directory specification). Defaults to ''.
  tagAnchorPoint	Point	The offset within the tag image for top-right alignment of the point that corresponds to the location on the map marked by the balloon. This is transformed appropriately for other alignments. The coordinates of this point are proportions of the tag image's width and height, relative to its top-left corner. Defaults to new Point (0.0, 1.0).
  tagOverlap	Number	The number of pixels by which the tag should overlap the bottom of the balloon's content area (hiding its border, if applicable). Defaults to 1.
  topLeftTagSrc	String	The image path (relative to MapLayers.BalloonSkin.config.folder) to load the balloon's tag image from when the balloon is top-left aligned. All tag images should be the same size. Defaults to 'tag-top-left.png'.
  topRightTagSrc	String	The image path (relative to MapLayers.BalloonSkin.config.folder) to load the balloon's tag image from when the balloon is top-right aligned. All tag images should be the same size. Defaults to 'tag-top-right.png'.

Applies each of the skin's body styles (specified at construction with the MapLayers.BalloonSkin.config.bodyStyle property) to a given DOM element. These will override any existing style information.

• elem (Element) - The DOM element to apply the skin's body style to.

Calls MapLayers.BalloonSkin.getTagAnchorPixels and converts the result to a pixel offset from the tag image's top-left corner.

• hAlign (Number) - The enumerated value specifying the horizontal positioning of the balloon for which the tag anchor point is being calculated.

• vAlign (Number) - The enumerated value specifying the vertical positioning of the balloon for which the tag anchor point is being calculated.

• horizontal (Boolean) - True if the balloon has horizontal alignment, false if it has vertical alignment

Point - The offset of the point in the tag image for the given alignment that should align to the balloon's target element. The coordinates of this point are pixel offsets relative to the image's top-left corner.

Transforms the tag anchor point -- specified at skin construction -- to be representative of the tag image at the given alignment (the original specification is for the top-right-aligned tag).

• hAlign (Number) - The enumerated value specifying the horizontal positioning of the balloon for which the tag anchor point is being calculated.

• vAlign (Number) - The enumerated value specifying the vertical positioning of the balloon for which the tag anchor point is being calculated.

• horizontal (Boolean) - True if the balloon has horizontal alignment, false if it has vertical alignment

Point - The offset of the point in the tag image for the given alignment that should align to the balloon's target element. The coordinates of this point are proportions of the tag image's width and height, relative to its top-left corner.

Finds the number of pixels by which the tag should overlap the content area of the balloon, hiding its border (if applicable).

var myBalloonSkin = new Telogis.GeoBase.MapLayers.BalloonSkin({
    tagOverlap: 1, // adjust the vertical position of the balloon tag (move bottom-left image and tag closer/further apart)
});

// Get the tag overlap
alert('Tag overlap is '+ myBalloonSkin.getTagOverlap()+' pixel(s)');
// 'Tag overlap is 1 pixel(s)'

Number - The pixel overlap of the top of the tag image over the bottom of the content element.

Finds the pixel dimensions of the tag image described by the skin. These are taken from the top-right tag image, and are assumed to be the same for all other alignments.

var myBalloonSkin = new Telogis.GeoBase.MapLayers.BalloonSkin({
    bodyStyle: { // specify the style of the balloon and its text
        backgroundColor: "#ffffff",
        border:          "1px solid black",
        color:           "#000000",
        fontFamily:      "sans-serif",
        fontSize:        "20px",
        fontWeight:      "normal",
        padding:         "10px",
        textAlign:       "center",
        verticalAlign:   "middle",
        width:           "150px"
    },
    folder: "images/skins/balloon/directedwhite" // specify the default images folder
});

alert('Tag size is '+ myBalloonSkin.getTagSize(true)+' pixels');
// 'Tag size is 8x8 pixels'
// Note that this is using the default images included in the 'directedwhite' folder
// of a standard SDK installation

• horizontal (Boolean) - True if the balloon has horizontal alignment, false if it has vertical alignment

Size - The width and height of the tag image.

Finds the appropriate tag image to use with a given balloon alignment.

var myBalloonSkin = new Telogis.GeoBase.MapLayers.BalloonSkin({
    // Set the image folder location
    folder: "myImageFolder/skins/balloon", // specify the default images folder
    // Specify a tag corner image
    bottomLeftTagSrc: 'myBottomLeftImage.png', // image used for bottom-left balloon tag corner (relative to 'folder')
});

var Balloon    = Telogis.GeoBase.MapLayers.Balloon;

// Call getTagSrc function for bottom-left tag image
alert('Tag source of the bottom-left tag image (horizontal alignment) is '+
    // Accepts 'ALIGN_LEFT', 'ALIGN_RIGHT', 'ALIGN_TOP', 'ALIGN_BOTTOM'
    myBalloonSkin.getTagSrc(Balloon.ALIGN_LEFT, Balloon.ALIGN_BOTTOM, true));
    // 'Tag source of the bottom-left tag image (horizontal alignment)
    // is myImageFolder/skins/balloon/myBottomLeftImage.png'

• hAlign (Number) - The enumerated value specifying the alignment of the balloon in the horizontal direction.

• vAlign (Number) - The enumerated value specifying the alignment of the balloon in the vertical direction.

• horizontal (Boolean) - True if the balloon has horizontal alignment, false if it has vertical alignment

String - The URL of the tag image file to be used with the specified balloon alignment.