Vector Map - Palette

This demo shows how to color specific map areas using a palette. In the VectorMap component, a palette defines a range of colors that are used to paint areas. This range is divided into segments using the value assigned to the colorGroups property. Each segment contributes a color into an array of colors.

The map in this demo represents the top 40 countries by population. Map areas are colored according to the percentage of population.

Backend API

​x
 
@(Html.DevExtreme().VectorMap()    .ID("vector-map")    .Bounds(new double[] { -180, 85, 180, -60 })    .Layers(l => l.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")        .Customize("vectorMap_areasLayer_customize")    )    .Legends(l => l.Add()        .Source(s => s            .Layer("areas")            .Grouping("color")        )        .CustomizeText("vectorMap_areasLegend_customizeText")    )    .Tooltip(t => t        .Enabled(true)        .CustomizeTooltip("vectorMap_customizeTooltip")    ))​<script src="~/data/populations.js"></script><script>    function vectorMap_areasLayer_customize(elements) {        $.each(elements, function(_, element) {            element.attribute("population", populations[element.attribute("name")]);        });    }​    function vectorMap_areasLegend_customizeText(arg) {        var text;        if(arg.index === 0) {            text = "< 0.5%";        }        else if(arg.index === 5) {            text = "> 3%";        }        else {            text = arg.start + "% to " + arg.end + "%";        }        return text;    }​    function vectorMap_customizeTooltip(arg) {        if(arg.attribute("population")) {            return { text: arg.attribute("name") + ": " + arg.attribute("population") + "% of world population" };        }    }</script>​

xxxxxxxxxx
 
using Microsoft.AspNetCore.Mvc;using DevExtreme.NETCore.Demos.Models.SampleData;​namespace DevExtreme.NETCore.Demos.Controllers {    public class VectorMapController : Controller {        public ActionResult Palette() {            return View();        }    }}

xxxxxxxxxx
 
var populations = {    "China": 19,    "India": 17.4,    "United States": 4.44,    "Indonesia": 3.45,    "Brazil": 2.83,    "Pakistan": 2.62,    "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,    "Iran": 1.08,    "Turkey": 1.07,    "Congo (Kinshasa)": 0.94,    "France": 0.92,    "Thailand": 0.9,    "United Kingdom": 0.89,    "Italy": 0.85,    "Burma": 0.84,    "South Africa": 0.74,    "S. 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,    "Iraq": 0.47,    "Morocco": 0.46,    "Uzbekistan": 0.43};

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