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

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

var mapOptions = {
    mapData: '/Content/data/vectorMap-sources/world.txt',
    areaSettings: {
        palette: 'Bright',
        paletteSize: 10,
        customize: function () {
            return { paletteIndex: i++ % 10 };
        }
    }
};

$(function () {
    $("#mapContainer").dxVectorMap({
        loadingIndicator: {
            backgroundColor: 'lightcyan',
            font: {
                weight: 700,
                size: 16
            }
        }
    }).dxVectorMap('instance').showLoadingIndicator();
});

var configureMap = function () {
    var map = $("#mapContainer").dxVectorMap('instance');
    map.option(mapOptions);
};

setTimeout(configureMap, 3000);

backgroundColor

Specifies a color for the loading indicator 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 loading indicator background color is 'lavender'.

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

var mapOptions = {
    mapData: '/Content/data/vectorMap-sources/world.txt',
    areaSettings: {
        palette: 'Vintage',
        paletteSize: 10,
        customize: function () {
            return { paletteIndex: i++ % 10 };
        }
    }
};

$(function () {
    $("#mapContainer").dxVectorMap({
        loadingIndicator: {
            backgroundColor: 'lavender'
        }
    }).dxVectorMap('instance').showLoadingIndicator();
});

var configureMap = function () {
    var map = $("#mapContainer").dxVectorMap('instance');
    map.option(mapOptions);
};

setTimeout(configureMap, 3000);

font

Specifies font options for the loading indicator text.

Type: Object

Show Example:
jQuery

In this example, several font options of the loading indicator are changed.

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

var mapOptions = {
    mapData: '/Content/data/vectorMap-sources/world.txt',
    areaSettings: {
        palette: 'Harmony Light',
        paletteSize: 10,
        customize: function () {
            return { paletteIndex: i++ % 10 };
        }
    }
};

$(function () {
    $("#mapContainer").dxVectorMap({
        loadingIndicator: {
            font: {
                color: 'forestgreen',
                family: 'Zapf-Chancery, cursive',
                opacity: 0.7,
                weight: 700,
                size: 16
            }
        }
    }).dxVectorMap('instance').showLoadingIndicator();
});

var configureMap = function () {
    var map = $("#mapContainer").dxVectorMap('instance');
    map.option(mapOptions);
};

setTimeout(configureMap, 3000);

text

Specifies a text to be displayed by the loading indicator.

Type: String
Default Value: 'Loading...'

Show Example:
jQuery

In this example, the loading indicator's text option is changed.

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

var mapOptions = {
    mapData: '/Content/data/vectorMap-sources/world.txt',
    areaSettings: {
        palette: 'Ocean',
        paletteSize: 10,
        customize: function () {
            return { paletteIndex: i++ % 10 };
        }
    }
};

$(function () {
    $("#mapContainer").dxVectorMap({
        loadingIndicator: {
            text: "Creating a map..."
        }
    }).dxVectorMap('instance').showLoadingIndicator();
});

var configureMap = function () {
    var map = $("#mapContainer").dxVectorMap('instance');
    map.option(mapOptions);
};

setTimeout(configureMap, 3000);