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.
@(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 Newtonsoft.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 };
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; }