Configuration 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.

<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'
        }],
        background: {
            borderColor: 'dodgerblue',
            color: 'paleturquoise'
        }
    });
});

borderColor

Specifies a color for the background border.

Type: String
Default Value: '#cacaca'

This option supports the following colors.

Show Example:
jQuery

In this example, the background border is colored in 'seagreen' 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'
        }],
        background: {
            borderColor: 'seagreen'
        }
    });
});

color

Specifies a color for the background.

Type: String
Default Value: '#ffffff'

This option supports the following colors.

Show Example:
jQuery

In this example, the background is colored in 'moccasin' using the color 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'
        }],
        background: {
            color: 'moccasin'
        }
    });
});