Area Methods

This section describes the methods that can be used in code to manipulate the Area object.

attribute(name)

Return the value of an attribute.

Parameters:
name: String
The name of an attribute.
Return Value: Object|Array|Number|String|Boolean
The value of the required attribute.

The map data source can contain an object of attributes assigned to the attributes field. To obtain the value of an attribute, call the attribute(name) method with the name of the required attribute passed as the parameter.

Show Example:
jQuery

In this example, the attribute(name) method is used to obtain the name of the area that is currently hovered over. This name is displayed by a tooltip.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/usa.txt',
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        areaSettings: {
            palette: 'Violet',
            paletteSize: 10,
            customize: function () {
                return { paletteIndex: i++ % 10 };
            }
        },
        tooltip: {
            enabled: true,
            customizeTooltip: function (element) {
                return {
                    text: element.attribute('name')
                };
            }
        }
    });
});

selected()

Provides information about the selection state of an area.

Return Value: Boolean
Selection state of the area.

When an area is selected, this method returns true. Otherwise, the returned value is false. To select/deselect an area at runtime, use the selected(state) method.

Show Example:
jQuery

In this example, the selected() method is used to check whether the clicked area is already selected. If so, this area deselects using the selected(state) method. Otherwise, it selects using the same method.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        areaSettings: {
            palette: 'Vintage',
            paletteSize: 10,
            customize: function () {
                return { paletteIndex: i++ % 10 };
            },
            click: function () {
                this.selected(!this.selected());
            },
            selectedBorderColor: 'white',
            selectedColor: 'powderblue',
            selectionMode: 'multiple'
        },
        mapData: '/Content/data/vectorMap-sources/world.txt'
    });
});

selected(state)

Sets a new selection state for an area.

Parameters:
state: Boolean
Specifies whether to select or deselect the area.

To select an area, pass true as the parameter. Otherwise, pass false. To specify the selection state of a certain area when configuring dxVectorMap, use the isSelected field of the object returned by the customize function.

Show Example:
jQuery

In this example, the selected() method is used to check whether the clicked area is already selected. If so, this area deselects using the selected(state) method. Otherwise, it selects using the same method.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var i = 0;

$(function () {
    $('#mapContainer').dxVectorMap({
        areaSettings: {
            palette: 'Harmony Light',
            paletteSize: 10,
            customize: function () {
                return { paletteIndex: i++ % 10 };
            },
            click: function () {
                this.selected(!this.selected());
            },
            selectedBorderColor: 'white',
            selectedColor: 'powderblue',
            selectionMode: 'multiple'
        },
        mapData: '/Content/data/vectorMap-sources/world.txt'
    });
});