How can I help you?
Color mapping in React Maps component
6 Feb 202624 minutes to read
Color mapping customizes shape colors based on data values. It supports three primary types: range, equal, and desaturation. To apply color mapping, bind data to the dataSource property of layerSettings and set the colorValuePath property in shapeSettings to specify which field controls the color value.
Types of color mapping
Each color mapping type serves different data visualization needs. Select the appropriate type based on the nature of the data being displayed.
Range color mapping
Range color mapping assigns colors to shapes based on numeric value ranges. Use the from and to properties in the colorMapping to define the ranges and their corresponding colors.
export let population_density = [
https://ej2.syncfusion.com/react/documentation.
{
'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
}
...
];Set the population_density data as the dataSource property of layerSettings and set the colorValuePath property of shapeSettings as density. Create color mappings by specifying from and to value ranges in colorMapping.
import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective 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)'
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective 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)'
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Equal color mapping
Equal color mapping assigns colors to shapes when a data value matches a specified value property in colorMapping. This approach is useful for categorical or discrete data. The following example demonstrates equal color mapping with the unCountries dataset, which categorizes UN Security Council members as permanent or non-permanent.
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' },
];Set unCountries as the dataSource property of layerSettings and set the colorValuePath property of shapeSettings to Membership. In colorMapping, specify value entries for Permanent and Non-Permanent, each with an assigned color. When a shape’s field value matches a [value] (https://ej2.syncfusion.com/react/documentation/api/maps/colorMappingSettingsModel#value) entry, the corresponding color is applied.
import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name'
dataSource={uncountries}
shapeSettings={ {
fill: '#E5E5E5',
colorMapping: [
{
value: 'Permanent',
color: '#EDB46F'
},
{
color: '#F1931B',
value: 'Non-Permanent'
}
],
colorValuePath: 'Membership'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { uncountries } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='Country' shapePropertyPath='name'
dataSource={uncountries}
shapeSettings={ {
fill: '#E5E5E5',
colorMapping: [
{
value: 'Permanent',
color: '#EDB46F'
},
{
color: '#F1931B',
value: 'Non-Permanent'
}
],
colorValuePath: 'Membership'
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Desaturation color mapping
Desaturation color mapping varies opacity across a numeric range, similar to range color mapping. The minOpacity and maxOpacity properties in colorMapping control the opacity gradient.
The following example shows how to apply desaturation color mapping to the shapes with the data source population_density that is available in the Range color mapping section.
Bind the population_density data to the dataSource property of layerSettings and set the colorValuePath property of shapeSettings as density. The range values can be set using the from and to properties of colorMapping.
import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='name' shapePropertyPath='name'
dataSource={population_density}
shapeSettings={ {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'rgb(153,174,214)',
minOpacity: 0.2, maxOpacity: 1
},
{
from: 101, to: 260, color: 'rgb(115,143,199)',
minOpacity: 0.3, maxOpacity: 1
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='name' shapePropertyPath='name'
dataSource={population_density}
shapeSettings={ {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'rgb(153,174,214)',
minOpacity: 0.2, maxOpacity: 1
},
{
from: 101, to: 260, color: 'rgb(115,143,199)',
minOpacity: 0.3, maxOpacity: 1
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Multiple colors for a single shape
Multiple colors create a gradient effect across a range. Use the color property of colorMapping, to specify multiple color stops for a smooth gradient transition.
The following example demonstrates how to use multiple colors in color mapping with the data source population_density that is available in the Range color mapping section.
Bind the population_density data to the dataSource property of layerSettings and set the colorValuePath property of shapeSettings as density. The range values can be set using the from and to properties of colorMapping.
import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='name' shapePropertyPath='name'
dataSource={population_density}
shapeSettings={ {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: ['red','blue']
},
{
from: 101, to: 260, color: ['green','yellow']
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath='name' shapePropertyPath='name'
dataSource={population_density}
shapeSettings={ {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: ['red','blue']
},
{
from: 101, to: 260, color: ['green','yellow']
}
]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);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 with the data source population_density that is available in the Range color mapping section.
In the following example, color mapping is added for the ranges from 0 to 200. If there are any records in the data source that are outside of 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 { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective 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'
} ]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import { population_density } from 'data.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<LayersDirective>
<LayerDirective 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'
} ]
} }>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Color mapping for bubbles
Range, equal, and desaturation color mapping apply to bubble layers as well. Configure bubble color mapping by setting the dataSource property of bubbleSettings and specifying the colorValuePath field. Apply colorMapping within bubbleSettings to control bubble colors. Gradient and fallback colors work identically for bubbles as for shapes.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Bubble]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true} valuePath="population" dataSource={[
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }]}
minRadius={5} colorValuePath= "population" colorMapping={[
{ value: '38332521', color: '#C3E6ED' },
{ value: '19651127', color: '#F1931B' },
{ value: '3090416', color: 'blue'}]}/>
</BubblesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject } from '@syncfusion/ej2-react-maps';
import { BubblesDirective, BubbleDirective, Bubble } from '@syncfusion/ej2-react-maps';
export function App() {
return(
<MapsComponent >
<Inject services={[Bubble]}/>
<LayersDirective>
<LayerDirective shapeData={world_map} shapeDataPath="name" shapePropertyPath="name">
<BubblesDirective>
<BubbleDirective visible={true} valuePath="population" dataSource={[
{ name: 'India', population: '38332521' },
{ name: 'New Zealand', population: '19651127' },
{ name: 'Pakistan', population: '3090416' }]}
minRadius={5} colorValuePath= "population" colorMapping={[
{ value: '38332521', color: '#C3E6ED' },
{ value: '19651127', color: '#F1931B' },
{ value: '3090416', color: 'blue'}]}/>
</BubblesDirective>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);