MAP Web Author CSS Reference

Visual aspects of the widgets that appear in the MAPublisher Web Author viewer can be configured using CSS.

The CSS implementation is based on the Adobe Flex 3 CSS system. Only class selectors are supported. The following is a list of classes available for styling and their supported properties.

Selectors

PanRightButton, PanLeftButton, PanUpButton, PanDownButton, ZoomInButton, ZoomOutButton

Use these classes to style the various buttons that appear in the viewer.

	.PanUpButton
	{
	    top: 50;
	    right: 37;
	    width: 27;
	    height: 27;
	    cornerRadius: 13;

	    fillAlphas: 0.6, 0.3; /* these makes the button "see through" */
	    fillColors: #FF0000, #00FF00;
	    image: null; /* setting to null disables the image */

	    borderColor: #00FF00;
	    themeColor: #FF0000; 
	}
	

Supported properties: alpha, borderColor, bottom, color, cornerRadius, fillAlphas, fillColors, height, image, left, right, themeColor, top, visible, width

ZoomSlider

Use this class to style the zoom slider widget.

	.ZoomSlider
	{
	    top: 170;
	    right: 43;
	    height: 175;

	    borderColor: #00FF00;

	    fillAlphas: 0.6, 0.3; /* these affect colors of the knob on the slider */
	    fillColors: #FF0000, #00FF00;
	    trackColors: #FF0000, #0000FF; /* sets colors on the slider track */
	}
	

Supported properties: alpha, borderColor, bottom, fillAlphas, fillColors, height, left, right, themeColor, top, trackColors, visible, width

ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight

Use these classes to style the highlights that appear on features when they are hovered over or clicked.

	.ClickHighlight
	{
	    alpha: 0.5;
	    fillAlpha: 0.5;
	    fillColor: #FFFFFF;
	    lineColor: #FF0000;
	    lineThickness: 2;
	}
	

Supported properties: alpha, fillAlpha, fillColor, lineColor, lineThickness, visible

SearchBox

Use this class to style the search box.

	.SearchBox
	{
	    alpha: 0.9;

	    top: 10;
	    left: 10;
	    width: 300;

	    backgroundAlpha: 0.5;
	    backgroundColor: #00FF00;

	    borderColor: #FF0000;
	    borderStyle: solid; 
	    borderThickness: 0; /* only works when borderStyle is "solid" */
	    borderSides: "top left"; 

	    cornerRadius: 10;

	    paddingLeft: 5;
	    paddingTop: 3;
	    paddingRight: 0;
	    paddingBottom: 0;

	    focusThickness: 5; 

	    fontFamily: Times; /* setting this will affect the load time */
	    fontSize: 14; 
	    fontStyle: italic; 
	    fontWeight: bold; 
	    textDecoration: underline; 

	    dropShadowEnabled: true;
	    dropShadowColor: #0000FF;
	    shadowDistance: 15;
	    shadowDirection: right; 

	    prompt: "SEARCH HERE"; 
	}   
	

Supported properties: alpha, backgroundAlpha, backgroundColor, borderColor, borderSides, borderStyle, borderThickness, bottom, color, cornerRadius, dropShadowColor, dropShadowEnabled, focusThickness, fontFamily, fontSize, fontStyle, fontWeight, height, left, paddingBottom, paddingLeft, paddingRight, paddingTop, prompt, right, shadowDirection, shadowDistance, textDecoration, themeColor, top, visible, width

LayerList

Use this class to style the layer list.

	.LayerList
	{
	    top: 210;
	    left: 30;
	    width: 300;
	    height: 200;

	    backgroundAlpha: 0.3;
	    backgroundColor: #FF00FF;

	    borderStyle: inset;
	    borderThickness: 5; 
	    borderColor: #FFFFFF; 
	    borderSides: "bottom right";

	    fontFamily: Arial;
	    fontSize: 18;
	    fontStyle: italic;
	    fontWeight: bold;
	    textDecoration: underline;

	    dropShadowEnabled: true;
	    dropShadowColor: #0000FF;
	    shadowDistance: 15;
	    shadowDirection: right; 

	    visible: true;
	}   
	

Supported properties: alpha, backgroundAlpha, backgroundColor, borderColor, borderSides, borderStyle, borderThickness, bottom, color, cornerRadius, dropShadowColor, dropShadowEnabled, fontFamily, fontSize, fontStyle, fontWeight, height, left, paddingBottom, paddingLeft, paddingRight, paddingTop, right, shadowDirection, shadowDistance, textDecoration, themeColor, top, visible, width

StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

