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.

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