Interface for a class PolygonSettings
Gets or sets the properties for highlighting polygon shapes in a map layer.
<div class="control-section">
<div align='center'>
<ejs-maps id='container' style="display:block;">
<e-layers>
<e-layer [shapeData]='shapeData' [polygonSettings]='polygonSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>import { MapsModule, PolygonService, HighlightService } from '@syncfusion/ej2-angular-maps'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { world_map } from './world-map.ts';
@Component({
imports: [
MapsModule
],
providers: [PolygonService, HighlightService],
templateUrl: 'app.component.html',
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
public shapeData?: object;
public polygonSettings?: object;
ngOnInit(): void {
this.polygonSettings = {
polygons: [
{
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
}
],
highlightSettings: {
enable: true,
fill: 'yellow',
opacity: 0.4,
border: {
color: 'blue',
opacity: 0.6,
width: 4
}
},
};
this.shapeData = world_map;
}
}<h3 class="doc-prop-wrapper" id="polygons" data-Path="polygons-polygons">
<a href="#polygons" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>polygons</span>
<span class="doc-prop-type"> [`PolygonSettingModel[]`](./polygonSettingModel)
</span>
</h3>
Gets or sets the properties of all the polygon shapes that will be displayed in a layer.
```html
<div class="control-section">
<div align='center'>
<ejs-maps id='container' style="display:block;">
<e-layers>
<e-layer [shapeData]='shapeData' [polygonSettings]='polygonSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>import { MapsModule, PolygonService } from '@syncfusion/ej2-angular-maps'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [PolygonService],
templateUrl: 'app.component.html',
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
public shapeData?: object;
public polygonSettings?: object;
ngOnInit(): void {
this.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
}
]
};
this.shapeData = world_map;
}
}Gets or sets the properties for selecting polygon shapes in a map layer.
<div class="control-section">
<div align='center'>
<ejs-maps id='container' style="display:block;">
<e-layers>
<e-layer [shapeData]='shapeData' [polygonSettings]='polygonSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>import { MapsModule, PolygonService, SelectionService } from '@syncfusion/ej2-angular-maps'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { world_map } from './world-map.ts';
@Component({
imports: [
MapsModule
],
providers: [PolygonService, SelectionService],
templateUrl: 'app.component.html',
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
public shapeData?: object;
public polygonSettings?: object;
ngOnInit(): void {
this.polygonSettings = {
polygons: [
{
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: 'blue',
opacity: 0.7,
borderColor: 'green',
borderWidth: 2,
borderOpacity: 0.7
}
],
selectionSettings: {
enable: true,
fill: 'violet',
enableMultiSelect: false,
opacity: 0.8,
border: {
color: 'cyan',
opacity: 1,
width: 7
}
}
};
this.shapeData = world_map;
}
}Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
<div class="control-section">
<div align='center'>
<ejs-maps id='container' style="display:block;">
<e-layers>
<e-layer [shapeData]='shapeData' [polygonSettings]='polygonSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>import { MapsModule, PolygonService, MapsTooltipService } from '@syncfusion/ej2-angular-maps'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { world_map } from './world-map';
@Component({
imports: [
MapsModule
],
providers: [PolygonService, MapsTooltipService],
templateUrl: 'app.component.html',
selector: 'app-root',
encapsulation: ViewEncapsulation.None,
template: ``,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
public shapeData?: object;
public polygonSettings?: object;
ngOnInit(): void {
this.polygonSettings = {
tooltipSettings: { visible: true,
border: { width: 2, color: 'red' },
duration: 3000,
fill: 'rgba(0, 0, 0, 0.5)',
textStyle: {
fontFamily: 'Arial',
fontSize: '14px',
fontStyle: 'italic',
fontWeight: 'bold',
color: '#FFFFFF',
opacity: 0.8
} },
polygons: [
{
tooltipText: 'Saudi Arabia',
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
}
]
};
this.shapeData = world_map;
}
}