markerSettings

An object specifying options for the map markers.

Type: Object

A marker is a point on a map accompanied by text that helps you flag places on the map. For example, you can use markers to designate cities on the map. The appearance of the markers is specified by the options of the markerSettings configuration object. If these options are defined on the first level of the markerSettings object, they are applied to all the markers at once. However, you can specify several of these options for certain markers exclusively. See the customize option description to learn how.

Show Example:
jQuery

In this example, each marker is accompanied by a label that displays the name of the state's capital. This name is obtained from the 'name' attribute of the map's data source using the customize option. The font size of the labels is decreased so that the labels do not overlap each other. In addition, the capability to select/deselect a marker by a click is added using the callback function assigned to the click option. When a marker is selected, it is drawn in a color specified by the selectedColor option.


                                    

                                    

borderColor

Specifies a color for the marker border.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, the marker's border is colored in 'mistyrose' using the borderColor option.


                                    

                                    

borderWidth

Specifies the width of the marker border in pixels.

Type: Number
Default Value: 2

Show Example:
jQuery

In this example, the marker borders are increased in width up to 4 pixels using the borderWidth option.


                                    

                                    

click

Specifies the function that is called when a marker has been clicked.

Type: jQuery.Event
Event Handler Argument:
marker: Marker
The clicked marker.
jQueryEvent: jQuery.Event
The event object.

When implementing a callback function for this option, use the object that represents the marker that has been clicked. To access this object, use the function's first parameter or the this object. The accessible fields and methods of this object are documented in the Marker class description within the Map Elements reference section.

In addition, you can access the jQuery-event object using the function's second parameter.

Show Example:
jQuery

In this example, you can select/deselect a marker by a click. The function that performs the selection is assigned to the click option of the markerSettings configuration object.


                                    

                                    

color

Specifies a color for a marker of the dot or bubble type.

Type: String
Default Value: '#ba4d51'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, markers are colored in 'seagreen' using the color option.


                                    

                                    

customize

Specifies the function that customizes each marker individually.

Type: function(markerInfo)
Function parameters:
markerInfo: Object
Defines the marker to be customized. Contains fields listed in the markers property description.
Return Value: Marker configuration
A configuration object for the marker.

When implementing a function for this option, use the fields of the object that represent a marker from the data source specified by the markers option. To access this object, use the function's parameter or the this object.

The customize function should return the object that contains options to be changed for a certain area. These options are represented in the list below.

Show Example:
jQuery

In this example, the callback function assigned to the customize option is used to specify text for markers. Note that the 'Springfield' marker is selected when the widget loads, because for this marker the customize function returns a different object with the isSelected field set to true.


                                    

                                    

font

Specifies font options for the text that accompanies a marker.

Type: String
Default Value: '#ba4d51'

Show Example:
jQuery

In this example, several font options for markers are changed.


                                    

                                    

hoveredBorderColor

Specifies a color for the marker border when the marker is hovered over.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)

NOTE: Make sure that the hoverEnabled option is set to true, so that the hoveredBorderColor option takes effect.

Show Example:
jQuery

In this example, when a marker is hovered over, its border is colored in 'midnightblue' using the hoveredBorderColor option.


                                    

                                    

hoveredBorderWidth

Specifies the pixel-measured width of the marker border when the marker is hovered over.

Type: Number
Default Value: 2

Show Example:
jQuery

In this example, when a marker is hovered over, its border has a 4-pixel width.


                                    

                                    

hoveredColor

Specifies a color for a marker of the dot or bubble type when this marker is hovered over.

Type: String
Default Value: '#ba4d51'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)

NOTE: Make sure that the hoverEnabled option is set to true, so that the hoveredColor option takes effect.

Show Example:
jQuery

In this example, when a marker is hovered over, it is colored in 'royalblue' using the hoveredColor option.


                                    

                                    

hoverEnabled

Specifies whether or not to change the appearance of a marker when it is hovered over.

Type: Boolean
Default Value: true

If this option is set to true, you can specify colors for the hovered marker and its border using the hoveredColor and hoveredBorderColor options, respectively.

Show Example:
jQuery

Toggle the check box below to enable/disable the hover capability for markers. Hover over a marker to see the effect.


                                    

                                    

maxSize

Specifies the pixel-measured diameter of the marker that represents the biggest value. Setting this option makes sense only if you use markers of the bubble type.

Type: Number
Default Value: 50

When you use bubble markers on your map, their sizes depend on their values. The biggest value will be represented by the largest bubble. Similarly, the smallest value will be represented by the smallest bubble. Bubbles that represent values in between will have sizes proportional to the represented values. To specify the sizes of the largest and smallest bubbles, use the maxSize and minSize properties of the markerSettings object.

minSize

Specifies the pixel-measured diameter of the marker that represents the smallest value. Setting this option makes sense only if you use markers of the bubble type.

