Markers > XML Structure

As you've already seen in the previous example, the XML data document containing markers for the map looks as under:

<map animation='0' showLabels='0' showMarkerLabels='1' fillColor='F1f1f1' borderColor='CCCCCC' baseFont='Verdana' baseFontSize='11' baseFontColor='333333' markerBorderColor='333333' markerBgColor='CCCCFF' markerRadius='6' legendPosition='bottom' useHoverColor='0' showToolTip='0' showMarkerToolTip='1' >
   <data>
      <entity id='NA' />
      <entity id='SA' />
      <entity id='EU' />
      <entity id='AS' />
      <entity id='AF' />
      <entity id='AU' />
   </data>
   <markers>
      <definition>
         <marker id='HO' x='140.09' y='165.19' label='Head Office' />
         <marker id='PF' x='533.37' y='182.25' label='Production Center' />
         <marker id='SA' x='447.04' y='106.57' label='Sales' />
      </definition>
      <application>
         <marker id='HO' shapeId='circle' />
         <marker id='PF' shapeId='arc' />
         <marker id='SA' shapeId='triangle' />
      </application>
   </markers>
</map>

All data pertinent to markers are defined within the <markers> element under <map> element.

 
Attributes for <map> element pertinent to markers

You can define the following attributes for <map> element that will help you control the markers:
Attribute Name Type Range Description
markerFont String Font Name This attribute sets the font face for all the defined marker labels. You can over-ride this using STYLES.
markerFontSize Number 0-72 This attribute sets the font size for all the defined marker labels on the map. You can over-ride this using STYLES.
markerFontColor Color   This attribute sets the font color for all the defined marker labels on the map. You can over-ride this using STYLES.
showMarkerToolTip Boolean 0/1 Whether to show tool tips for the defined markers?
showMarkerLabels Boolean 0/1 You can opt to show/hide label for all the markers on the chart using this attribute.
markerLabelPadding Number Pixels This attribute lets you set a global label padding between the marker icon and its label. You can later over-ride the label padding for each individual marker too.
markerBgColor Color   This attribute lets you set a common background color for all the defined markers on the map. You can later over-ride individual marker colors by using SHAPE definitions.
markerBorderColor Color   This attribute lets you set a common border color for all the defined markers on the map. You can later over-ride individual marker border colors by using SHAPE definitions.
markerRadius Number Pixels This attribute lets you set a common radius for all the defined markers on the map. You can later over-ride individual marker border colors by using SHAPE definitions.
 
Marker Definition

To define a marker, you need to create <marker> element under <definition> element.

Note that just defining a marker does NOT show it on the map. Defining a marker is like creating a list of markers for the map, from which you can selectively choose and later show (in <application> element).

Each <marker> element under <definition> element can have the following attributes:

  • x - Relative X-position of the marker. This should be set by the visual GUI.
  • y - Relative Y-position of the marker. This should be set by the visual GUI.
  • id - Unique Id for the marker (alphanumeric). Each marker needs to be allotted a unique ID, by which it can be referenced in <application> element. ID of each marker can contain only alphabets and numbers. Special characters are not allowed.
  • label - Label that you want to display for the marker. This label will be shown along side the marker on the map (unless you've otherwise opted not to).
  • labelPos - Where the label for this marker should appear, w.r.t. marker position - left, right, center, top or bottom? You can later over-ride the label position for individual markers, while applying them.
 
Marker Application

To show a marker on the map, you need to place a <marker> element under <application> element and match the proper ID from marker definitions.

For example, in our office location demo, we first define the markers with unique IDs under <definition> element. Thereafter, we use the same ID from definition to apply markers. You need to make sure that in <application>, you use only those marker IDs, which have previously been defined in <definition>.

Each <marker> element under <application> element can have the following attributes:

  • id - ID that matches the marker application to its definition. If you specify an ID which has not been defined previously, you'll see an error in the debug window.
  • shapeId - Using this attribute, you can set the shape that this marker will assume on the map. FusionMaps offers 4 default shapes - circle, arc, triangle or diamond. You can also define your custom shapes and then refer to those (as explained in next section).
  • label - You can over-ride the labels for each marker during its application. This label will over-ride the label specified during definition.
  • labelPos - Like label, you can also over-ride the label position for each marker during its application.
  • toolText - If you need to provide custom tool text for a marker, you can do so using this attribute.
  • link - If you need your marker to link to other pages, when clicked, define the link here. The link can open in same window, new window, pop-up, frames or as JavaScript functions etc. Please see "Drill Down Maps" section for more information on link format.
  • scale - If you're using the same shape (shapeId) to represent multiple markers on the map, you can have them differ in size using this attribute. This attributes set the scaling of a particular marker. Valid values are floating numbers between 0 and 5.

To make your lives easier, we've created marker definitions for important cities in the most of the maps and provided them as XML to you. You can re-use the definitions from those XML files present in Download Package > MarkerXML folder.

That covers all the properties for the definition and application of markers, barring custom shapes. Let's see custom shapes next.