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.DataSource(ViewBag.populationData).ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").ShapeSettings(new
    {
        colorValuePath = "density",
        fill = "#E5E5E5",
        colorMapping = new object[]{
                new {from = 0.00001, to = 100, color = "rgb(153,174,214)"},
                new {from = 100, to = 200, color = "rgb(115,143,199)"},
                new {from = 200, to = 300, color = "rgb(77,112,184)"},
                new {from = 300, to = 500, color = "rgb(38,82,168)"},
                new {from = 500, to = 19000, color = "rgb(0,51,153)"}
          }
    }).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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.usmap = GetUSMap();
            ViewBag.populationData = GetPopulationData();
            return View();
        }
        public object GetUSMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/USA.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.DataSource(ViewBag.unCountries).ShapeData(ViewBag.worldmap).ShapeDataPath("Country").ShapePropertyPath("name").ShapeSettings(new
    {
        colorValuePath = "Membership",
        fill = "#E5E5E5",
        colorMapping = new[] {
        new {color = "#EDB46F",value= "Permanent" },
        new {color= "#F1931B", value = "Non-Permanent" }
        }
    }).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.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.unCountries = GetUnCountries();
            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);
        }
    }
}

Refer the API for Color Mapping feature.