Polygon shape in JavaScript Maps component
18 Nov 201824 minutes to read
The Maps component supports rendering custom polygon shapes as overlays on both geometry-based maps and online tile maps. Polygons are useful for highlighting specific geographic regions, marking zones of interest, drawing custom boundaries, or visualizing areas such as coverage zones, territorial boundaries, or restricted areas. This feature is configured using the polygons property, which allows multiple polygon shapes to be added and customized independently.
Adding polygon shape
Polygons are rendered over map layers by defining the points property in the polygons collection. The points property accepts an array of latitude and longitude coordinate pairs that define the vertices of the polygon shape. These coordinates are connected in sequence to form the closed polygon boundary.
The following properties are available for customizing polygon appearance:
- 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 demonstrates how to add and customize a polygon shape on a geometry map.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Tooltip
Tooltips provide additional information about polygon shapes during mouse hover or touch interactions. Enable tooltips by setting the visible property to true in the tooltipSettings. Define the tooltip content using the tooltipText property within each polygon configuration. When multiple polygons are present, each can have its own unique tooltip text.
Tooltip customization
Customize tooltip appearance using the following properties in tooltipSettings:
- border - Customizes the color, width, and opacity of the tooltip border.
- fill - Specifies the background color of the tooltip.
- textStyle - Defines the font style, size, color, and other text properties for tooltip content.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>Tooltip template
Custom HTML content can be displayed in polygon tooltips using the tooltipTemplate property. This allows for rich formatting, images, or complex layouts within the tooltip. Each polygon can have its own unique tooltip template, enabling different visualizations for different polygon shapes.
var map = new ej.maps.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="world-map.js"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 700px">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if (ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body>
</html>