How can I help you?
Customization in EJ2 TypeScript Maps component
6 Feb 202624 minutes to read
The Maps component provides extensive customization options to control its appearance, layout, and visual presentation. This includes configuring dimensions, titles, themes, colors, shapes, and projection types to create tailored map visualizations that meet specific application requirements.
Setting the size for Maps
The width and height of the Maps can be set using the width and height properties in Maps. Both percentage and pixel values are supported for the height and width values. Percentage values enable responsive sizing relative to the parent container, while pixel values provide fixed dimensions.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
height: '200px',
width: '500px',
layers: [{
shapeData: world_map,
shapeSettings: {
autofill: true
}
}]
});
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="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>Configuring Maps title
The title for the Maps can be set using the titleSettings. The title helps provide context and description for the map visualization. It can be customized using the following properties.
- alignment - To customize the alignment for the text in the title for the Maps. The possible values can be Center, Near and Far.
- description - To set the description of the title in Maps.
- text - To set the text for the title in Maps.
- textStyle - To customize the text of the title in Maps.
- subtitleSettings - To customize the subtitle for the Maps.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
titleSettings: {
text: 'Maps Control',
textStyle: {
color: 'red',
fontStyle: 'italic',
fontWeight: 'regular',
fontFamily: 'arial',
size: '14px'
},
alignment: 'Center'
},
layers: [{
shapeData: world_map,
shapeSettings: {
autofill: true
}
}]
});
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="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>Setting theme
The Maps component supports the following themes to match different application design systems and accessibility requirements.
- Material
- Fabric
- Bootstrap
- HighContrast
- MaterialDark
- FabricDark
- BootstrapDark
- Bootstrap4
- HighContrastLight
By default, the Maps are rendered with the Material theme. The theme of the Maps component can be changed using the theme property.
import { Maps, MapsTheme } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeSettings: {
autofill: true,
}
}]
});
map.appendTo('#container');
document.getElementById('theme').onchange = () => {
var value = (<HTMLInputElement>document.getElementById('theme')).value;
map.theme= <MapsTheme>value;
map.refresh();
}<!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="systemjs.config.js"></script>
<script src="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div class="col-lg-9 control-section">
<div id="container" align="center"></div>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tbody><tr style="height: 50px">
<td style="width: 60%">
<div>Projection Type</div>
</td>
<td style="width: 40%;">
<select name="theme" id="theme" style="margin-left: -25px">
<option value="Material">Material</option>
<option value="Fabric">Fabric</option>
<option value="Bootstrap">Bootstrap</option>
<option value="Highcontrast">Highcontrast</option>
<option value="MaterialDark">MaterialDark</option>
<option value="FabricDark">FabricDark</option>
<option value="BootstrapDark">BootstrapDark</option>
<option value="Bootstrap4">Bootstrap4</option>
</select>
</td>
</tr>
</tbody></table>
</div>
</body>
</html>Customizing Maps container
The following properties are available to customize the container in the Maps.
- background - To apply the background color to the container in the Maps.
- border - To customize the color, width and opacity of the border of the Maps.
- margin - To customize the margins of the Maps.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
background: '#CCD1D1',
border: {
color: 'green',
width: 2
},
margin: {
bottom: 10,
left: 20,
right: 20,
top: 10
},
layers: [{
shapeData: world_map,
shapeSettings: {
autofill: true
}
}]
});
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="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>Customizing Maps area
By default, the background color of the shape maps is set as white. To modify the background color of the Maps area, use the background property in the mapsArea. The border of the Maps area can be customized using the border property in the mapsArea.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
mapsArea: {
background: '#CCD1D1',
border: {
width: 2,
color: 'green'
}
},
layers: [{
shapeData: world_map,
shapeSettings: {
autofill: true
}
}]
});
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="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>Customizing the shapes
The following properties are available in the shapeSettings to customize the appearance of shapes in the Maps component.
- fill - To apply the color to the shapes.
- autofill - To apply the palette colors to the shapes if it is set as true.
- palette - To set the custom palette for the shapes.
- border - To customize the color, width and opacity of the border of the shapes.
- dashArray - To define the pattern of dashes and gaps that is applied to the outline of the shapes.
- opacity - To customize the transparency for the shapes.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapeSettings: {
autofill: true,
palette: ['#33CCFF', '#FF0000', '#800000', '#FFFF00', '#808000'],
border: {
color: 'green',
width: 2
},
dashArray: '1',
opacity: 0.9
}
}]
});
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="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>Setting color to the shapes from the data source
Individual colors can be assigned to each shape based on data source values, enabling dynamic color coding of map regions. The color for each shape in the Maps can be set using the colorValuePath property of shapeSettings. The value for the colorValuePath property is the field name from the data source of the shapeSettings which contains the color values.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapePropertyPath: 'continent',
shapeDataPath: 'continent',
dataSource: [
{ continent: "North America", color: '#71B081' },
{ continent: "South America", color: '#5A9A77' },
{ continent: "Africa", color: '#498770' },
{ continent: "Europe", color: '#39776C' },
{ continent: "Asia", color: '#266665' },
{ continent: "Oceania", color: '#124F5E' }
],
shapeSettings: {
colorValuePath: 'color'
}
}]
});
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="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>Applying border to individual shapes
The border of each shape in the Maps can be customized using the borderColorValuePath and borderWidthValuePath properties to modify the color and width of the border respectively. The field name in the data source of the layer which contains the color and width values must be set in the borderColorValuePath and borderWidthValuePath properties. If the values of borderWidthValuePath and borderColorValuePath do not match with the field name from the data source, then the color and width of the border will be applied to the shapes using the border property in the shapeSettings.
import { Maps } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
let map: Maps = new Maps({
layers: [{
shapeData: world_map,
shapePropertyPath: 'continent',
shapeDataPath: 'continent',
dataSource: [
{ continent: "North America", color: '#71B081', borderColor: '#CCFFE5', width: 2 },
{ continent: "South America", color: '#5A9A77', borderColor: 'red', width: 2 },
{ continent: "Africa", color: '#498770', borderColor: '#FFCC99', width: 2 },
{ continent: "Europe", color: '#39776C', borderColor: '#66B2FF', width: 2 },
{ continent: "Asia", color: '#266665', borderColor: '#999900', width: 2 },
{ continent: "Oceania", color: '#124F5E', borderColor: 'blue', width: 2 }
],
shapeSettings: {
borderColorValuePath: 'borderColor',
borderWidthValuePath: 'width',
colorValuePath: 'color'
}
}]
});
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="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>Projection type
The Maps component supports the following projection types to display geographic data in different coordinate systems:
- Mercator
- Equirectangular
- Miller
- Eckert3
- Eckert5
- Eckert6
- Winkel3
- AitOff
By default, the Maps are rendered with the Mercator projection type in which the Maps are rendered based on geographic coordinates without distortion in shape. To change the type of projection in the Maps, use the projectionType property.
import { Maps, ProjectionType } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
import { projectionData } from './projection-data.ts';
let map: Maps = new Maps({
projectionType: 'Mercator',
layers: [{
shapeData: world_map,
shapeDataPath: 'Country',
shapePropertyPath: 'name',
dataSource: projectionData,
tooltipSettings: {
visible: true,
valuePath: 'Country',
},
shapeSettings: {
fill: '#E5E5E5',
colorMapping: [
{
value: 'Permanent',
color: '#EDB46F'
},
{
color: '#F1931B',
value: 'Non-Permanent'
}
],
colorValuePath: 'Membership'
}
}]
});
map.appendTo('#container');
document.getElementById('projectiontype').onchange = function(){
let ele: HTMLSelectElement = (<HTMLSelectElement>document.getElementById('projectiontype'))
map.projectionType = <ProjectionType>ele.value;
map.refresh();
}<!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="systemjs.config.js"></script>
<script src="projection-data.js"></script>
<script src="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div class="col-lg-9 control-section">
<div id="container" align="center"></div>
</div>
<div class="col-lg-3 property-section">
<table id="property" title="Properties" style="width: 100%">
<tbody><tr style="height: 50px">
<td style="width: 60%">
<div>Projection Type</div>
</td>
<td style="width: 40%;">
<select name="projectionType" id="projectiontype" style="margin-left: -25px">
<option value="Mercator">Mercator</option>
<option value="Equirectangular">Equirectangular</option>
<option value="Miller">Miller</option>
<option value="Eckert3">Eckert3</option>
<option value="Eckert5">Eckert5</option>
<option value="Eckert6">Eckert6</option>
<option value="Winkel3">Winkel3</option>
<option value="AitOff">AitOff</option>
</select>
</td>
</tr>
</tbody></table>
</div>
</body>
</html>