How to fill colors in the United States map
How to fill colors in the United States map?
The maps can be filled with the desired color to indicate certain information or to enhance 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');
Refer to the working sample for additional details and implementation: 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');
Refer to the working sample for additional details and implementation: Autofill
Palette
Apply your own custom palette color for shapes by using the palette property in the 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 screenshot below shows the output of the code snippet above.
Refer to the working sample for additional details and implementation: Palette
Colors from data source
Set the 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');
Refer to the working sample for additional details and implementation: Maps ColorValuePath
Color mapping
Customize the color of the shapes based on the 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' properties 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 screenshot below shows the output of the above code snippet.
Refer to the working sample for additional details and implementation: 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');
Refer to the working sample for additional details and implementation: Equal color mapping
Desaturation color mapping
The desaturation color mapping is applied when the mapped value is numeric or a string. If the mapped value is numeric, then the color will be applied to the shapes based on the range given in the 'from' and 'to' properties in colorMapping. If 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');
Refer to the working sample for additional details and implementation: 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');
Refer to the working sample for additional details and implementation: Shape rendering event
