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

​x
 
@(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>​

xxxxxxxxxx
 
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;        }    }}

xxxxxxxxxx
 
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                    }                }            }        };    }}​

xxxxxxxxxx
 
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};

xxxxxxxxxx
 
#vector-map {    height: 700px;}​