Configuration layers

Specifies options for dxVectorMap widget layers.

Type: Array|Object
Default Value: undefined
Cannot be used in themes.

The vector map may contain several different layers. Each layer can be of "area", "line" or "marker" type.

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            palette: 'Vintage',
            paletteSize: 8,
            customize: function (e) {
                for (i in e) e[i].applySettings({ paletteIndex: i++ % 8 });
            }
        }]
    });
});

borderColor

Specifies a color for the border of the layer elements.

Type: String
Default Value: '#9d9d9d'

This option does not apply if the layer type is "line".

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, area borders are colored in 'indianred' using the borderColor option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            borderColor: 'indianred'
        }]
    });
});

borderWidth

Specifies the line width (for layers of a line type) or width of the layer elements border in pixels.

Type: Number
Default Value: 1

Show Example:
jQuery

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

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            borderColor: 'darksalmon',
            color: 'cornsilk',
            borderWidth: 3
        }]
    });
});

color

Specifies a color for layer elements.

Type: String
Default Value: '#d2d2d2'

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 top ten most populated countries are indicated by the 'yellowgreen' color.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var mostPopulatedCountries = ['China', 'India', 'United States', 'Indonesia', 'Brazil', 'Pakistan', 'Nigeria', 'Bangladesh', 'Russia', 'Japan'];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            customize: function (elements) {
                for (i in elements) {
                    if ($.inArray(elements[i].attribute('name'), mostPopulatedCountries) > -1) {
                        elements[i].applySettings({ color: 'yellowgreen' });
                    }
                }
            }
        }]
    });
});

colorGroupingField

Specifies the field that provides data to be used for coloring of layer elements.

Type: String
Default Value: undefined

If you need for the color of a specific map area to depend on the value of one of its attributes, assign the name of this attribute to the colorGroupingField option. The attribute must contain numeric values. After that, specify groups into which attribute values must be classified. For this purpose, assign an array to the colorGroups option. Each group in this array will be assigned a color from the palette.

colorGroups

Allows you to paint layer elements with similar attributes in the same color.

Type: Array
Default Value: undefined

If you have specified the field that provides area-coloring data, you need to specify groups into which this data must be classified. For this purpose, assign an array of numbers to the colorGroups option. Each pair of numbers in this array defines a range of data values.

For example, imagine that the colorGroups array contains four items: [0, 1, 2, 3]. This array specifies three ranges, or groups: 0-1, 1-2 and 2-3. Thus, data values will be split up into three groups. Each group will be assigned a color from the palette in order to paint the corresponding areas. Areas of those data values that do not match neither group will be drawn in a default color.

View Demo

customize

Specifies the function that customizes each layer element individually.

Type: function(elements)
Function parameters:
elements: Array
The array of layer elements.
Cannot be used in themes.

When implementing a function for this option, use the fields of the Layer Element object. To access this object, use the function's parameter or the this object.

Show Example:
jQuery

In this example, the top ten most populated countries are colored in 'dodgerblue' using the color option of the object returned by the customize function. The other countries are colored in 'powderblue' using the color option of the layer.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var mostPopulatedCountries = ['China', 'India', 'United States', 'Indonesia', 'Brazil', 'Pakistan', 'Nigeria', 'Bangladesh', 'Russia', 'Japan'];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            color: 'powderblue',
            hoverEnabled: false,
            customize: function (elements) {
                for (i in elements) {
                    if ($.inArray(elements[i].attribute('name'), mostPopulatedCountries) > -1) {
                        elements[i].applySettings({ color: 'dodgerblue' });
                    }
                }
            }
        }]
    });
});

data

Deprecated

Use the dataSource option instead.

Specifies a data source for the layer. Starting with v15.2.10, this option is renamed dataSource.

Cannot be used in themes.

To discover different approaches to providing data for map areas, see the Data for Areas article.

dataField

Specifies the name of the attribute containing marker data. Setting this option makes sense only if the layer type is "marker" and the elementType is "bubble", "pie" or "image".

Type: String
Default Value: undefined

