Configuration

An object that specifies configuration options for the dxVectorMap widget.

areaSettings

An object specifying options for the map areas.

Type: Object

The map areas usually represent geographical objects, such as countries, continents, etc. The appearance of these areas is specified by the options of the areaSettings configuration object. If these options are defined on the first level of the areaSettings object, they are applied to all the map areas at once. However, you can specify several of these options for certain areas exclusively. See the customize option description to learn how.

Show Example:
jQuery

In this example, areas are painted using the 'Vintage' palette. To specify different colors from this palette for the areas, the customize function returns an object that contains the specified palleteIndex field.


                                    

                                    

background

Specifies the options for the map background.

Type: Object

The map background is a space on a map that does not contain areas. Within the background configuration object you can specify colors for the map background and its border.

Show Example:
jQuery

In this example, the background is colored in 'paleturquoise' using the color option. In addition, the background border is colored in 'dodgerblue' using the borderColor option.


                                    

                                    

bounds

Specifies the positioning of a map, in geographical coordinates.

Type: Object

When you have no need to display your map in a whole, you can focus it on a required region. For this purpose, specify the geographical coordinates of this region using the bounds configuration object. There are four fields within this object: minLat and maxLat (which specify latitude) and minLon and maxLon (which specify longitude). See the image below to discover how the values of these fields are applied to the map.

ChartMargin ChartJS

Show Example:
jQuery

In this example, the map is focused on the USA in code using the bounds configuration object.


                                    

                                    

center

Specifies the geographical coordinates of the center for a map.

Type: Object

By default, the map in the dxVectorMap widget is centered on the (0, 0) point. If you need to center the map on a different geographical point, set its geographical coordinates to the lat and lon field of the center configuration object.

Show Example:
jQuery

In this example, the map is centered on Africa in code using the center configuration object.


                                    

                                    

controlBar

Specifies the options of the control bar.

Type: Object

The control bar is a panel on a map that helps you navigate this map. This panel contains the pan control and the zoom bar for panning and zooming the map correspondingly. You can change the visibility of the control bar and adjust its colors using the options of the controlBar configuration object.

Show Example:
jQuery

In this example, the appearance of the control bar is changed using the controlBar configuration object.


                                    

                                    

loadingIndicator

Specifies the appearance of the loading indicator.

Type: Object

In most cases, a vector map is quick enough to draw itself instantly for a viewer. There are cases, however, when the vector map takes longer to be drawn. In these cases, it is recommended that the loading indicator is displayed. Use the vector map's showLoadingIndicator() and hideLoadingIndicator() methods to manage the loading indicator. To specify its appearance, use the loadingIndicator configuration object.

Show Example:
jQuery

In this example, the map options are assigned 3000 ms after the example is loaded. Until that time, the loading indicator is displayed. Its background and font are changed using the backgroundColor and font options respectively. Make a note that these options should be specified at design-time so that the changes are applied at the right time.


                                    

                                    

mapData

Specifies a data source for the map area.

Type: Array|String
Default Value: undefined

This option specifies the set of areas represented on a map. To discover different approaches to providing data for map areas, see the Data for Areas topic.

Show Example:
jQuery

Use the drop-down menu below to choose which data source to use for the map. In this example, each data source is represented by a JSON object.


                                    

                                    

markers

Specifies a data source for the map markers.

Type: Array|String
Default Value: undefined

To learn how to specify map markers, see the Data for Markers topic.

Show Example:
jQuery

In this example, several markers are displayed on the map. These markers indicate the capitals of ten most populous states in the USA.


                                    

                                    

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.


                                    

                                    

pathModified

Notifies a widget that it is embedded into the HTML page that uses a path modifier.

Type: Boolean
Default Value: false
Accepted Values: true|false

If you place a widget on a page that uses a path modifier, notify the widget about it by setting the pathModified option to true. As an example of such modifiers, the base HTML tag can be considered. Also, we recommend you to enable this option if you place the widget inside the <iframe> tag.

size

Specifies the size of the dxVectorMap widget.

Type: Object

By default, the widget occupies the entire area of the parent container (division). If the container width or height is set to zero, the widget is not displayed.

If you need to set a size for the widget that differs from the container's size, use the size configuration object. Assign a height and width in pixels to the height and width options of the size object.

Show Example:
jQuery

In this example, the size of the dxVectorMap widget is less than the container's size.


                                    

                                    

theme

Specifies the name of the theme to be applied.

Type: Object
Default Value: 'desktop'

Use this option to specify the name of the theme that should be applied to the widget. For information on customizing and implementing themes, refer to the Themes topic.

Show Example:
jQuery

This example shows how to implement a custom theme on the base of a predefined one.


                                    

                                    

tooltip

Specifies tooltip options.

Type: Object

A tooltip is a small pop-up rectangle that displays information about an area or a marker when it is hovered over. You can enable or disable a tooltip and change its default appearance using the options of the tooltip configuration object.

Show Example:
jQuery

In this example, tooltips display the name of the area that is currently hovered over. The tooltips' borders are colored in 'royalblue' using the borderColor option. In addition, the tooltips' font color is set to 'dodgerblue' using the font | color option.


                                    

                                    

zoomFactor

Specifies a number that is used to zoom a map initially.

Type: Number
Default Value: 1

Use this option to specify a zoom factor for a map while configuring it. This option accepts a value that is greater than 1. Note that the zooming is performed regarding the center of the map.

Show Example:
jQuery

In this example, the map is initially zoomed twice as the zoomFactor option is set to 2.