label 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
                }
            }
        }
    });
});

color

Specifies a font color for marker labels.

Type: String
Default Value: '#2b2b2b'

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 font color of marker labels is set to 'green' using the color option.

<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: 'green'
                }
            }
        }
    });
});

family

Specifies a font family for marker labels.

Type: String
Default Value: "'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana"

For details on acceptable values, refer to the Font family article.

Show Example:
jQuery

In this example, the font family of marker labels is changed using the family option.

<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: {
                    family: 'Helvetica Neue'
                }
            }
        }
    });
});

opacity

Specifies a font opacity for marker labels.

Type: Number
Default Value: undefined

Show Example:
jQuery

In this example, the font opacity of marker labels is specified using the opacity option.

<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: {
                    opacity: 0.8
                }
            }
        }
    });
});

size

Specifies a font size for marker labels.

Type: Number|String
Default Value: 12

For details on acceptable values, refer to the Font size article.

Show Example:
jQuery

In this example, the font size of marker labels is set to 9 using the size option.

<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: {
                    size: 9
                }
            }
        }
    });
});

weight

Specifies a font weight for marker labels.

Type: Number
Default Value: 400

Show Example:
jQuery

In this example, the font weight of marker labels is set to 700 using the size option.

<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: {
                    weight: 700
                }
            }
        }
    });
});