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 Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult BubbleMarkers() { return View(); } [HttpGet] public object GetBubbleMarkers() { return SampleData.BubbleMarkers; } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<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; }