The marker data may contain a bubble value, pie chart values or an image URL.

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. The state names are stored in the attribures of each marker object. The name of the attribute is passed to the dataField option.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}, {
    coordinates: [-76.8756, 40.2697],
    attributes: {
        text: 'Harrisburg'
    }
}, {
    coordinates: [-82.9833, 39.9833],
    attributes: {
        text: 'Columbus'
    }
}, {
    coordinates: [-84.39, 33.755],
    attributes: {
        text: 'Atlanta'
    }
}, {
    coordinates: [-84.5467, 42.7336],
    attributes: {
        text: 'Lansing'
    }
}, {
    coordinates: [-78.6447, 35.8189],
    attributes: {
        text: 'Raleigh'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: { size: 11 }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25
    });
});

dataSource

Specifies a data source for the layer.

Cannot be used in themes.

To discover different approaches to providing data for map areas, see the Data for Areas article.

IMPORTANT: From v15.2.1 to v15.2.9 inclusively, use the data option instead of dataSource.

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:450px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Choose a Data Source for the Map:
    <select id="dropdownListSelector">
        <option value="world">World</option>
        <option value="africa">Africa</option>
        <option value="canada">Canada</option>
        <option value="eurasia">Eurasia</option>
        <option value="europe">Europe</option>
        <option value="usa">USA</option>
    </select>
</div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            palette: 'Soft Pastel',
            paletteSize: 9,
            customize: function (elements) {
                $.each(elements, function (i, element) {
                    element.applySettings({ paletteIndex: i % 9 });
                });
            }
        }],
        tooltip: {
            enabled: true,
            customizeTooltip: function () {
                return {
                    text: this.attribute('name')
                };
            }
        }
    });

    $('#dropdownListSelector').change(function () {
        var vectorMap = $('#mapContainer').dxVectorMap('instance');
        vectorMap.option('layers[0].dataSource', '/Content/data/vectorMap-sources/' + this.value + '.txt')
    });
});

elementType

Specifies the type of a marker element. Setting this option makes sense only if the layer type is "marker".

Type: String
Accepted Values: 'dot' | 'bubble' | 'pie' | 'image'
Cannot be used in themes.

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 the attributes of each marker.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div id="selectContainer" style="height:20px; max-width:450px; margin:5px auto; text-align:center">
    Choose a Marker Type:
    <select id="dropdownListSelector">
        <option value="dot">dot</option>
        <option value="bubble">bubble</option>
        <option value="pie">pie</option>
    </select>
</div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento',
        value: 10,
        values: [9, 5, 14]
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin',
        value: 7,
        values: [10, 2, 3]
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany',
        value: 17,
        values: [15, 5, 14]
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee',
        value: 20,
        values: [6, 5, 1]
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield',
        value: 24,
        values: [6, 9, 10]
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            elementType: 'dot',
            label: {
                enabled: true,
                dataField: 'text',
                font: { size: 11 }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25
    });

    $('#dropdownListSelector').change(function () {
        var vectorMap = $('#mapContainer').dxVectorMap('instance');
        var layers = vectorMap.option('layers')
        layers[1].elementType = this.value;
        layers[1].dataField = 'value' + (this.value == 'pie' ? 's' : '');
        vectorMap.option('layers', layers)
    });
});

hoveredBorderColor

Specifies a color for the border of the layer element when it is hovered over.

Type: String
Default Value: '#303030'

This option does not apply if the layer type is "line".

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 an area is hovered over, its border is colored in 'lightcoral'.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            hoveredBorderColor: 'lightcoral'
        }]
    });
});

hoveredBorderWidth

Specifies the pixel-measured line width (for layers of a line type) or width for the border of the layer element when it is hovered over.

Type: Number
Default Value: 1

Show Example:
jQuery

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

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            hoveredBorderWidth: 4
        }]
    });
});

hoveredColor

Specifies a color for a layer element when it is hovered over.

Type: String
Default Value: '#d2d2d2'

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 an area is hovered over, it is colored in 'plum'.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            hoveredColor: 'plum'
        }]
    });
});

hoverEnabled

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

Type: Boolean
Default Value: true

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

Show Example:
jQuery

Toggle the check box below to enable/disable the hovering capability.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div id="checkboxContainer" style="height:20px;max-width:300px;margin:10px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    <input type="checkbox" id="enableHoverCheckbox" checked> Enable Hover
</div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            hoverEnabled: true
        }]
    });

    $('#enableHoverCheckbox').change(function () {
        var vectorMap = $('#mapContainer').dxVectorMap('instance');
        vectorMap.option("layers[0].hoverEnabled", this.checked);
    });
});

