How to fill colors in the United States map
How to fill colors in the United States map?
The maps can be filled with desired color to indicate certain information or to elevate the appearance. Here we are rendering the United States map and filling it. The maps can be filled with the following various options.
- Fill
- Autofill
- Palette
- Color from data source
- Color mapping
- ShapeRendering event
Fill
Apply the fill color to the shapes of the United States map, you can use the fill property in shapeSettings.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
shapeSettings: {
fill: 'skyblue'
}
//..
}
]
});
maps.appendTo('#container');
Sample link - Maps fill
Autofill
Apply a set of colors randomly to the shapes in the United States map, using the autofill property in shapeSettings.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
shapeSettings: {
autofill: true
}
//..
}
]
});
maps.appendTo('#container');
Sample link - Autofill
Palette
Apply your own custom palette color for shapes by using the palette property in shapeSettings property.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
shapeSettings: {
autofill: true,
palette: ["#C33764", "#AB3566", "#993367", "#853169", "#742F6A"]
}
//..
}
]
});
maps.appendTo('#container');
The below screenshot shows the output of the above code snippet.
Sample link - Palette
Colors from data source
Set color for each shape from the data source and bind the color name of the field in the data source to the colorValuePath property in shapeSettings.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [{
shapeData: usa,
dataSource: [
{
'name': 'New York',
'density': 119,
'color': 'red'
},
{
'name': 'Montana',
'density': 111,
'color': 'blue'
},
{
'name': 'North Dakota',
'density': 15,
'color': 'green'
}],
shapeSettings: {
colorValuePath: 'color'
}
}]
});
maps.appendTo('#element');
Sample link - Maps ColorValuePath
Color mapping
Customize the color of the shapes based on given values. There are three color mapping options.
- Range color mapping
- Equal color mapping
- Desaturation color mapping
Range color mapping
The range color mapping applied by the mapped value is numeric and is provided in the
data source color mapping ranges. Color is applied to the shapes based on the range given in the from and to property in colorMapping.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [{
shapeData: usa,
dataSource: [
{
'name': 'New York',
'density': 10
},
{
'name': 'Montana',
'density': 20
},
{
'name': 'North Dakota',
'density': 15
},
],
shapeDataPath: 'name',
shapePropertyPath: 'name',
shapeSettings: {
colorValuePath: 'density',
fill: '#ffb3b3',
colorMapping: [
{
from: 1, to: 14, color: '#ff4d4d'
},
{
from: 15, to: 25, color: '#ff8080'
}
]
}
}]
});
maps.appendTo('#element');
The below screenshot shows the output of the above code snippet.
Sample link - Range color mapping
Equal color mapping
If the mapped value is a string and is provided in the data source, the equal color mapping will be applied. Color is applied to the shapes based on the value property in colorMapping. In the value property, the specific string is mapped, and the color is applied based on the matched string present in the given data source.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
dataSource: [
{ States: 'Washington', Membership: 'Permanent' },
{ States: 'Montana', Membership: 'Permanent' },
{ States: 'North Dakota', Membership: 'Permanent' },
{ States: 'Oregon', Membership: 'Permanent' },
{ States: 'South Dakota', Membership: 'Permanent' },
{ States: 'Nebraska', Membership: 'Non-Permanent' },
{ States: 'Nevada', Membership: 'Non-Permanent' },
{ States: 'New Hampshire', Membership: 'Non-Permanent' },
{ States: "New Jersey", Membership: 'Permanent' },
{ States: 'New Mexico', Membership: 'Non-Permanent' },
{ States: 'Kuwait', Membership: 'Non-Permanent' },
{ States: 'New York', Membership: 'Non-Permanent' },
{ States: 'North Carolina', Membership: 'Non-Permanent' },
{ States: 'Ohio', Membership: 'Non-Permanent' },
{ States: 'Oklahoma', Membership: 'Non-Permanent' },
],
shapeDataPath: 'States',
shapePropertyPath: 'name',
shapeSettings: {
colorValuePath: 'Membership',
fill: '#F8C295',
colorMapping: [
{
value: 'Permanent',
color: '#C3E6ED'
},
{
color: '#F1931B',
value: 'Non-Permanent'
}
]
}
}]
});
maps.appendTo('#element');
Sample link - Equal color mapping
Desaturation color mapping
The desaturation color mapping is applied by the mapped value is numeric or string. The mapped value is numeric, then the color will be applied to the shapes based on the range given in the from and to property in colorMapping. The mapped value is a string, then the color is applied based on the value property in colorMapping. MinOpacity and MaxOpacity are set to the applied color for the specified numeric or string values.
import { Maps } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
layers: [
{
shapeData: usa,
dataSource: [
{
'name': 'New York',
'density': 10
},
{
'name': 'Montana',
'density': 20
},
{
'name': 'North Dakota',
'density': 15
},
],
shapeDataPath: 'name',
shapePropertyPath: 'name',
shapeSettings: {
colorValuePath: 'density',
fill: '#ffb3b3',
colorMapping: [
{
from: 1, to: 14, color: '#ff4d4d', minOpacity: 0.25, maxOpacity: 1
},
{
from: 15, to: 25, color: '#ff8080', minOpacity: 0.75, maxOpacity: 1
}
]
}
}]
});
maps.appendTo('#element');
Sample link - Desaturation color mapping
ShapeRendering event
The color of the map shapes can be customized using the shapeRendering event.
import { Maps, IShapeRenderingEventArgs } from '@syncfusion/ej2-maps';
import { usa } from './usa_map';
let maps: Maps = new Maps({
shapeRendering: (args: IShapeRenderingEventArgs) => {
args.fill = '#c2c2a3';
},
layers: [
{
shapeData: usa,
shapeSettings: {
fill: 'skyblue'
}
}
]
});
maps.appendTo('#container');
Sample link - Shape rendering event
