Font Style Type Parameters

You are viewing documentation for an older version. For current documentation - click here.

As you already know, using the font style type, you can control the visual properties of all the text on the map. The following properties are extended by the font type.

Detailed explanations with code samples follow:

Attribute	Brief Description	Sample or Valid values
font	Sets the font family for the text.	Verdana, Arial ..
size	Specifies the font size	10, 12 ..
Color	Sets the font color, should be hex color code without #	FF0000, FFFFDD
Bold	Flag indicating whether font should be bold or not	1 for Yes, 0 for No
Italic	Flag indicating whether font should be italics or not	1 for Yes, 0 for No
Underline	Flag indicating whether font should be underlined	1 for Yes, 0 for No
bgColor	Sets the background color for a text box, should be hex color code without #	FF0000, FFFFDD
borderColor	If you need a border around your text, you can use this parameter
isHTML	Helps you set whether the text should be rendered as HTML or plain text.
leftMargin	The left margin of the text, in points
letterSpacing	The amount of space that is uniformly distributed between characters of the text

Note: In JavaScript maps, only font, color, size, bold and italic attributes are supported. Support for rest of the attributes is browser specific.

The basic attributes of the font are its font family, size and color which can be set using the aforementioned attributes.

Example:

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' />

Attribute	Format	Example
Font	font='fontfamily'	font='Verdana'
Size	size='fontsize'	size='12'
Color	color='HexCode (without #)'	color='FF0000'

Here, font should refer to a font family which is present on the end users system (else the default system font will be used to draw text). Color should be in Hex code without any #.

Text align setting is only allowed in map's caption and sub-caption Objects. You can use either "right" or "left" as alignment value. By default, the value is "center". An example can be:

<style name='MyCaptionFontStyle' type='font' font='Verdana' size='22' align ="left" />

And the resultant map caption will be like the image as under:

Note: Controlling alignment of caption and sub-caption is not supported in JavaScript maps.

To decorate your text, you can use any of the above parameters as under:

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bold='1' italic='1' underline='1' />

Attribute	Format	Example
Bold	bold='Logicalvalue'	bold='1' or bold='0'
Italic	italic='Logicalvalue'	italic='1' italic='0'
Underline	underline='Logicalvalue'	underline='1' or underline='0'

The above code will make sure that your font appears as bold, italicized and underlined.

If you intend to put a border color or a background color for your text boxes on the map, you can use the above two parameter to define hex color code (without #) as under:

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bgColor='FFFFDD' borderColor='666666' />

Attribute	Format	Example
bgColor	bgColor='value'	bgColor='FFFFDD'
borderColor	borderColor='value '	borderColor='666666'

This style when applied to a text field on map (e.g., caption), will give an output as under:

This attribute is particularly useful, when you have HTML characters as a part of your text e.g., "< 5" or "> 5" etc. By default, FusionMaps XT renders all text as HTML and as such "< 5" will be treated as a non-closing HTML tag and will not be displayed at all.

For example, if you've to display "< 5" for a color range value, you will use:

<color displayValue='&lt; 5' ... />

(Note that < is the encoded form of <, which is used in XML data documents).

The style is to be defined as under:

<style name='LegendFont' type='font' font='Arial' size='10' isHTML='0' />

And, applied as under:

<apply toObject='Legend' styles='LegendFont' />

Attribute	Format	Example
isHTML	isHTML ='Logicalvalue'	isHTML ='1' or isHTML ='0'

leftMargin lets you set the left margin of the text (in points) and letterSpacing allows you to control the space that is uniformly distributed between characters - the value specifies the number of pixels that are added to the space after each character. A negative value condenses the space between characters.

Example

<style name='MyFirstFontStyle' type='font' font='Verdana' size='12' color='FF0000' bgColor='FFFFDD' borderColor='666666' leftMargin='10' letterSpacing='3'/>

Attribute	Format	Example
leftMargin	leftMargin='value in pixels'	leftMargin='10'
letterSpacing	letterSpacing='value in pixels'	letterSpacing='3'