Your search did not match any results.
VectorMap

Area with Labels and Two Legends

Documentation

The VectorMap widget 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.

@(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 }) .Label(l => l.Enabled(false)); }) .Tooltip(t => t .Enabled(true) .CustomizeTooltip("vectorMap_customizeTooltip") ) .Legends(legends => { legends.Add() .Source(s => s .Layer("areas") .Grouping("color") ) .HorizontalAlignment(HorizontalAlignment.Left) .VerticalAlignment(VerticalEdge.Bottom) .CustomizeText("vectorMap_areasLegend_customizeText"); legends.Add() .Source(s => s .Layer("markers") .Grouping("size") ) .MarkerShape(VectorMapMarkerShape.Circle) .HorizontalAlignment(HorizontalAlignment.Left) .VerticalAlignment(VerticalEdge.Bottom) .CustomizeText("vectorMap_markersLegend_customizeText"); }) .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]; } </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 ContentResult GetAreaWithLabelsAndTwoLegendsData() { return Content(JsonConvert.SerializeObject(SampleData.AreaMarkers), "application/json"); } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly 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; width: 100%; display: block; }