Your search did not match any results.
Vector Map

Area with Labels and Two Legends

API Reference
The dxVectorMap widget allows you to use color and size indicators to better illustrate the values associated with areas/markers within the data source. Use map legends to provide additional information on colors used and marker size.
Copy to Codepen
Apply
Reset
$(function(){ $("#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: function (elements) { $.each(elements, function (_, element) { var name = element.attribute("name"), population = populations[name]; if (population) { element.attribute("population", population); } }); } }, { name: "markers", dataSource: markers, elementType: "bubble", dataField: "value", sizeGroups: [0, 8000, 10000, 50000], label: { enabled: false } }], tooltip: { enabled: true, customizeTooltip: function (arg) { return { text: arg.attribute("text") }; } }, legends: [{ source: { layer: "areas", grouping: "color" }, horizontalAlignment: "left", verticalAlignment: "bottom", customizeText: function (arg) { if (arg.index === 0) { return "< 0.5%"; } else if (arg.index === 5) { return "> 3%"; } else { return arg.start + "% to " + arg.end + "%"; } } }, { source: { layer: "markers", grouping: "size" }, markerShape: "circle", horizontalAlignment: "left", verticalAlignment: "bottom", customizeText: function (arg) { return ["< 8000K", "8000K to 10000K", "> 10000K"][arg.index]; } }], 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="js/jquery-3.1.0.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/dx.all.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/vectormap-data/world.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/vectormap-data/africa.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/vectormap-data/canada.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/vectormap-data/eurasia.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.4/js/vectormap-data/europe.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.4/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; width: 100%; display: block; }
var 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 }; var 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 } ], function (data) { return { type: "Feature", geometry: { type: "Point", coordinates: data.coordinates }, properties: { value: data.value, text: data.text } }; }) };