@(Html.DevExtreme().VectorMap()
.ID("vector-map")
.Layers(layers => {
layers.Add()
.DataSource(new JS("DevExpress.viz.map.sources.world"))
.HoverEnabled(false);
layers.Add()
.Name("bubbles")
.DataSource(d => d.StaticJson().Url(Url.Action("GetBubbleMarkers")))
.DataSourceOptions(dso => dso.Map("vectorMap_bubblesLayer_dataSource_map"))
.ElementType(VectorMapMarkerType.Bubble)
.DataField("value")
.MinSize(20)
.MaxSize(40)
.SizeGroups(new double[] { 0, 8000, 10000, 50000 })
.Opacity(0.8);
})
.Tooltip(t => t
.Enabled(true)
.CustomizeTooltip("vectorMap_customizeTooltip")
)
.Legends(l => l.Add()
.Source(s => s
.Layer("bubbles")
.Grouping("size")
)
.MarkerShape(VectorMapMarkerShape.Circle)
.CustomizeText("vectorMap_bubblesLegend_customizeText")
.CustomizeItems("vectorMap_bubblesLegend_customizeItems")
)
.Bounds(new double[] { -180, 85, 180, -60 })
)
<script>
function vectorMap_bubblesLayer_dataSource_map(item) {
item.features = $.map(item.features,
function(data) {
return {
type: "Feature",
geometry: {
type: "Point",
coordinates: data.coordinates
},
properties: {
text: data.text,
value: data.value,
tooltip: "<b>"+data.text+"</b>\n"+data.value+"K"
}
};
}
);
return item;
}
function vectorMap_customizeTooltip(arg) {
if(arg.layer.type === "marker") {
return { text: arg.attribute("tooltip") };
}
}
function vectorMap_bubblesLegend_customizeText(arg) {
return ["< 8000K", "8000K to 10000K", "> 10000K"][arg.index];
}
function vectorMap_bubblesLegend_customizeItems(items) {
return items.reverse();
}
</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 BubbleMarkers() {
return View();
}
[HttpGet]
public ContentResult GetBubbleMarkers() {
return Content(JsonConvert.SerializeObject(SampleData.BubbleMarkers), "application/json");
}
}
}
namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static readonly object BubbleMarkers = 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[] { 44.43, 33.33 },
text = "Baghdad",
value = 7181
},
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
}
}
}
};
}
}
#vector-map {
height: 440px;
}