Examples
<!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>