Your search did not match any results.
Vector Map

Area with Labels and Two Legends

Documentation

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
Copy to CodePen
Apply
Reset
$(() => { $('#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"> <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=1.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/21.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/dx.all.js"></script> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/vectormap-data/world.js"></script> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/vectormap-data/africa.js"></script> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/vectormap-data/canada.js"></script> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/vectormap-data/eurasia.js"></script> <script src="https://cdn3.devexpress.com/jslib/21.2.3/js/vectormap-data/europe.js"></script> <script src="https://cdn3.devexpress.com/jslib/21.2.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, }, })), };