@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Bounds(new double[] { -180, 85, 180, -60 })
.Layers(l => l.Add()
.Name("areas")
.DataSource(new JS("DevExpress.viz.map.sources.world"))
.Palette(VizPalette.Violet)
.ColorGroups(new double[] { 0, 0.5, 0.8, 1, 2, 3, 100 })
.ColorGroupingField("population")
.Customize("vectorMap_areasLayer_customize")
)
.Legends(l => l.Add()
.Source(s => s
.Layer("areas")
.Grouping("color")
)
.CustomizeText("vectorMap_areasLegend_customizeText")
)
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip("vectorMap_customizeTooltip")
)
)
<script src="~/data/populations.js"></script>
<script>
function vectorMap_areasLayer_customize(elements) {
$.each(elements, function(_, element) {
element.attribute("population", populations[element.attribute("name")]);
});
}
function vectorMap_areasLegend_customizeText(arg) {
var text;
if(arg.index === 0) {
text = "< 0.5%";
}
else if(arg.index === 5) {
text = "> 3%";
}
else {
text = arg.start + "% to " + arg.end + "%";
}
return text;
}
function vectorMap_customizeTooltip(arg) {
if(arg.attribute("population")) {
return { text: arg.attribute("name") + ": " + arg.attribute("population") + "% of world population" };
}
}
</script>
using Microsoft.AspNetCore.Mvc;
using DevExtreme.NETCore.Demos.Models.SampleData;
using Newtonsoft.Json;
namespace DevExtreme.NETCore.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult Palette() {
return View();
}
}
}
var populations = {
"China": 19,
"India": 17.4,
"United States": 4.44,
"Indonesia": 3.45,
"Brazil": 2.83,
"Pakistan": 2.62,
"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,
"Iran": 1.08,
"Turkey": 1.07,
"Congo (Kinshasa)": 0.94,
"France": 0.92,
"Thailand": 0.9,
"United Kingdom": 0.89,
"Italy": 0.85,
"Burma": 0.84,
"South Africa": 0.74,
"S. 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,
"Iraq": 0.47,
"Morocco": 0.46,
"Uzbekistan": 0.43
};
#vector-map {
height: 440px;
}