Search results

Color mapping

The color mapping feature is used to customize the shape colors based given values. It has two types, range color mapping and equal color mapping.

Range color mapping

The range color mapping is used to apply color mapping if the mapped value is numeric and with in the given color mapping range that provided in the dataSource. Refer to the following dataSource for the population density of some countries.

 [
    ...
    {
        'code': 'AE',
        'value': 90,
        'name': 'United Arab Emirates',
        'population': 8264070,
        'density': 99
    },
    {
        'code': 'GB',
        'value': 257,
        'name': 'United Kingdom',
        'population': 62041708,
        'density': 255
    },
    {
        'code': 'US',
        'value': 34,
        'name': 'United States',
        'population': 325020000,
        'density': 33
    }
    ...
    ];

Bind the populationData value to layer dataSource and specify the colorValuePath to ‘density’ to map the range value for shapes. Refer to the following code sample.

razor
colorvaluepath.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
{
    l.ShapeSettings(ss =>ss.Fill("#E5E5E5").ColorValuePath("density")
    .ColorMapping(ViewBag.colorData)).DataSource(ViewBag.populationData)
    .ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Syncfusion.EJ2;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.populationData = GetPopulationData();
            List<MapsColorMapping> dataColor = new List<MapsColorMapping>
            {
                new MapsColorMapping {From = 0.00001, To = 100, Color = "rgb(153,174,214)"},
                new MapsColorMapping {From = 100, To = 200, Color = "rgb(115,143,199)"},
                new MapsColorMapping {From = 200, To = 300, Color = "rgb(77,112,184)"},
                new MapsColorMapping {From = 300, To = 500, Color = "rgb(38,82,168)"},
                new MapsColorMapping {From = 500, To = 19000, Color = "rgb(0,51,153)"}
            };
            ViewBag.colorData = dataColor;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetPopulationData()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/populationdensity.js");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Equal color mapping

Equal color mapping is used to apply the color mapping if the mapped value is string. The following example demonstrates the permanent and non-permanent countries in the UN security council, in 2017. Refer to the following dataSource.

[
{ Country: 'China', Membership: 'Permanent' },
{ Country: 'France', Membership: 'Permanent' },
{ Country: 'Russia', Membership: 'Permanent' },
{ Country: 'United Kingdom', Membership: 'Permanent' },
{ Country: 'United States', Membership: 'Permanent' },
{ Country: 'Bolivia', Membership: 'Non-Permanent' },
{ Country: 'Eq. Guinea', Membership: 'Non-Permanent' },
{ Country: 'Ethiopia', Membership: 'Non-Permanent' },
{ Country: "Côte d'Ivoire", Membership: 'Permanent' },
{ Country: 'Kazakhstan', Membership: 'Non-Permanent' },
{ Country: 'Kuwait', Membership: 'Non-Permanent' },
{ Country: 'Netherlands', Membership: 'Non-Permanent' },
{ Country: 'Peru', Membership: 'Non-Permanent' },
{ Country: 'Poland', Membership: 'Non-Permanent' },
{ Country: 'Sweden', Membership: 'Non-Permanent' },
]

Bind the unCountries data to the layer of the dataSource property and set the shapeSettings colorValuePath to ‘Membership’ and then set the colorMapping values to that. Refer to the following code sample.

razor
equalcolormapping.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
{
    l.ShapeSettings(ss =>ss.Fill("#E5E5E5").ColorValuePath("Membership")
    .ColorMapping(ViewBag.colorData)).DataSource(ViewBag.unCountries)
    .ShapeData(ViewBag.worldmap).ShapeDataPath("Country").ShapePropertyPath("name").Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.unCountries = GetUnCountries();
            List<MapsColorMapping> dataColor = new List<MapsColorMapping>
            {
                new MapsColorMapping {Color = "#EDB46F",Value= "Permanent" },
                new MapsColorMapping {Color= "#F1931B", Value = "Non-Permanent" }
            };
            ViewBag.colorData = dataColor;
            return View();
        }
        public object GetUnCountries()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/unocontries.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Desaturation color mapping

Desaturation color mapping is used to apply colors with opacity to shapes based on the given values for the [minOpacity] and [maxOpacity] properties in the map control.

 [
    ...
    {
        'code': 'AE',
        'value': 90,
        'name': 'United Arab Emirates',
        'population': 8264070,
        'density': 99
    },
    {
        'code': 'GB',
        'value': 257,
        'name': 'United Kingdom',
        'population': 62041708,
        'density': 255
    },
    {
        'code': 'US',
        'value': 34,
        'name': 'United States',
        'population': 325020000,
        'density': 33
    }
    ...
    ];

Bind the populationData value to layer dataSource and specify the colorValuePath to ‘density’ to map the range value for shapes. Refer to the following code sample.

razor
desaturationcolormapping.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
{
    l.ShapeSettings(ss =>ss.Fill("#E5E5E5").ColorValuePath("density")
    .ColorMapping(ViewBag.colorData)).DataSource(ViewBag.populationData)
    .ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.populationData = GetPopulationData();
            List<MapsColorMapping> dataColor = new List<MapsColorMapping>
            {
                new MapsColorMapping { From = 0, To = 100, MinOpacity = 0.3, MaxOpacity = 1, Color = "rgb(153,174,214)"},
                new MapsColorMapping {From = 101, To = 200, MinOpacity = 0.4, MaxOpacity = 1, Color = "rgb(115,143,199)"}
            };
            ViewBag.colorData = dataColor;
            return View();
        }
        public object GetPopulationData()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/populationdensity.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Desaturation with multiple colors

Multiple colors are used as gradient effect to the specific shapes based on the ranges in the datasource.

By using color API, you can set n number of colors.

The following code example shows how to use multiple colors.

 [
    ...
    {
        'code': 'AE',
        'value': 90,
        'name': 'United Arab Emirates',
        'population': 8264070,
        'density': 99
    },
    {
        'code': 'GB',
        'value': 257,
        'name': 'United Kingdom',
        'population': 62041708,
        'density': 255
    },
    {
        'code': 'US',
        'value': 34,
        'name': 'United States',
        'population': 325020000,
        'density': 33
    }
    ...
    ];

Bind the populationData value to layer dataSource and specify the colorValuePath to ‘density’ to map the range value for shapes. Refer to the following code sample.

razor
desaturationwithmultiplecolors.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
{
    l.ShapeSettings(ss =>ss.Fill("#E5E5E5").ColorValuePath("density")
    .ColorMapping(ViewBag.colorData)).DataSource(ViewBag.populationData)
    .ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.unCountries = GetUnCountries();
            List<MapsColorMapping> dataColor = new List<MapsColorMapping>
            {
                new MapsColorMapping {From = 0, To = 100, Color = new string[] { "red", "blue" } },
                new MapsColorMapping {From = 101, To = 200,  Color = new string[] { "green" , "yellow"} }
            };
            ViewBag.colorData = dataColor;
            return View();
        }
        public object GetUnCountries()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/unocontries.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Color for items excluded from color mapping

Based on the ranges in data source, get the excluded ranges from color mapping, and then apply specific color to the shapes.

The following code example shows how to set the color for items excluded from color mapping.

 [
    ...
    {
        'code': 'AE',
        'value': 90,
        'name': 'United Arab Emirates',
        'population': 8264070,
        'density': 99
    },
    {
        'code': 'GB',
        'value': 257,
        'name': 'United Kingdom',
        'population': 62041708,
        'density': 255
    },
    {
        'code': 'US',
        'value': 34,
        'name': 'United States',
        'population': 325020000,
        'density': 33
    }
    ...
    ];

Bind the populationData value to layer dataSource and specify the colorValuePath to ‘density’ to map the range value for shapes. Refer to the following code sample.

razor
excludedcolormapping.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
{
    l.ShapeSettings(ss =>ss.Fill("#E5E5E5").ColorValuePath("density")
    .ColorMapping(ViewBag.colorData)).DataSource(ViewBag.populationData)
    .ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").Add();
}).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;
using Syncfusion.EJ2;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.populationData = GetPopulationData();
            List<MapsColorMapping> dataColor = new List<MapsColorMapping>
            {
                new MapsColorMapping {From = 0, To = 100, Color = new string[] { "red", "blue" } },
                new MapsColorMapping {From = 101, To = 200,  Color = new string[] { "green" , "yellow"} },
                new MapsColorMapping {  Color = "green"}
            };
            ViewBag.colorData = dataColor;
            return View();
        }
        public object GetPopulationData()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/populationdensity.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Refer the API for Color Mapping feature.