markerSettings 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 for a marker label, assign it to the text field of an object from the markers array when you provide data for markers.

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],
        text: 'Sacramento'
    }, {
        coordinates: [-97.75, 30.25],
        text: 'Austin'
    }, {
        coordinates: [-73.7572, 42.6525],
        text: 'Albany'
    }, {
        coordinates: [-84.2533, 30.455],
        text: 'Tallahassee'
    }, {
        coordinates: [-89.65, 39.783],
        text: 'Springfield'
    }
];

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/usa.txt',
        markers: markers,
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        areaSettings: { hoverEnabled: false },
        markerSettings: {
            label: {
                font: {
                    color: 'indianred',
                    opacity: 0.8,
                    weight: 100,
                    size: 15
                }
            }
        }
    });
});

enabled

Enables marker labels.

Type: Boolean
Default Value: true

Show Example:
jQuery

In this example, you can show/hide marker labels by toggling the check box under the map.

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

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/usa.txt',
        markers: markers,
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        areaSettings: { hoverEnabled: false }
    });

    $("#enableLabelsCheckbox").dxCheckBox({
        value: true,
        onValueChanged: function (info) {
            var vectorMap = $('#mapContainer').dxVectorMap('instance');
            vectorMap.option({
                markerSettings: {
                    label: {
                        enabled: info.value
                    }
                }
            });
        }
    });
});

font

Specifies font options for marker labels.

Type: Object

Show Example:
jQuery

In this example, several 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],
        text: 'Sacramento'
    }, {
        coordinates: [-97.75, 30.25],
        text: 'Austin'
    }, {
        coordinates: [-73.7572, 42.6525],
        text: 'Albany'
    }, {
        coordinates: [-84.2533, 30.455],
        text: 'Tallahassee'
    }, {
        coordinates: [-89.65, 39.783],
        text: 'Springfield'
    }
];

$(function () {
    $('#mapContainer').dxVectorMap({
        mapData: '/Content/data/vectorMap-sources/usa.txt',
        markers: markers,
        bounds: [-135, 60, -65, 20],
        zoomFactor: 1.25,
        areaSettings: { hoverEnabled: false },
        markerSettings: {
            label: {
                font: {
                    color: 'midnightblue',
                    family: 'Verdana',
                    opacity: 0.9,
                    weight: 100,
                    size: 11
                }
            }
        }
    });
});