Color mapping in EJ2 TypeScript Maps control
27 Apr 202324 minutes to read
Color mapping is used to customize the shape colors based on given values. It has three types: range color mapping, equal color mapping and desaturation color mapping. To add color mapping to the shapes of the Maps, bind the data source to the dataSource
property of layerSettings
and set the field name which contains the color value in the data source to the colorValuePath
property.
Range color mapping
Range color mapping applies the color to the shapes of the Maps which matches the numeric values in the data source within the given color mapping ranges. The from
and to
properties in the colorMapping
are used to specify the color mapping ranges in the Maps.
Bind the Population_Density data to the dataSource
property of layerSettings
and set the colorValuePath
property of shapeSettings
as density and set the range values using the from
and to
properties of colorMapping
.
export let population_density = [
...
{
'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
}
...
];
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
shapeSettings: {
colorValuePath: 'density',
fill: '#E5E5E5',
colorMapping: [
{
from: 0.00001, to: 100, color: 'rgb(153,174,214)'
},
{
from: 100, to: 200, color: 'rgb(115,143,199)'
},
{
from: 200, to: 300, color: 'rgb(77,112,184)'
},
{
from: 300, to: 500, color: 'rgb(38,82,168)'
},
{
from: 500, to: 19000, color: 'rgb(0,51,153)'
}
]
}
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Equal color mapping
Equal color mapping applies the color to the shapes of the Maps when the value
property of colorMapping
matches with the values provided in the data source.
The following example demonstrates the permanent and non-permanent countries in the UN security council, in 2017. Bind the unCountries data to the dataSource
property of layerSettings
and set the colorValuePath
property of shapeSettings
as Membership and set the value to the value
property in the colorMapping
property. Please find the data source used in the below sample which demonstrates the permanent and non-permanent countries in the UN security council.
export let unCountries: object[] = [
{ 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' },
];
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { unCountries } from './data.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'Country',
shapePropertyPath: 'name',
dataSource : unCountries,
shapeSettings: {
fill: '#E5E5E5',
colorMapping: [
{
value: 'Permanent',
color: '#C3E6ED'
},
{
color: '#F1931B',
value: 'Non-Permanent'
}
],
colorValuePath: 'Membership'
}
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Desaturation color mapping
Desaturation color mapping applies the color to the shapes of the Maps similar to the range color mapping along with the opacity based on the given values for minOpacity
and maxOpacity
properties in the colorMapping
.
The following example shows how to apply desaturation color mapping to shapes. Please refer to the Population_Density data source in the Range color mapping section for the below sample. Bind the Population_Density data to the dataSource
property of layerSettings
and set the colorValuePath
property of shapeSettings
as density and set the range values using the from
and to
properties of colorMapping
. The opacity of the color mapping can be set using the minOpacity
and maxOpacity
properties.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
shapeSettings: {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'red', minOpacity:0.2, maxOpacity:1
},
{
from: 101, to: 200, color: 'blue', minOpacity:0.3, maxOpacity:1
}
]
}
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Desaturation with multiple colors
Multiple colors can be added to the color mapping which can be used as gradient effect to a specific shape based on the ranges in the data source. By using the color
property of colorMapping
, any number of colors can be set to the shapes as a gradient.
The following example demonstrates how to use multiple colors in color mapping. Please refer to the Population_Density data source in the Range color mapping section for the below sample. Bind the Population_Density data to the dataSource
property of layerSettings
property and set the colorValuePath
property of shapeSettings
as density and set the range values using the from
and to
properties of colorMapping
property.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
shapeSettings: {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: ['red','blue']
},
{
from: 101, to: 200, color: ['green','yellow']
}
]
}
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Color for items excluded from color mapping
Color mapping can be applied to the shapes in the Maps which does not match color mapping criteria such as range or equal values using the color
property of colorMapping
.
The following example shows how to set the color for items excluded from the color mapping. Please refer to the Population_Density data source in the Range color mapping section for the below sample. In the following example, color mapping is added for the ranges from 0 to 200. If the data source having any records beyond this range, the color mapping will not be applied. To apply the color for these excluded items, set the color
property alone in the colorMapping
.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { Population_Density } from './data.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
shapeSettings: {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'skyblue',
},
{
from: 101, to: 200, color: 'blue',
},
{
color: 'green'
}
]
}
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>
Color mapping for bubbles
The color mapping types such as range color mapping, equal color mapping and desaturation color mapping are applicable for bubbles in the Maps. To add color mapping for bubbles of the Maps, bind the data source to the dataSource
property of bubbleSettings
and set the field name which contains the color value in the data source to the colorValuePath
.
import { world_map } from './world-map.ts';
import { Maps, Bubble } from '@syncfusion/ej2-maps';
Maps.Inject(Bubble);
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
bubbleSettings: [{
visible: true,
minRadius: 5,
dataSource: [
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }
],
valuePath: 'population',
colorValuePath: 'population',
colorMapping: [{
value: '38332521',
color: '#C3E6ED'
},
{
value: '19651127',
color: '#F1931B'
},
{
value: '3090416',
color: 'blue'}
]
}]
}]
});
map.appendTo('#element');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Maps</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
<link href="index.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="world-map.js"></script>
<script src="usa.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>