Use these classes to style callout bubbles that appear when a user hovers over or clicks a feature with web tag.

	.HoverCalloutBubble
	{
	    cornerRadius: 30;

	    showArrow: true;
	    arrowBaseDistFromEdge: 0;
	    arrowBaseWidth:5;
	    arrowTipX:10;
	    arrowTipY:50;

	    fontFamily: Arial; /* setting this will affect the load time */
	    fontSize: 18; 
	    fontStyle: italic; 
	    fontWeight: bold;
	    textDecoration: underline; 

	    fillColors: #FF0000, #00FF00;
	    fillAlphas: 0.5, 0.5;

	    borderColor: #0000FF;
	    borderThickness: 1;

	    dropShadowEnabled: true;
	    dropShadowColor: #00FF00;
	    shadowDistance: 15;
	    shadowDirection: center;
	
		maxHeight: 250;
		maxWidth:250;

	}
	

Supported properties: alpha, arrowBaseDistFromEdge, arrowBaseWidth, arrowTipX, arrowTipY, borderColor, borderThickness, bottom, color, cornerRadius, drawBorder, drawBubble, drawSeparator, dropShadowColor, dropShadowEnabled, fillAlphas, fillColors, fontFamily, fontSize, fontStyle, fontWeight, height, left, maxHeight, maxWidth, right, separatorColor, separatorThickness, shadowDirection, shadowDistance, showArrow, textDecoration, themeColor, top, visible, width

OverviewMap

Use this class to style the overview.

	.OverviewMap
	{
	    top: 75;
	    left: 380;

	    proportion: 0.15; /* 15% of the viewer size */

	    backgroundAlpha: 0.3;
	    backgroundColor: #FF00FF;

	    borderStyle: solid; 
	    borderThickness: 5;
	    borderColor: #FFFFFF; 
	    borderSides: "bottom right";

	    dropShadowEnabled: true;
	    dropShadowColor: #0000FF;
	    shadowDistance: 15;
	    shadowDirection: right; 

	    cornerRadius:10; 

	    paddingLeft: 3; 
	    paddingRight: 3; 
	    paddingTop: 3; 
	    paddingBottom: 3; 

	    maskColor: #0000FF;
	    maskAlpha: 0.9;
	
		image: custom_background.png;
	}
	

Supported properties: alpha, backgroundAlpha, backgroundColor, borderColor, borderSides, borderStyle, borderThickness, bottom, cornerRadius, dropShadowColor, dropShadowEnabled, height, image, left, maskAlpha, maskColor, paddingBottom, paddingLeft, paddingRight, paddingTop, proportion, right, shadowDirection, shadowDistance, themeColor, top, visible, width

Properties

These properties apply to the selectors.

alpha

Controls the transparency of a widget. Set to numeric values from 0 through 1.

	alpha: 0.5; /* sets the widget to 50% translucent */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight, SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

arrowBaseDistFromEdge

The horizontal distance, in pixels, of the start of the base of the arrow from the edge of the bubble on callouts.

	arrowBaseDistFromEdge: 5; /* start arrow 5 pixels from the edge */
	

Applies to: ClickCalloutBubble, HoverCalloutBubble

arrowBaseWidth

The width, in pixels, of the base of the arrow on callouts.

	arrowBaseWidth: 10; /* set the base of the arrow to 10 pixels wide */
	

Applies to: ClickCalloutBubble, HoverCalloutBubble

arrowTipX

The horizontal distance, in pixels, of the tip of the arrow from the edge of the bubble on callouts.

	arrowTipX: 3; /* set the tip of the arrow to 3 pixels from the edge */
	

Applies to: ClickCalloutBubble, HoverCalloutBubble

arrowTipY

The vertical distance, in pixels, of the tip of the arrow from the edge of the bubble on callouts.

	arrowTipY: 12; /* the arrow will be 12 pixels high */
	

Applies to: ClickCalloutBubble, HoverCalloutBubble

backgroundAlpha

Controls the transparency of the background of a widget. Set to numeric values from 0 through 1.

	backgroundAlpha: 0.75; /* sets the widget's background to 75% translucency */
	

Applies to: SearchBox, LayerList, OverviewMap

backgroundColor

Controls the color of the background of a widget.

	backgroundColor: #0000FF; /* sets the widget's background to blue */
	

Applies to: SearchBox, LayerList, OverviewMap

borderColor

Controls the color of the border of a widget.

	borderColor: #FFFFFF; /* sets the widget's border to white */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

borderSides

Determines which edges of a widget that a border will be drawn for. Set to a string consisting of any combination of "top", "left", "bottom" or "right".

	borderSides: "top bottom"; /* only draw the top and bottom border */
	

