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

@(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="~/Scripts/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>

using DevExtreme.MVC.Demos.Models.SampleData; using System.Text.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class VectorMapController : Controller { public ActionResult Palette() { return View(); } } }

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

#vector-map { height: 440px; }