Polygon
Fill colors the area within given vertices
Polygon
Creates a custom polygon. Takes JSON Array of at least 3 latitude/longitude for vertices, color, and transparency as arguments.
new fatosmap.maps.Polygon({ option });Parameter
Required Parameter
Description
Type
paths
Coordinate value for each vertex
JSON Array
Optional Parameter
Description
Type
fillColor
specifies a hexadecimal HTML color of the format "#FFFFFF". The Polygon class does not support named colors. The default is '#000000'
Hex (String)
fillOpacity
specifies a numerical value between 0.0 and 1.0 to determine the opacity of the fill's color. The default is 1.0
Numeric
outlineColor
specifies a hexadecimal HTML outline color of the format "#FFFFFF". The Polygon class does not support named colors. The default is '#000000'
Hex (String)
text
Optional formatted. Defaults to ""
String
textColor
Optional color. Defaults to "#000000". Requires "text" option.
Hex (String)
textHaloColor
Optional color. Defaults to "rgba(0, 0, 0, 0)". Requires "text" option.
RGBA
textHaloWidth
Optional number greater than or equal to 0. Units in pixels. Defaults to 0. Requires "text" option.
Numeric
textSize
Optional number greater than or equal to 0. Units in pixels. Defaults to 16. Requires "text" option.
Numeric
textOffset
Optional array of numbers. Units in ems. Defaults to [0,0]. Requires "text" option.
Numeric Array
How to clear th polygon
Clears the polygon drawn on the map
Example
polygon.setMap(null);How to change path
Example
const polygonPath2 = [
{ lng : 126.89671297016855, lat : 37.48327831082247 },
{ lng : 126.9263372880938, lat : 37.4687100831612 },
{ lng : 126.894434176483, lat : 37.457555934748214 },
{ lng : 126.86854454821116, lat : 37.47338227239054 }
];
polygon.addPolygon(polygonPath2);How to make a path on/off
Sets a visibility option for a polygon instance.
Example
// on
polygon.setVisible(true);
// off
polygon.setVisible(false);HTML Sample CODE
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Polygon</title>
</head>
<body>
<div style="height: 100vh">
<div id="app"></div>
</div>
<button style="position:absolute;float:top;top:50px;left:20px;" onclick="addPath()">Change Path</button>
<button style="position:absolute;float:top;top:50px;left:120px;" onclick="removePath()">Remove Polygon</button>
<button style="position:absolute;float:top;top:50px;left:250px;" onclick="visible()">visible</button>
<button style="position:absolute;float:top;top:50px;left:320px;" onclick="invisible()">invisible</button>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
const LatLng = {lat: 37.482901, lng: 126.896038};
let polygon = null;
const polygonPath = [
{ lng : 126.89654749206602, lat : 37.483294848898396 },
{ lng : 126.91949422580217, lat : 37.650939883625114 },
{ lng : 127.06066732772979, lat : 37.750899297688065 },
{ lng : 127.0416190159097, lat : 37.51702306480502 },
{ lng : 126.89654749206602, lat : 37.483294848898396 }
];
const polygonPath2 = [
{ lng : 126.89671297016855, lat : 37.48327831082247 },
{ lng : 126.9263372880938, lat : 37.4687100831612 },
{ lng : 126.894434176483, lat : 37.457555934748214 },
{ lng : 126.86854454821116, lat : 37.47338227239054 },
{ lng : 126.89671297016855, lat : 37.48327831082247 }
];
let toggle = 0;
const mapInstance = new fatosmap.maps.Map(
document.getElementById("app"),
{
zoom: 14.5, // current zoom level
center: LatLng,
maxZoom: 20, // default 24
minZoom: 2, // default 0
key: 'YOUR_API_KEY', // https://console.fatos.biz
}
);
mapInstance.on('load', function () {
polygon = new fatosmap.maps.Polygon({
paths: polygonPath,
fillColor: '#FF0000',
fillOpacity: 0.35,
outlineColor: '#DC151A',
text: 'FATOS',
textColor: '#91FF7C',
textSize: 25,
// textOffset: [5,4],
textHaloWidth: 10
});
polygon.setMap(mapInstance);
});
function addPath() {
if(toggle === 1) {
polygon.addPolygon(polygonPath);
toggle = 0
} else {
polygon.addPolygon(polygonPath2);
toggle = 1
}
}
function removePath() {
polygon.setMap(null);
}
function visible() {
polygon.setVisible(true);
}
function invisible() {
polygon.setVisible(false);
}
</script>
</body>
</html>Last updated
Was this helpful?