DevExtreme v24.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

Area with Labels and Two Legends

The VectorMap component allows you to use color and size indicators to better illustrate the values associated with areas/markers. Use map legends to provide additional information on colors and marker size.

Backend API
$(() => { $('#vector-map').dxVectorMap({ layers: [{ name: 'areas', dataSource: DevExpress.viz.map.sources.world, palette: 'Violet', colorGroups: [0, 0.5, 0.8, 1, 2, 3, 100], colorGroupingField: 'population', label: { enabled: true, dataField: 'name', }, customize(elements) { $.each(elements, (_, element) => { const name = element.attribute('name'); const population = populations[name]; if (population) { element.attribute('population', population); } }); }, }, { name: 'markers', dataSource: markers, elementType: 'bubble', dataField: 'value', sizeGroups: [0, 8000, 10000, 50000], opacity: 0.8, label: { enabled: false, }, }], tooltip: { enabled: true, customizeTooltip(arg) { return { text: arg.attribute('text') }; }, }, legends: [{ title: 'World Population\nPercentages', source: { layer: 'areas', grouping: 'color' }, horizontalAlignment: 'left', verticalAlignment: 'bottom', customizeText(arg) { if (arg.index === 0) { return '< 0.5%'; } if (arg.index === 5) { return '> 3%'; } return `${arg.start}% to ${arg.end}%`; }, customizeItems(items) { return items.reverse(); }, }, { title: 'City Population', source: { layer: 'markers', grouping: 'size' }, markerShape: 'circle', horizontalAlignment: 'right', verticalAlignment: 'bottom', customizeText(arg) { return ['< 8000K', '8000K to 10000K', '> 10000K'][arg.index]; }, customizeItems(items) { return items.reverse(); }, }], bounds: [-180, 85, 180, -75], }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.1.3/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="https://cdn3.devexpress.com/jslib/24.1.3/js/vectormap-data/world.js"></script> <script src="https://cdn3.devexpress.com/jslib/24.1.3/js/vectormap-data/africa.js"></script> <script src="https://cdn3.devexpress.com/jslib/24.1.3/js/vectormap-data/canada.js"></script> <script src="https://cdn3.devexpress.com/jslib/24.1.3/js/vectormap-data/eurasia.js"></script> <script src="https://cdn3.devexpress.com/jslib/24.1.3/js/vectormap-data/europe.js"></script> <script src="https://cdn3.devexpress.com/jslib/24.1.3/js/vectormap-data/usa.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="vector-map"></div> </div> </body> </html>
#vector-map { height: 700px; }
const populations = { China: 19, India: 17.4, 'United States': 4.44, Indonesia: 3.45, Brazil: 2.83, Nigeria: 2.42, Bangladesh: 2.18, Russia: 2.04, Japan: 1.77, Mexico: 1.67, Philippines: 1.39, Vietnam: 1.25, Ethiopia: 1.23, Egypt: 1.21, Germany: 1.13, Turkey: 1.07, 'Democratic Republic of the Congo': 0.94, France: 0.92, Thailand: 0.9, 'United Kingdom': 0.89, Italy: 0.85, Burma: 0.84, 'South Africa': 0.74, 'South Korea': 0.7, Colombia: 0.66, Spain: 0.65, Tanzania: 0.63, Kenya: 0.62, Ukraine: 0.6, Argentina: 0.59, Algeria: 0.54, Poland: 0.54, Sudan: 0.52, Canada: 0.49, Uganda: 0.49, Morocco: 0.46, Uzbekistan: 0.43, }; const markers = { type: 'FeatureCollection', features: $.map([ { coordinates: [-74, 40.7], text: 'New York City', value: 8406, }, { coordinates: [100.47, 13.75], text: 'Bangkok', value: 8281, }, { coordinates: [37.62, 55.75], text: 'Moscow', value: 12111, }, { coordinates: [121.5, 31.2], text: 'Shanghai', value: 24150, }, { coordinates: [-43.18, -22.9], text: 'Rio de Janeiro', value: 6429, }, { coordinates: [31.23, 30.05], text: 'Cairo', value: 8922, }, { coordinates: [28.95, 41], text: 'Istanbul', value: 14160, }, { coordinates: [127, 37.55], text: 'Seoul', value: 10388, }, { coordinates: [139.68, 35.68], text: 'Tokyo', value: 9071, }, { coordinates: [103.83, 1.28], text: 'Singapore', value: 5399, }, { coordinates: [30.3, 59.95], text: 'Saint Petersburg', value: 5131, }, { coordinates: [28.03, -26.2], text: 'Johannesburg', value: 4434, }, { coordinates: [144.95, -37.8], text: 'Melbourne', value: 4252, }, ], (data) => ({ type: 'Feature', geometry: { type: 'Point', coordinates: data.coordinates, }, properties: { value: data.value, text: data.text, }, })), };