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({
        mapData: '/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.

  • 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 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({
        mapData: '/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.

  • 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 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({
        mapData: '/Content/data/vectorMap-sources/world.txt',
        background: {
            color: 'moccasin'
        }
    });
});