Type: Number
Default Value: 20

When you use bubble markers on your map, their sizes depend on their values. The biggest value will be represented by the largest bubble. Similarly, the smallest value will be represented by the smallest bubble. Bubbles that represent values in between will have sizes proportional to the represented values. To specify the sizes of the largest and smallest bubbles, use the maxSize and minSize properties of the markerSettings object.

opacity

Specifies the opacity of markers. Setting this option makes sense only if you use markers of the bubble type.

Type: Number
Default Value: 1

Show Example:
jQuery

In this example, markers of the bubble type are used. Their opacity is set to 0.6 using the opacity option.


                                    

                                    

palette

Specifies the name of a palette or a custom set of colors to be used for coloring markers of the pie type.

Type: Array|String
Default Value: 'default'
Accepted Values: 'Default' | 'Soft Pastel' | 'Harmony Light' | 'Pastel' | 'Bright' | 'Soft' | 'Ocean' | 'Vintage' | 'Violet'

If you define markers of the pie type on your map, use the palette option to colorize them. Assign a set of colors or the name of one of the predefined palettes to this option. The colors listed in the palette will be used to paint pie slices. If the number of slices is greater than the number of colors in a palette, the colors are repeated, but slightly modified.

Show Example:
jQuery

Use the drop-down menu below to choose which palette to use for coloring pie markers on the map.


                                    

                                    

selectedBorderColor

Specifies a color for the marker border when the marker is selected.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, you can select a marker by a click. The border of the selected marker is colored in 'gold' using the selectedBorderColor option.


                                    

                                    

selectedBorderWidth

Specifies the pixel-measured width of the marker border when the marker is selected.

Type: Number
Default Value: 2

Show Example:
jQuery

In this example, you can select a marker by a click. When a marker is selected, its border has a 4-pixel width.


                                    

                                    

selectedColor

Specifies a color for a marker of the dot or bubble type when this marker is selected.

Type: String
Default Value: '#ba4d51'

This option supports the following colors.

  • hexadecimal colors
  • RGB colors
  • RGBA colors (not supported in Internet Explorer 8)
  • predefined/cross-browser color names
  • predefined SVG colors (not supported in Internet Explorer 8)
Show Example:
jQuery

In this example, you can select a marker by a click. The selected marker is colored in 'royalblue' using the selectedColor option.


                                    

                                    

selectionChanged

Specifies the function that is called when the selection state of a marker has been changed.

Type: function(marker)
Function parameters:
marker: Marker
The marker that was selected or unselected.

When implementing a callback function for this option, use the object that represents the marker, which has been selected or deselected. To access this object, use the function's parameter or the this object. The accessible fields and methods of this object are documented in the Marker class description within the Map Elements reference section.

To identify whether a marker has been selected or deselected, call the selected() method of this area. Pass true or false to this method to select or deselect the area.

Show Example:
jQuery

In this example, you can select/deselect markers by a click. When the selection state of a marker changes, the corresponding message appears under the map.


                                    

                                    

selectionMode

Specifies whether a single or multiple markers can be selected on a vector map.

Type: String
Default Value: 'single'
Accepted Values: 'single' | 'multiple' | 'none'

Several options and methods are connected with the selection operation. To specify whether a single or multiple markers can be selected at a time, use the selectionMode option. To determine whether a certain marker is selected when the widget is created, use the isSelected field of the object returned by the customize callback function.

At runtime, you can do the following operations.

  • Obtain the current selection state of a marker using its selected() method.

  • Change the current selection state of a marker using its selected(state) method. Pass true or false to this method.

  • Deselect all the selected markers using the clearMarkerSelection() method of the map instance.

The change of the selection state invokes the callback function assigned to the selectionChanged option. Within this function you can handle the selection event in the manner you require.

Show Example:
jQuery

Use the drop-down menu below to change the selectionMode option for markers. To see the effect, click one or more map markers.


                                    

                                    

size

Specifies the size of markers. Setting this option makes sense for any type of marker except bubble.

Type: Number
Default Value: 8

type

Specifies the type of markers to be used on the map.

Type: String
Default Value: 'dot'
Accepted Values: 'dot' | 'bubble' | 'pie' | 'image'

dxVectorMap supports markers of the following types.

  • dot
    Markers are represented by dots bordered with a white line.
  • bubble
    Markers are represented by bubbles of different sizes. The size of a bubble depends on the value of the value field specified in the object of the markers array.
  • pie
    Markers are represented by pie charts. To specify values for pie slices, assign an array to the values field specified in the object of the markers array.
  • image
    Markers are represented by custom images. To specify an image for a marker, assign a URL of this image to the url field specified in the object of the markers array.
Show Example:
jQuery

In this example, you can spot the difference between marker types. Change the type of markers using the drop-down menu below the map. Note that to provide data for markers of a bubble and pie type, the value and values fields must be specified in each data object.