label

Specifies marker label options.

Type: Object

A marker label is a text that accompanies a map marker. Usually, a marker label displays the name of a certain geographical point.

To specify a text to be used in a marker label, place it in a field of the marker object. After that, assign the name of this field to the label | dataField option. Finally, enable marker labels by assigning true to the label | enabled option.

Show Example:
jQuery

In this example, markers are accompanied by labels. Texts for these labels are provided by the text field of objects in the markers array. In addition, font options of marker labels are changed.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento'
    }
}, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin'
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany'
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee'
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield'
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers:[{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            type: 'marker',
            dataSource: markers,
            label: {
                enabled: true,
                dataField: 'text',
                font: {
                    color: 'indianred',
                    opacity: 0.8,
                    weight: 100,
                    size: 15
                }
            }
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

maxSize

Specifies the pixel-measured diameter of the marker that represents the biggest value. Setting this option makes sense only if the layer type is "marker".

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 layers object.

minSize

Specifies the pixel-measured diameter of the marker that represents the smallest value. Setting this option makes sense only if the layer type is "marker".

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 layers object.

name

Specifies the layer name.

Type: String
Cannot be used in themes.

opacity

Specifies the layer opacity (from 0 to 1).

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.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
var markers = [{
    coordinates: [-121.2808, 38.3320],
    attributes: {
        text: 'Sacramento',
        value: 10
    }
    }, {
    coordinates: [-97.75, 30.25],
    attributes: {
        text: 'Austin',
        value: 7
    }
}, {
    coordinates: [-73.7572, 42.6525],
    attributes: {
        text: 'Albany',
        value: 17
    }
}, {
    coordinates: [-84.2533, 30.455],
    attributes: {
        text: 'Tallahassee',
        value: 20
    }
}, {
    coordinates: [-89.65, 39.783],
    attributes: {
        text: 'Springfield',
        value: 24
    }
}];

$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/usa.txt',
            hoverEnabled: false
        }, {
            dataSource: markers,
            elementType: 'bubble',
            dataField: 'value',
            opacity: 0.6
        }],
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
    });
});

palette

Specifies the name of the palette or a custom range of colors to be used for coloring a layer.

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

A palette defines a range of colors that are used to paint layer elements. This range is divided into segments using the value assigned to the paletteSize option. Each segment contributes a color into a resulting array of colors. The more of these segments, the greater the variety of colors in this array. All available palettes are listed in the accepted values.

In order to apply a palette to a map, follow the next steps.

  • Assign the name of the required palette (or an array of two colors) to the palette option.
  • Use the paletteSize option to define how many colors should be produced from the palette or array specified in the previous step.
  • Specify the index of the color from the colors array, which should be used for coloring an area, using the paletteIndex field of the object returned by the customize callback function.
Show Example:
jQuery

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

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    Choose a Palette:
    <select id="dropdownListSelector">
        <option value="Default">Default</option>
        <option value="Soft Pastel">Soft Pastel</option>
        <option value="Harmony Light">Harmony Light</option>
        <option value="Pastel">Pastel</option>
        <option value="Bright">Bright</option>
        <option value="Soft">Soft</option>
        <option value="Ocean">Ocean</option>
        <option value="Vintage">Vintage</option>
        <option value="Violet">Violet</option>
    </select>
</div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            palette: 'Default',
            paletteSize: 9,
            customize: function (elements) {
                $.each(elements, function (i, element) {
                    element.applySettings({ paletteIndex: i % 9 });
                });
            }
        }]
    });

    $('#dropdownListSelector').change(function () {
        var vectorMap = $('#mapContainer').dxVectorMap('instance');
        vectorMap.option("layers[0].palette", this.value);
    });
});

paletteSize

Specifies the number of colors in a palette.

Type: Number
Default Value: 0

Assign a number that is greater than 0 to this option in order to use palettes.

Show Example:
jQuery

In this example, the paletteSize option is set to 7. The map contains only seven different colors.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            palette: 'Bright',
            paletteSize: 7,
            customize: function (e) {
                for (i in e) e[i].applySettings({ paletteIndex: i++ % 7 });
            }
        }]
    });
});

selectedBorderColor

Specifies a color for the border of the layer element when it is selected.

Type: String
Default Value: '#303030'

