Your search did not match any results.

Vector Map - Legend

The VectorMap component allows you to use color and size indicators to better illustrate the values associated with areas/markers. Use map legends to provide additional information on colors and marker size.

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