Applies to: SearchBox, LayerList, OverviewMap

borderStyle

Determines the style of border to be drawn for a widget. Set to one of none, solid, inset, or outset.

	borderStyle: none; /* no border will be drawn */
	

Applies to: SearchBox, LayerList, OverviewMap

borderThickness

Determines the width, in pixels, of a widget's border.

	borderThickness: 3; /* a 3 pixel border */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

bottom

The vertical distance, in pixels, of the bottom of a widget from the bottom edge of the viewer window.

	bottom: 10; /* leave 10 pixels from bottom of the widget to window edge */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, OverviewMap

color

Controls the color of the foreground elements in a widget. For example, this property will set the color of the text in the search box widget.

	color: #00FF00; /* sets the widget color to green */
	

Applies to: ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

cornerRadius

Determines the rounding, in pixels, of the corners of a widget.

	cornerRadius: 10; /* rounding starts 10 pixels in from the corner */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

drawBorder

Determines whether a border is drawn around a widget.

	drawBorder: false; /* border will not be drawn */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

drawBubble

Determines whether the border, background and arrow will be drawn for a callout bubble.

	drawBubble: false; /* bubble will not be drawn */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

drawSeparator

Determines whether the separator between the title and content area in a callout bubble will be drawn.

	drawSeparator: false; /* separator will not be drawn */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

dropShadowColor

Controls the color of a widgets drop shadow.

	dropShadowColor: #000000; /* a black drop shadow */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

dropShadowEnabled

Controls whether a drop shadow will be drawn for a widget.

	dropShadowEnabled: true; /* a drop shadow will be drawn */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

fillAlpha

Controls the transparency of the fill of a highlight widget. Set to numeric values from 0 through 1.

	fillAlpha: 0.32; /* sets the highlight to 32% opaque */
	

Applies to: ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight

fillAlphas

Controls the transparency of the colors in a gradient fill of a widget. Set to two numeric values from 0 through 1.

	fillAlphas: 0.6, 0.3; /* fill opacity will grade from 60% to 30% */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

fillColor

Controls the color of the fill of a highlight widget.

	fillColor: #FFFFFF;  /* a white highlight */
	

Applies to: ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight

fillColors

Controls the colors in a gradient fill of a widget. Set to two color values with a comma in between.

	fillColors: #FF0000, #00FF00; /* a gradient from red to green */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

focusThickness

Sets the width, in pixels, of the highlight outline that appears around the search box when it has focus.

	focusThickness: 5; /* a 5 pixel focus outline */
	

Applies to: SearchBox

fontFamily

Sets the font to be used for text in a widget. Setting this property will cause the viewer to load more slowly.

	fontFamily: Times; /* use a times based font */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

Sets the size, in pixels, of the font to be used for text in a widget.

	fontSize: 14; /* a 14 pixel high font */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

fontStyle

Sets the style of the font to be used for text in a widget. Set to one of "normal" or "italic".

	fontStyle: italic; /* use italics */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

fontWeight

Sets the weight of the font to be used for text in a widget. Set to one of "normal" or "bold".

	fontWeight: bold; /* use a bold face */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

height

The height, in pixels, of a widget.

	height: 10; /* a 10 pixel high widget */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, OverviewMap

image

The URL of an image to display on a button widget. Set to null to display no image in the button. In the case of the OverviewMap the image defines a customized background to display in place of the scaled live map view.

	image: interface/btn_right.png;
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton OverviewMap

left

The horizontal distance, in pixels, of the left side of a widget from the left side of the viewer.

	left: 100; /* 100 pixels from the left of the viewer */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, OverviewMap

lineColor

Controls the color of the outline of a highlight widget.

	lineColor: #FF0000;  /* a red highlight */
	

Applies to: ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight

lineThickness

Controls the width, in pixels, of the outline of a highlight widget.

	lineThickness: 4;  /* a 4 pixel wide highlight */
	

Applies to: ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight

maskAlpha

Sets the transparency of the shading displayed over the non-visible area in the Overview widget. Set to numeric values from 0 through 1.

	maskAlpha: 0.9; /* 90% opaque */
	

Applies to: OverviewMap

maskColor

Sets the color of the shading displayed over the non-visible area in the Overview widget.

	maskColor: #0000FF; /* a blue mask */
	

Applies to: OverviewMap

maxHeight

Sets the maximum height that a callout widget can expand to if it is set to autosize.

	maxHeight: 250; /* at most 250 pixels tall */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

maxWidth

