ColorMapping used to customize the shape colors based given values. It has two types, one range color mapping and equal color mapping.
Range color mapping applied by the mapped value is numeric and with in the given color mapping ranges provided in the dataSource.Bind the population_density value to layer dataSource and specify the colorValuePath as ‘density’ to map the range value for shapes. Refer the code snippet below.
var map = new ej.maps.Maps({
legendSettings:{
visible:true,
},
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)'
}
]
}
}]
}, '#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="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Equal color mapping used to apply color mapping if the mapped value is string. Following example demonstrate the permanent and non-permanent countries in the UN security council, in 2017. Refer the below dataSource.
Bind the unCountries data to the layer dataSource property and set the shapeSettings colorValuePath as ‘Membership’ and set the colorMapping values to that. Refer the below code snippet.
var map = new ej.maps.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="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Desaturation color mapping is used to apply colors with opacity to shapes based on the given values for the [minOpacity] and [maxOpacity] properties in the map control.Bind the population_density value to layer dataSource layer,and then specify the colorValuePath as ‘density’ to map the range value for shapes. Refer the following code examples for more details.
var map = new ej.maps.Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
legendSettings:{
visible: true
},
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
}
]
}
}]
}, '#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="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Multiple colors are used as gradient effect to the specific shapes based on the ranges in the datasource.
By using color API, you can set n number of colors.Bind the population_density value to layer dataSource and specify the colorValuePath as ‘density’ to map the range value for shapes. Refer to the following the code sample for more details.
var map = new ej.maps.Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
legendSettings:{
visible: true
},
shapeSettings: {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: ['red','blue']
},
{
from: 101, to: 200, color: ['green','yellow']
}
]
}
}]
}, '#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="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>You will map the colors to the shapes based on the ranges or values in the data source records may have been excluded from the color mapping configuration, in which case you may also add the color for excluded items. In following code example, You have added color mapping for the ranges from 0 to 200. If we have any records in the data source beyond this range, color mapping will not be applied. To apply the color for these excluded items, set color value in the colorMapping with out range or value.
var map = new ej.maps.Maps({
layers: [{
shapeData: world_map,
shapeDataPath: 'name',
shapePropertyPath: 'name',
dataSource: Population_Density,
legendSettings:{
visible: true
},
shapeSettings: {
colorValuePath: 'density',
colorMapping: [
{
from: 0, to: 100, color: 'skyblue',
},
{
from: 101, to: 200, color: 'blue',
},
{
color: 'green'
}
]
}
}]
}, '#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="world-map.js"></script>
<script src="usa.js"></script>
<script src="data.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="africa_continent.js"></script>
<script src="africa.js"></script>
<script src="cluster.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#C5494B;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#4C134F;stop-opacity:1"></stop>
</linearGradient>
</defs>
</svg>
<!-- annotation content -->
<div id="maps-annotation" style="display: none;">
<div id="annotation">
<div>
<p style="margin-left:10px;font-size:13px;font-weight:500">Facts about Africa</p>
</div>
<hr style="margin-top:-3px;margin-bottom:10px;border:0.5px solid #DDDDDD">
<div>
<ul style="list-style-type:disc; margin-left:-20px;margin-bottom:2px; font-weight:400">
<li>Africa is the second largest and second most populated continent in the world.</li>
<li style="padding-top:5px;">Africa has 54 sovereign states and 10 non-sovereign territories.</li>
<li style="padding-top:5px;">Algeria is the largest country in Africa, where as Mayotte is the smallest.</li>
</ul>
</div>
</div>
</div>
<style>
#annotation {
color: #DDDDDD;
font-size: 12px;
font-family: Roboto;
background: #3E464C;
margin: 20px;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 300px;
-moz-box-shadow: 0px 2px 5px #666;
-webkit-box-shadow: 0px 2px 5px #666;
box-shadow: 0px 2px 5px #666;
}
.country-label {
color: white;
font-size: 25px;
}
</style>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Refer the API for Color Mapping feature.