Interface for a class PolygonSettings
Gets or sets the properties for highlighting polygon shapes in a map layer.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Polygon, Highlight } from '@syncfusion/ej2-react-maps';
function Default() {
var 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
}
},
};
return (
<MapsComponent >
<Inject services={[Polygon, Highlight]} />
<LayersDirective>
<LayerDirective shapeData={world_map} polygonSettings={polygonSettings}
>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);Gets or sets the properties of all the polygon shapes that will be displayed in a layer.
import { world_map } from './world-map.ts';
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { MapsComponent, LayersDirective, LayerDirective, Inject, Polygon } from '@syncfusion/ej2-react-maps';
function Default() {
var 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
}
]
};
return (
<MapsComponent >
<Inject services={[Polygon]} />
<LayersDirective>
<LayerDirective shapeData={world_map} polygonSettings={polygonSettings}
>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);Gets or sets the properties for selecting polygon shapes in a map layer.
import { world_map } from 'world-map.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective, Inject, Polygon, Selection } from '@syncfusion/ej2-react-maps';
function Default() {
var 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
}
}
};
return (
<MapsComponent >
<Inject services={[Polygon, Selection]} />
<LayersDirective>
<LayerDirective shapeData={world_map} polygonSettings={polygonSettings}
>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);Specifies the properties such as visibility, fill, border and text style to customize the tooltip.
import { world_map } from './world-map.ts';
import * as React from "react";
import { createRoot } from 'react-dom/client';
import { MapsComponent, LayersDirective, LayerDirective, Inject, Polygon, MapsTooltip } from '@syncfusion/ej2-react-maps';
function Default() {
var 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
}
]
};
return (
<MapsComponent >
<Inject services={[Polygon, MapsTooltip]} />
<LayersDirective>
<LayerDirective shapeData={world_map} polygonSettings={polygonSettings}
>
</LayerDirective>
</LayersDirective>
</MapsComponent>
);
}
export default Default;
const root = createRoot(document.getElementById('sample'));
root.render(<Default />);