@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Bounds(new double[] { -180, 85, 180, -60 })
.Tooltip(t => t
.Enabled(true)
.Border(b => b.Visible(false))
.Font(f => f.Color("#fff"))
.CustomizeTooltip("vectorMap_customizeTooltip")
)
.Layers(l => l.Add()
.DataSource(new JS("DevExpress.viz.map.sources.world"))
.Customize("vectorMap_layer_customize")
)
.OnClick("vectorMap_onClick")
)
<script src="~/Scripts/data/countries.js"></script>
<script>
function vectorMap_customizeTooltip(arg) {
var name = arg.attribute("name"),
country = countries[name];
if(country) {
return { text: name + ": " + country.totalArea + "M km²", color: country.color };
}
}
function vectorMap_layer_customize(elements) {
$.each(elements, function(_, element) {
var country = countries[element.attribute("name")];
if(country) {
element.applySettings({
color: country.color,
hoveredColor: "#e0e000",
selectedColor: "#008f00"
});
}
});
}
function vectorMap_onClick(e) {
var target = e.target;
if(target && countries[target.attribute("name")]) {
target.selected(!target.selected());
}
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult ColorsCustomization() {
return View();
}
}
}
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" }
};
#vector-map {
height: 440px;
}