Your search did not match any results.
Vector Map

Palette

Documentation
This demo shows how to color specific map areas using a palette. In the VectorMap widget, 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 option. 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.
<script> var populations = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); </script> @(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(@<text> function(elements) { $.each(elements, function (_, element) { element.attribute("population", populations[element.attribute("name")]); }); } </text>); }) .Legends(l => { l.Add().Source(s => s.Layer("areas").Grouping("color")) .CustomizeText(@<text> function(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; } </text>); }) .Tooltip(t => t.Enabled(true) .CustomizeTooltip((@<text> function(arg) { if(arg.attribute("population")) { return { text: arg.attribute("name") + ": " + arg.attribute("population") + "% of world population" }; } } </text>)) ) )
using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class VectorMapController : Controller { public ActionResult Palette() { return View(SampleData.PopulationsData); } } }
using System.Collections.Generic; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public static Dictionary<string, double> PopulationsData = new Dictionary<string, double>() { { "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; width: 100%; display: block; }