This option does not apply if the layer type is "line".

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 an area by a click. When the area is selected, its border is colored in 'dodgerblue'.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            selectedBorderColor: 'dodgerblue'
        }],
        onClick: function (e) {
            var clickedArea = e.target;
            if (clickedArea != undefined && clickedArea.layer.type == 'area') {
                clickedArea.selected(!clickedArea.selected());
            }
        }
    });
});

selectedBorderWidth

Specifies a pixel-measured line width (for layers of a line type) or width for the border of the layer element when it is selected.

Type: Number
Default Value: 2

Show Example:
jQuery

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

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            selectedBorderWidth: 4
        }],
        onClick: function (e) {
            var clickedArea = e.target;
            if (clickedArea != undefined && clickedArea.layer.type == 'area') {
                clickedArea.selected(!clickedArea.selected());
            }
        }
    });
});

selectedColor

Specifies a color for the layer element when it is selected.

Type: String
Default Value: '#d2d2d2'

Show Example:
jQuery

In this example, you can select an area by a click. When the area is selected, it is colored in 'lightseagreen'.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            selectedBorderColor: 'white',
            selectedColor: 'lightseagreen'
        }],
        onClick: function (e) {
            var clickedArea = e.target;
            if (clickedArea != undefined && clickedArea.layer.type == 'area') {
                clickedArea.selected(!clickedArea.selected());
            }
        }
    });
});

selectionMode

Specifies whether single or multiple map elements 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 single or multiple areas can be selected at a time, use the selectionMode option. To determine whether a certain area 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 layer element using its selected() method.

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

  • Deselect all the selected layer elements using the clearSelection() method of the map layer.

The change of the selection state invokes the callback function assigned to the onSelectionChanged 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. To see the effect, click one or more map areas.

<div id="mapContainer" style="height:500px; max-width:800px; margin: 0 auto"></div>
<div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
    selectionMode:
    <select id="dropdownListSelector">
        <option value="single">single</option>
        <option value="multiple">multiple</option>
        <option value="none">none</option>
    </select>
</div>
$(function () {
    $('#mapContainer').dxVectorMap({
        layers: [{
            type: 'area',
            dataSource: '/Content/data/vectorMap-sources/world.txt',
            selectedBorderColor: 'white',
            selectedColor: 'seagreen',
            selectionMode: 'single'
        }],
        onClick: function (e) {
            var clickedArea = e.target;
            if (clickedArea != undefined && clickedArea.layer.type == 'area') {
                clickedArea.selected(!clickedArea.selected());
            }
        }
    });

    $('#dropdownListSelector').change(function () {
        var vectorMap = $('#mapContainer').dxVectorMap('instance');
        vectorMap.option("layers[0].selectionMode", this.value);
    });
});

size

Specifies the size of markers. Setting this option makes sense only if the layer type is "marker" and the elementType is "dot", "pie" or "image".

Type: Number
Default Value: 8

sizeGroupingField

Specifies the field that provides data to be used for sizing bubble markers. Setting this option makes sense only if the layer type is "marker" and the elementType is "bubble".

Type: String
Default Value: undefined

If you need the size of the bubble marker to depend on the value of one of its attributes, assign the name of this attribute to the sizeGroupingField option. The attribute must contain numeric values. After that, specify groups into which attribute values must be classified by assigning an array to the sizeGroups option.

NOTE: If you need to classify a bubble by its value, leave the sizeGroupingField option unassigned.

sizeGroups

Allows you to display bubbles with similar attributes in the same size. Setting this option makes sense only if the layer type is "marker" and the elementType is "bubble".

Type: Array
Default Value: undefined

If you have specified the field that provides marker-sizing data, you need to specify groups into which this data must be classified. For this purpose, assign an array of numbers to the sizeGroups option. Each pair of numbers in this array defines a range of data values.

For example, consider that the sizeGroups array contains four items: [0, 1, 2, 3]. This array specifies three ranges, or groups: 0-1, 1-2 and 2-3. Thus, data values will be split up into three groups. Each group will be assigned a size correlating with the group values. This size will be calculated automatically taking into account the minSize and maxSize values. Markers of those data values that do not match neither group will have a default size.

type

Specifies layer type.

Type: String
Accepted Values: 'area' | 'line' | 'marker'
Cannot be used in themes.