Polygon shape in EJ2 TypeScript Maps control
22 Mar 202424 minutes to read
The Maps control allows you to add polygon shape to a geometry map or an online map by using the properties in the polygons. This section describes how to add polygon shape to the map and customize them.
Adding polygon shape
To render polygon shape in Maps, Polygon module must be injected into the Maps using Maps.Inject(Polygon) method. The polygon shape can be rendered over the map layer by defining the points property in the polygons of the Maps control. The points property uses a collection of latitude and longitude values to define the polygon shape.
The polygons provides the following properties for customizing the polygon shape of the Maps control.
- fill - It is used to change the color of the polygon shape.
- opacity - It is used to change the opacity of the polygon shape.
- borderColor - It is used to change the color of the border in the polygon shape.
- borderWidth - It is used to change the width of the border in the polygon shape.
- borderOpacity - It is used to change the opacity of the border in the polygon shape.
You can also include “n” polygon shapes using the polygons property.
The following example shows how to customize the polygon shape over the geometry map.
import { Maps, Polygon } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Polygon);
let map: Maps = new Maps({
layers: [
{
shapeData: world_map,
polygonSettings: {
polygons: [
{
points: [
{ longitude: 34.88539587371454, latitude: 28.181421087099537 },
{ longitude: 37.50029619722466, latitude: 24.299419888989462 },
{ longitude: 39.22241423764024, latitude: 22.638529461838658 },
{ longitude: 38.95650769309776, latitude: 21.424998160017495 },
{ longitude: 40.19963938650778, latitude: 20.271205391339606 },
{ longitude: 41.76547269134551, latitude: 18.315451049867193 },
{ longitude: 42.78452077838921, latitude: 16.097235052947966 },
{ longitude: 43.36984949591576, latitude: 17.188572054533054 },
{ longitude: 44.12558191797012, latitude: 17.407258102232234 },
{ longitude: 46.69027032797584, latitude: 17.33342243475734 },
{ longitude: 47.09312386141585, latitude: 16.97087769526452 },
{ longitude: 48.3417299826302, latitude: 18.152700711188004 },
{ longitude: 49.74762591400318, latitude: 18.81544363931681 },
{ longitude: 52.41428026336621, latitude: 18.9035706497573 },
{ longitude: 55.272683129240335, latitude: 20.133861012918544 },
{ longitude: 55.60121336079203, latitude: 21.92042703112351 },
{ longitude: 55.08204399107967, latitude: 22.823302662258882 },
{ longitude: 52.743894337844154, latitude: 22.954463486477437 },
{ longitude: 51.47035908651375, latitude: 24.35818837668566 },
{ longitude: 51.122553219055874, latitude: 24.666679732426346 },
{ longitude: 51.58731671256831, latitude: 25.173806925822717 },
{ longitude: 51.35950585992913, latitude: 25.84556484481108 },
{ longitude: 51.088770529661275, latitude: 26.168494193631147 },
{ longitude: 50.78527056538036, latitude: 25.349051242147596 },
{ longitude: 50.88330288802666, latitude: 24.779242606720743 },
{ longitude: 50.19702490702369, latitude: 25.66825106363693 },
{ longitude: 50.066461167339924, latitude: 26.268905608606616 },
{ longitude: 49.645896067213215, latitude: 27.15116474192905 },
{ longitude: 48.917371072320805, latitude: 27.55738830340198 },
{ longitude: 48.3984720209192, latitude: 28.566207269716173 },
{ longitude: 47.68851714518985, latitude: 28.5938991332588 },
{ longitude: 47.45059089191449, latitude: 29.009321449856984 },
{ longitude: 44.73549453609391, latitude: 29.157358362696385 },
{ longitude: 41.79487372890989, latitude: 31.23489959729713 },
{ longitude: 40.36977176033773, latitude: 31.9642352513131 },
{ longitude: 39.168270913149826, latitude: 32.18348471414393 },
{ longitude: 37.019253492546454, latitude: 31.47710220862595 },
{ longitude: 37.99644645508337, latitude: 30.4851028633376 },
{ longitude: 37.67756530485232, latitude: 30.3636358598429 },
{ longitude: 37.50181466030105, latitude: 29.960155516804974 },
{ longitude: 36.700288181129594, latitude: 29.882136586478993 },
{ longitude: 36.100009274845206, latitude: 29.15308642012721 },
{ longitude: 34.85774476486728, latitude: 29.3103032832622 },
{ longitude: 34.64498583263142, latitude: 28.135787235699823 },
{ longitude: 34.88539587371454, latitude: 28.181421087099537 }
],
fill: 'red',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
]
}
}
]
});
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>Tooltip
Tooltip is used to display more information about a polygon shape during a mouse or touch interaction. Tooltip and tooltip template can be enabled by setting the visible property to true in the tooltipSettings. Additionally, you need to set the desired content as a value to the tooltipText property in the polygons property to show the tooltip. If you add ‘n’ numbers of polygon shapes, you can add the tooltipText property to each polygon, which will display the tooltip for the associated polygon shape.
Tooltip customization
The following properties are available in the tooltipSettings to customize the appearance of the tooltip.
- border - To change the color, width, and opacity of the border of the tooltip in the polygon shape.
- fill - Applies the color of the tooltip in the polygon shape.
- textStyle - To change the style of the text in the tooltip of the polygon shape.
import { Maps, Polygon, MapsTooltip } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Polygon, MapsTooltip);
let map: Maps = new Maps({
layers: [
{
shapeData: world_map,
polygonSettings: {
tooltipSettings: { visible: true, border: { width: 2, color: 'red' } },
polygons: [
{
tooltipText:'Saudi Arabia',
points: [
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 },
{ longitude: -1.6479633699113947, latitude: 33.58989612266137 },
{ longitude: -1.4201220366858252, latitude: 32.819439646045254 },
{ longitude: -1.197974596225663, latitude: 32.26940895444655 },
{ longitude: -2.891112397949655, latitude: 32.10303058820031 },
{ longitude: -3.8246984550501963, latitude: 31.34551662687602 },
{ longitude: -3.720166273688733, latitude: 30.758086682848685 },
{ longitude: -5.6571886081189575, latitude: 29.613582597203006 },
{ longitude: -7.423353242214745, latitude: 29.44328441403087 },
{ longitude: -8.6048931685323, latitude: 28.761444633616776 },
{ longitude: -8.695726975465703, latitude: 27.353491085576195 },
{ longitude: 3.837867279970908, latitude: 19.15916564839422 },
{ longitude: 6.0705408799045415, latitude: 19.48749097192868 },
{ longitude: 12.055736352807713, latitude: 23.694596786078293 },
{ longitude: 11.272522332402986, latitude: 24.289329186946034 },
{ longitude: 10.30872578261932, latitude: 24.65419958524693 },
{ longitude: 9.910236690050027, latitude: 25.48943950947175 },
{ longitude: 9.432639882414293, latitude: 26.398372489836902 },
{ longitude: 9.898266456582292, latitude: 26.73489453809293 },
{ longitude: 9.560243026853641, latitude: 30.31040379467153 },
{ longitude: 8.943853847283322, latitude: 32.350324876652195 },
{ longitude: 7.57004059025715, latitude: 33.75071049019398 },
{ longitude: 8.0906322609153, latitude: 34.69043151009983 },
{ longitude: 8.363285449347273, latitude: 35.38654406371319 },
{ longitude: 8.26139549449448, latitude: 36.44751078733985 },
{ longitude: 8.61100824823302, latitude: 36.881913362940196 },
{ longitude: 7.4216488925819135, latitude: 37.021408008916254 },
{ longitude: 6.461182254165351, latitude: 36.99092409199429 },
{ longitude: 5.297178918070159, latitude: 36.69985479014656 },
{ longitude: 3.6718056161224695, latitude: 36.86470546831693 },
{ longitude: 1.2050052555659931, latitude: 36.57658056301722 },
{ longitude: -0.26968570003779746, latitude: 35.806903541813625 },
{ longitude: -0.995191786435754, latitude: 35.58466127904214 },
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 }
],
fill: 'red',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
]
}
}
]
});
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>Tooltip template
Any HTML element can be rendered in the tooltip of the polygon shapes using the tooltipTemplate property of the polygons. If you add ‘n’ numbers of polygon shapes, you can add the tooltipTemplate property to each polygon, which will display the tooltip for the associated polygon shape.
import { Maps, Polygon, MapsTooltip } from '@syncfusion/ej2-maps';
import { world_map } from './world-map.ts';
Maps.Inject(Polygon, MapsTooltip);
let map: Maps = new Maps({
layers: [
{
shapeData: world_map,
polygonSettings: {
tooltipSettings: { visible: true },
polygons: [
{
tooltipTemplate:'<div style="width:240px;border: 2px solid #000;padding: 10px;background-color:white;color:black;font-weight:bold;font-size:15px;"> Country Name : Saudi Arabia</div>',
points: [
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 },
{ longitude: -1.6479633699113947, latitude: 33.58989612266137 },
{ longitude: -1.4201220366858252, latitude: 32.819439646045254 },
{ longitude: -1.197974596225663, latitude: 32.26940895444655 },
{ longitude: -2.891112397949655, latitude: 32.10303058820031 },
{ longitude: -3.8246984550501963, latitude: 31.34551662687602 },
{ longitude: -3.720166273688733, latitude: 30.758086682848685 },
{ longitude: -5.6571886081189575, latitude: 29.613582597203006 },
{ longitude: -7.423353242214745, latitude: 29.44328441403087 },
{ longitude: -8.6048931685323, latitude: 28.761444633616776 },
{ longitude: -8.695726975465703, latitude: 27.353491085576195 },
{ longitude: 3.837867279970908, latitude: 19.15916564839422 },
{ longitude: 6.0705408799045415, latitude: 19.48749097192868 },
{ longitude: 12.055736352807713, latitude: 23.694596786078293 },
{ longitude: 11.272522332402986, latitude: 24.289329186946034 },
{ longitude: 10.30872578261932, latitude: 24.65419958524693 },
{ longitude: 9.910236690050027, latitude: 25.48943950947175 },
{ longitude: 9.432639882414293, latitude: 26.398372489836902 },
{ longitude: 9.898266456582292, latitude: 26.73489453809293 },
{ longitude: 9.560243026853641, latitude: 30.31040379467153 },
{ longitude: 8.943853847283322, latitude: 32.350324876652195 },
{ longitude: 7.57004059025715, latitude: 33.75071049019398 },
{ longitude: 8.0906322609153, latitude: 34.69043151009983 },
{ longitude: 8.363285449347273, latitude: 35.38654406371319 },
{ longitude: 8.26139549449448, latitude: 36.44751078733985 },
{ longitude: 8.61100824823302, latitude: 36.881913362940196 },
{ longitude: 7.4216488925819135, latitude: 37.021408008916254 },
{ longitude: 6.461182254165351, latitude: 36.99092409199429 },
{ longitude: 5.297178918070159, latitude: 36.69985479014656 },
{ longitude: 3.6718056161224695, latitude: 36.86470546831693 },
{ longitude: 1.2050052555659931, latitude: 36.57658056301722 },
{ longitude: -0.26968570003779746, latitude: 35.806903541813625 },
{ longitude: -0.995191786435754, latitude: 35.58466127904214 },
{ longitude: -1.8920678947185365, latitude: 35.06195799239681 }
],
fill: 'red',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
]
}
}
]
});
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>