$(function(){
$("#vector-map").dxVectorMap({
bounds: [-180, 85, 180, -60],
tooltip: {
enabled: true,
border: {
visible: false
},
font: { color: "#fff" },
customizeTooltip: function (arg) {
var name = arg.attribute("name"),
country = countries[name];
if (country) {
return { text: name + ": " + country.totalArea + "M km²", color: country.color };
}
}
},
layers: {
dataSource: DevExpress.viz.map.sources.world,
customize: function (elements) {
$.each(elements, function (_, element) {
var country = countries[element.attribute("name")];
if (country) {
element.applySettings({
color: country.color,
hoveredColor: "#e0e000",
selectedColor: "#008f00"
});
}
});
}
},
onClick: function (e) {
var target = e.target;
if (target && countries[target.attribute("name")]) {
target.selected(!target.selected());
}
}
});
});
<!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/20.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/vectormap-data/world.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/vectormap-data/africa.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/vectormap-data/canada.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/vectormap-data/eurasia.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.2.4/js/vectormap-data/europe.js"></script>
<script src="https://cdn3.devexpress.com/jslib/20.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;
}
var countries = {
"Russia": { totalArea: 17.12, color: "#1E90FF" },
"Canada": { totalArea: 9.98, color: "#B8860B" },
"China": { totalArea: 9.59, color: "#BDB76B" },
"United States": { totalArea: 9.52, color: "#FFA07A" },
"Brazil": { totalArea: 8.51, color: "#3CB371" },
"Australia": { totalArea: 7.69, color: "#D8BFD8" },
"India": { totalArea: 3.29, color: "#DB7093" },
"Argentina": { totalArea: 2.78, color: "#FFD700" },
"Kazakhstan": { totalArea: 2.72, color: "#CD5C5C" },
"Algeria": { totalArea: 2.38, color: "#B0C4DE" }
};