Your search did not match any results.
Vector Map

Pie Markers

API Reference
This demo helps illustrate use of pie markers to flag specific locations on a map. Values of pie markers should be specified by attributes whose names are held in the dataField option.
Copy to Codepen
Apply
Reset
$(function(){ $("#vector-map").dxVectorMap({ layers: [{ dataSource: DevExpress.viz.map.sources.world, hoverEnabled: false }, { name: "pies", dataSource: markers, elementType: "pie", dataField: "values" }], tooltip: { enabled: true, customizeTooltip: function (arg) { if (arg.layer.type === "marker") { return { text: arg.attribute("tooltip") }; } } }, legends: [{ source: { layer: "pies", grouping: "color" }, customizeText: function (arg) { return names[arg.index]; } }], bounds: [-180, 85, 180, -60] }); });
<!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: 440px; width: 100%; display: block; }
var names = ["Christian", "Muslim", "Unaffiliated", "Buddhist", "Jewish"]; var markers = { type: "FeatureCollection", features: $.map([ { coordinates: [34.6, -5.1], values: [61.4, 35.2, 1.4, 0, 0], country: "Tanzania" }, { coordinates: [18.8, 15], values: [40.6, 55.3, 2.5, 0, 0], country: "Chad" }, { coordinates: [7.36, 9.97], values: [49.3, 48.8, 0.4, 0, 0], country: "Nigeria" }, { coordinates: [135.61, -24.57], values: [67.3, 2.4, 24.2, 2.7, 0.5], country: "Australia" }, { coordinates: [103.3, 34.85], values: [5.1, 1.8, 52.2, 18.2, 0], country: "China" }, { coordinates: [139.5, 37], values: [1.6, 0.2, 57, 36.2, 0], country: "Japan" }, { coordinates: [100.8, 15.9], values: [0.9, 5.5, 0.3, 93.2, 0], country: "Thailand" }, { coordinates: [10.4, 51.4], values: [68.7, 5.8, 24.7, 0.3, 0.3], country: "Germany" }, { coordinates: [100.8, 65.3], values: [73.3, 10, 16.2, 0.1, 0.2], country: "Russia" }, { coordinates: [-3.48, 40.36], values: [78.6, 2.1, 19, 0, 0.1], country: "Spain" }, { coordinates: [-78.01, 21.72], values: [59.2, 0, 23, 0, 0], country: "Cuba" }, { coordinates: [-63.7, -31.92], values: [85.2, 1, 12.2, 0.05, 0.5], country: "Argentina" }, { coordinates: [-110.53, 60.78], values: [69, 2.1, 23.7, 0.5, 0.3], country: "Canada" }, { coordinates: [-100.1, 40.14], values: [78.3, 0.9, 16.4, 1.2, 1.8], country: "United States" }, { coordinates: [34.88, 31.16], values: [2, 18.6, 3.1, 0.3, 75.6], country: "Israel" } ], function (data) { var list = ["<b>" + data.country + "</b>"]; $.each(data.values, function (i, value) { if (value > 0) { list.push(names[i] + ": " + value + "%"); } }); return { type: "Feature", geometry: { type: "Point", coordinates: data.coordinates }, properties: { tooltip: list.join("\n"), values: data.values } }; }) };