Your search did not match any results.

Area with Labels and Two Legends

Documentation

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; using Newtonsoft.Json; namespace DevExtreme.NETCore.Demos.Controllers { public class VectorMapController : Controller { public ActionResult AreaWithLabelsAndTwoLegends() { 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; }