Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Layers(layers => {
layers.Add()
.DataSource(new JS("DevExpress.viz.map.sources.world"))
.HoverEnabled(false);
layers.Add()
.Name("pies")
.DataSource(d => d.StaticJson().Url(Url.Action("GetPieMarkers")))
.DataSourceOptions(dso => dso.Map("vectorMap_piesLayer_dataSource_map"))
.ElementType(VectorMapMarkerType.Pie)
.DataField("values")
.MinSize(20)
.MaxSize(40)
.SizeGroups(new double[] { 0, 8000, 10000, 50000 });
})
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip("vectorMap_customizeTooltip")
)
.Legends(l => l.Add()
.Source(s => s
.Layer("pies")
.Grouping("color")
)
.CustomizeText("vectorMap_piesLegend_customizeText")
)
.Bounds(new double[] { -180, 85, 180, -60 })
)
<script src="~/Scripts/data/names.js"></script>
<script>
function vectorMap_piesLayer_dataSource_map(item) {
item.features=$.map(item.features,
function(data) {
var list = ["<span class='country'>" + data.country + "</span>", " "];
$.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
}
};
}
);
return item;
}
function vectorMap_customizeTooltip(arg) {
if(arg.layer.type === "marker") {
return { text: arg.attribute("tooltip") };
}
}
function vectorMap_piesLegend_customizeText(arg) {
return names[arg.index];
}
</script>
using DevExtreme.MVC.Demos.Models.SampleData;
using System.Text.Json;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class VectorMapController : Controller {
public ActionResult PieMarkers() {
return View();
}
[HttpGet]
public ContentResult GetPieMarkers() {
return Content(JsonSerializer.Serialize(SampleData.PieMarkersData), "application/json");
}
}
}
var names = ["Christian", "Muslim", "Unaffiliated", "Buddhist", "Jewish"];
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly object PieMarkersData = new[] {
new {
type = "FeatureCollection",
features = new[] {
new {
coordinates = new[] { 34.6, -5.1 },
values = new[] { 61.4, 35.2, 1.4, 0, 0 },
country = "Tanzania"
},
new {
coordinates = new[] { 18.8, 15 },
values = new[] { 40.6, 55.3, 2.5, 0, 0 },
country = "Chad"
},
new {
coordinates = new[] { 7.36, 9.97 },
values = new[] { 49.3, 48.8, 0.4, 0, 0 },
country = "Nigeria"
},
new {
coordinates = new[] { 135.61, -24.57 },
values = new[] { 67.3, 2.4, 24.2, 2.7, 0.5 },
country = "Australia"
},
new {
coordinates = new[] { 103.3, 34.85 },
values = new[] { 5.1, 1.8, 52.2, 18.2, 0 },
country = "China"
},
new {
coordinates = new[] { 139.5, 37 },
values = new[] { 1.6, 0.2, 57, 36.2, 0 },
country = "Japan"
},
new {
coordinates = new[] { 100.8, 15.9 },
values = new[] { 0.9, 5.5, 0.3, 93.2, 0 },
country = "Thailand"
},
new {
coordinates = new[] { 10.4, 51.4 },
values = new[] { 68.7, 5.8, 24.7, 0.3, 0.3 },
country = "Germany"
},
new {
coordinates = new[] { 100.8, 65.3 },
values = new[] { 73.3, 10, 16.2, 0.1, 0.2 },
country = "Russia"
},
new {
coordinates = new[] { -3.48, 40.36 },
values = new[] { 78.6, 2.1, 19, 0, 0.1 },
country = "Spain"
},
new {
coordinates = new[] { -78.01, 21.72 },
values = new[] { 59.2, 0, 23, 0, 0 },
country = "Cuba"
},
new {
coordinates = new[] { -63.7, -31.92 },
values = new[] { 85.2, 1, 12.2, 0.05, 0.5 },
country = "Argentina"
},
new {
coordinates = new[] { -110.53, 60.78 },
values = new[] { 69, 2.1, 23.7, 0.5, 0.3 },
country = "Canada"
},
new {
coordinates = new[] { -100.1, 40.14 },
values = new[] { 78.3, 0.9, 16.4, 1.2, 1.8 },
country = "United States"
},
new {
coordinates = new[] { 34.88, 31.16 },
values = new[] { 2, 18.6, 3.1, 0.3, 75.6 },
country = "Israel"
}
}
}
};
}
}
#vector-map {
height: 440px;
}
.country {
font-size: 15px;
font-weight: 500;
}