Examples

Edit In Codpen
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

</head>

<body>

<div style="height: 500px; width: 500px">

<div id="app"></div>

</div>

<button class = "btnPolygon" onclick="Polygon()">Polygon

</button>

<button class = "btnRemovePolygon"  onclick="removePolygon()">removePolygon

</button>

<script src="https://maps.fatos.biz/dist/fatosmap-gl.js">

</script>

<script>

let LatLng ={lat: 13.753815, lng: 100.501833}

let mapInstance = new fatosmap.maps.Map(

document.getElementById("app"),

{

zoom: 11,

center: LatLng,

service_id: 1,
 
key: 'Please enter your key'

}

)

 

let bermudaTriangle;

function Polygon(){

let triangleCoords = [

{lat: 25.774, lng: -80.190},

{lat: 18.466, lng: -66.118},

{lat: 32.321, lng: -64.757},

{lat: 25.774, lng: -80.190}

];

 

bermudaTriangle = new fatosmap.maps.Polygon({

paths: triangleCoords, //Must

fillColor: 'yellow',   // Optional, Default '#000000'(black)

fillOpacity: 0.35       // Optional, Default 1.0, between 0.0 and 1.0

});

bermudaTriangle.setMap(mapInstance);

mapInstance.setZoom(3);

mapInstance.setCenter({lat: 28.161367, lng: -68.282032});

};

 

function removePolygon(){

bermudaTriangle.setMap(null);

};

</script>

<style>

</style>

</body>

</html>