Your search did not match any results.
Vector Map

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
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.vectorMapOptions = { 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) { elements.forEach(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.5/css/dx.spa.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.common.css" /> <link rel="dx-theme" data-theme="generic.light" href="https://cdn3.devexpress.com/jslib/16.2.5/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C\/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/dx.all.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/vectormap-data/world.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/vectormap-data/africa.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/vectormap-data/canada.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/vectormap-data/eurasia.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/js/vectormap-data/europe.js"></script> <script src="https://cdn3.devexpress.com/jslib/16.2.5/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="vector-map" dx-vector-map="vectorMapOptions"></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 } }; }) };