Search results

ColorMapping in ASP.NET MVC Maps control

ColorMapping used to customize the shape colors based on given values. It has three types: range color mapping, equal color mapping and desaturation 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

You will map the colors to the shapes based on the ranges or values in the data source records may have been excluded from the color mapping configuration, in which case you may also add the color for excluded items.

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

In following code example, You have added color mapping for the ranges from 0 to 200. If we have any records in the data source beyond this range, color mapping will not be applied. To apply the color for these excluded items, set color value in the colorMapping with out range or value.

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.