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()
.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")
.Label(lab => lab
.Enabled(true)
.DataField("name")
)
.Customize("vectormMap_areasLayer_customize");
layers.Add()
.Name("markers")
.DataSource(d => d.StaticJson().Url(Url.Action("GetAreaWithLabelsAndTwoLegendsData")))
.DataSourceOptions(dso => dso.Map("vectormMap_markersLayer_dataSource_map"))
.ElementType(VectorMapMarkerType.Bubble)
.DataField("value")
.SizeGroups(new double[] { 0, 8000, 10000, 50000 })
.Opacity(0.8)
.Label(l => l.Enabled(false));
})
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip("vectorMap_customizeTooltip")
)
.Legends(legends => {
legends.Add()
.Title("World Population\nPercentages")
.Source(s => s
.Layer("areas")
.Grouping("color")
)
.HorizontalAlignment(HorizontalAlignment.Left)
.VerticalAlignment(VerticalEdge.Bottom)
.CustomizeText("vectorMap_areasLegend_customizeText")
.CustomizeItems("vectorMap_customizeItems");
legends.Add()
.Title("City Population")
.Source(s => s
.Layer("markers")
.Grouping("size")
)
.MarkerShape(VectorMapMarkerShape.Circle)
.HorizontalAlignment(HorizontalAlignment.Right)
.VerticalAlignment(VerticalEdge.Bottom)
.CustomizeText("vectorMap_markersLegend_customizeText")
.CustomizeItems("vectorMap_customizeItems");
})
.Bounds(new double[] { -180, 85, 180, -75 })
)
<script src="~/Scripts/data/areaPopulations.js"></script>
<script>
function vectormMap_markersLayer_dataSource_map(item) {
item.features = $.map(item.features,
function(data) {
return {
type: "Feature",
geometry: {
type: "Point",
coordinates: data.coordinates
},
properties: {
value: data.value,
text: data.text
}
};
}
);
return item;
}
function vectormMap_areasLayer_customize(elements) {
$.each(elements, function(_, element) {
var name = element.attribute("name"),
population = areaPopulations[name];
if(population) {
element.attribute("population", population);
}
});
}
function vectorMap_customizeTooltip(arg) {
return { text: arg.attribute("text") };
}
function vectorMap_areasLegend_customizeText(arg) {
if(arg.index === 0) {
return "< 0.5%";
}
else if(arg.index === 5) {
return "> 3%";
}
else {
return arg.start + "% to " + arg.end + "%";
}
}
function vectorMap_markersLegend_customizeText(arg) {
return ["< 8000K", "8000K to 10000K", "> 10000K"][arg.index];
}
function vectorMap_customizeItems(items) {
return items.reverse();
}
</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 AreaWithLabelsAndTwoLegends() {
return View();
}
[HttpGet]
public ContentResult GetAreaWithLabelsAndTwoLegendsData() {
return Content(JsonSerializer.Serialize(SampleData.AreaMarkers), "application/json");
}
}
}
using System.Collections.Generic;
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly object AreaMarkers = new[] {
new {
type = "FeatureCollection",
features = new[] {
new {
coordinates = new[] { -74, 40.7 },
text = "New York City",
value = 8406
},
new {
coordinates = new[] { 100.47, 13.75 },
text = "Bangkok",
value = 8281
},
new {
coordinates = new[] { 37.62, 55.75 },
text = "Moscow",
value = 12111
},
new {
coordinates = new[] { 121.5, 31.2 },
text = "Shanghai",
value = 24150
},
new {
coordinates = new[] { -43.18, -22.9 },
text = "Rio de Janeiro",
value = 6429
},
new {
coordinates = new[] { 31.23, 30.05 },
text = "Cairo",
value = 8922
},
new {
coordinates = new[] { 28.95, 41 },
text = "Istanbul",
value = 14160
},
new {
coordinates = new[] { 127, 37.55 },
text = "Seoul",
value = 10388
},
new {
coordinates = new[] { 139.68, 35.68 },
text = "Tokyo",
value = 9071
},
new {
coordinates = new[] { 103.83, 1.28 },
text = "Singapore",
value = 5399
},
new {
coordinates = new[] { 30.3, 59.95 },
text = "Saint Petersburg",
value = 5131
},
new {
coordinates = new[] { 28.03, -26.2 },
text = "Johannesburg",
value = 4434
},
new {
coordinates = new[] { 144.95, -37.8 },
text = "Melbourne",
value = 4252
}
}
}
};
}
}
var areaPopulations = {
"China": 19,
"India": 17.4,
"United States": 4.44,
"Indonesia": 3.45,
"Brazil": 2.83,
"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,
"Turkey": 1.07,
"Democratic Republic of the Congo": 0.94,
"France": 0.92,
"Thailand": 0.9,
"United Kingdom": 0.89,
"Italy": 0.85,
"Burma": 0.84,
"South Africa": 0.74,
"South 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,
"Morocco": 0.46,
"Uzbekistan": 0.43
};
#vector-map {
height: 700px;
}