Your search did not match any results.
VectorMap

Area with Labels and Two Legends

Documentation

The VectorMap widget 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.

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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery-3.1.0.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/17.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/17.2.4/js/dx.all.js"></script> <script src="https://cdn3.devexpress.com/jslib/17.2.4/js/vectormap-data/world.js"></script> <script src="https://cdn3.devexpress.com/jslib/17.2.4/js/vectormap-data/africa.js"></script> <script src="https://cdn3.devexpress.com/jslib/17.2.4/js/vectormap-data/canada.js"></script> <script src="https://cdn3.devexpress.com/jslib/17.2.4/js/vectormap-data/eurasia.js"></script> <script src="https://cdn3.devexpress.com/jslib/17.2.4/js/vectormap-data/europe.js"></script> <script src="https://cdn3.devexpress.com/jslib/17.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 } }; }) };