<map>
      <!-- Your data here -->
 <styles>
   <definition>
      <style name='MyFirstFontStyle' type='font' face='Verdana' size='11' color='0372AB' bold='1' bgColor='FFFFFF' />
      <style name='MyFirstAnimationStyle' type='animation' param='_xScale' start='0' duration='1' />
      <style name='MySecondAnimationStyle' type='animation' param='_yScale' start='0' duration='1' />
      <style name='MyFirstShadow' type='Shadow'  />
   </definition>
   <application>
      <apply toObject='Labels' styles='MyFirstFontStyle,MyFirstShadow' />
      <apply toObject='Plot' styles='MyFirstAnimationStyle,MySecondAnimationStyle' />
   </application> 
</styles>
</map>

As you can see above, all the style related elements and attributes appear under the <styles> parent element. It should effectively contain all your style related XML code. FusionMaps XT will not recognize any style definition outside the <styles> parent element.

Children to <styles> element are <definition> and <application> elements. As the name suggests, <definition> element contains your custom styles definition for the map while under <application> element you apply your custom defined styles to different map objects.

Now, let's first get to the definition of styles.

Cruising back through the above XML code, you'll see that we've defined four custom styles namely:

• MyFirstFontStyle, which will later help us in setting font properties for text on the map.
• MyFirstAnimationStyle & MySecondAnimationStyle, which will help us in animating objects, and
• MyFirstShadow that can render a shadow effect on any map object.

Each style has to be defined using the <style> element. Multiple style elements may be placed one after another under <definition> element. So, if you wish to define five custom styles, you need to create five <style> elements.

Depending on the style type you are defining, each <style> element can have multiple attributes. In the above code example, each <style> element has its own set of properties. However, following two attributes are common to all:

1. name
2. type.

Both the attributes are mandatory for each style definition.

Name attribute lets you assign your custom name for the style definition. For example, in the above code, we have named the font style as MyFirstFontStyle, which could well have been JohnFirstStyle or GlobalFont or BigFont etc.

Format:

Example:

<style name='MyFirstFontStyle' type='font' face='Verdana' …/>
<style name='MyFirstAnimationStyle' type='animation' …/>
<style name='MyFirstShadow' type='Shadow' …/>

There are no restrictions on the style name, barring the pointers below:

• Style name can only include alphabets and numbers. Punctuation marks (including underscore) shouldn't be used.
• Style name must be unique, i.e., two style definitions cannot have the same name as there will be a conflict between the two.

Each style needs to be defined as to what type it is. The type defines what this style is going to do. FusionMaps XT supports six style types:

• Font
• Animation
• Shadow
• Glow
• Blur
• Bevel

Format:

Example:

<style name='MyFirstFontStyle' type='font' face='Verdana' …/>
<style name='MyFirstAnimationStyle' type='animation' …/>
<style name='MyFirstShadow' type='Shadow' …/>

If you do not define a style type for a particular style, FusionMaps XT will ignore the style definition and log an error in the Debug Window.

The rest of the attributes for a style element are dependent on its Type. For example, we can use face, size, color, bold etc. property for a FONT style type. However, the same is not valid for ANIMATION style type, as these parameters make no sense for an animation. Each style type has therefore its own set of attributes which you can specify which will be discussed next.

Now, if you're already eager to apply the styles to map objects, let's get to the application part of the story.

The following XML does the work of applying styles to different map objects:

<application>
    <apply toObject='Labels' styles='MyFirstFontStyle,MyFirstShadow' />
    <apply toObject='Plot' styles='MyFirstAnimationStyle,MySecondAnimationStyle' />
</application> 

Each <apply> element helps to apply multiple styles to one map object e.g., in our code, we first apply the MyFirstFontStyle and MyFirstShadow to all the Labels on the map. Next, we apply MyFirstAnimationStyle and MySecondAnimationStyle to the plot (map drawing). To apply multiple styles, we separate the names of the respective styles by a comma.

You need to make sure of few things here:

• To apply multiple styles to a map object, you need to separate the style names using comma.
  

  Example:

  <apply toObject='Labels' styles='MyFirstFontStyle,MyFirstShadow' />

• To apply a single style to multiple objects, you'll need to define <apply> element for each object and then assign the style for it.

  Example:

  <apply toObject='Labels' styles='MyFirstShadow' /> 
  <apply toObject='Legend' styles='MyFirstShadow' />

  
  You CANNOT separate the object list by comma and then assign a single style to it - the following will be INVALID:
  
  

  <apply toObject='Labels,Legend' styles='MyFirstShadow' />

  
  
• The style name specified during application has been defined earlier in style definition and the spelling is correct, else, FusionMaps XT will ignore it and log the error in Debug Window.

Note: In JavaScript maps, customized animation, shadow, glow, bevel and blur style types are not available. JavaScript maps provide limited support for customized Font style.