Sets the maximum width that a callout widget can expand to if it is set to autosize.

	maxWidth: 250; /* at most 250 pixels wide */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

modalTransparency

Sets the transparency of the background shading that appears behind the ClickCalloutBubble when it's opened in light box mode.

	modalTransparency: 0.2; /* 20% alpha for background shading */
	

Applies to: ClickCalloutBubble,

modalTransparencyBlur

Sets the amount of blurring of the background that appears behind the ClickCalloutBubble when it's opened in light box mode.

	modalTransparencyBlur: 10; 
	

Applies to: ClickCalloutBubble,

modalTransparencyColor

Sets the color of the background that appears behind the ClickCalloutBubble when it's opened in light box mode.

	modalTransparencyColor: #FF0000; /* a red background */ 
	

Applies to: ClickCalloutBubble,

modalTransparencyDuration

Controls the time it takes for the animation that displays the ClickCalloutBubble to run when it's opened in light box mode.

	modalTransparencyDuration: 1000; /* 1000 milliseconds */ 
	

Applies to: ClickCalloutBubble,

paddingBottom

Controls the space, in pixels, between the bottom edge of a widget and it's content.

	paddingBottom: 0; /* 0 pixels of space between content and edge */
	

Applies to: SearchBox, LayerList, OverviewMap

paddingLeft

Controls the space, in pixels, between the left edge of a widget and it's content.

	paddingLeft: 10; /* 10 pixels of space between content and edge */
	

Applies to: SearchBox, LayerList, OverviewMap

paddingRight

Controls the space, in pixels, between the right edge of a widget and it's content.

	paddingRight: 10; /* 10 pixels of space between content and edge */
	

Applies to: SearchBox, LayerList, OverviewMap

paddingTop

Controls the space, in pixels, between the top edge of a widget and it's content.

	paddingTop: 2; /* 2 pixels of space between content and edge */
	

Applies to: SearchBox, LayerList, OverviewMap

prompt

Set the text displayed in the search box when no search terms are entered.

	prompt: "TYPE SEARCH HERE"; /*prompt text used in the search box*/
	

Applies to: SearchBox

proportion

Sets the size of the overview widget as a proportion of the viewer's size. Set to numeric values from 0 through 1.

	proportion: 0.15; /* overview will be 15% of the overall size of the viewer */
	

Applies to: OverviewMap

right

The horizontal distance, in pixels, of the right side of a widget from the right side of the viewer.

	right: 100; /* 100 pixels from the right of the viewer */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, OverviewMap

separatorColor

Determines the color of the separator between the title and content area in a callout bubble.

	separatorColor: #FFFF00; /* a yellow separator */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

separatorThickness

The width, in pixels, of the separator line between the title and content area in a callout bubble.

	separatorThickness: 5; /* a 5 pixel wide separator line */
	

Applies to: StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

shadowDirection

Controls direction that a widget's drop shadow will be cast. Set to one of "left", "center" or "right".

	shadowDirection: left; /* shadow to the left */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

shadowDistance

Controls the distance, in pixels, that a widget's drop shadow will be cast.

	shadowDistance: 15; /* a 15 pixel shadow */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

showArrow

Controls whether the arrow will be drawn for a callout bubble.

	showArrow: false; /* hide the arrow */
	

Applies to: ClickCalloutBubble, HoverCalloutBubble

textDecoration

Sets the decoration to use for the text in a widget. Set to one of "normal" or "underline".

	textDecoration: underline; /* underlined text */
	

Applies to: SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble

themeColor

Sets the color used to highlight a widget when it is clicked or has focus.

	themeColor: #FFFF00; /* use a yellow theme */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, OverviewMap

top

The vertical distance, in pixels, of the top of a widget from the top of the viewer.

	top: 25; /* 25 pixels from the top of the viewer */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, OverviewMap

trackColors

Sets the colors used to draw the track for the zoom slider widget.

	trackColors: #FF0000, #0000FF; /* a red and blue track */
	

Applies to: ZoomSlider

visible

Controls the visibility of a widget.

	visible: false; /* do not show this widget in the viewer */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, ClickHighlight, HoverHighlight, SearchHighlight, UserHighlight, SearchBox, LayerList, StaticCalloutBubble, ClickCalloutBubble, HoverCalloutBubble, OverviewMap

width

The width, in pixels, of a widget.

	width: 100; /* a 100 pixel wide widget */
	

Applies to: PanRightButton, PanLeftButton, PanUpButton, PanDownButton, PanHomeButton, ZoomInButton, ZoomOutButton, ZoomSlider, SearchBox, LayerList, StaticCalloutBubble, OverviewMap