Your search did not match any results.

Vector Map - Bubble Markers

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 property.

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("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 System.Text.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(JsonSerializer.Serialize(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; }