Your search did not match any results.
VectorMap

Bubble Markers

Documentation
This example demonstrates how you can flag specific locations on the VectorMap using markers of the "bubble" type. Marker size depends upon the attribute specified by the dataField option.
@(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 .Mvc() .Controller("VectorMap") .LoadAction("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 }); }) .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") ) .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]; } </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 { 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; width: 100%; display: block; }