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 = "btnCircle" onclick="Circle()">Circle

</button>

<button class = "btnRemoveCircle" onclick="removeCircle()">removeCircle

</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 cityCircle;

function Circle(){

let citymap = {

chicago: {

center:{lat: 13.753815, lng: 100.501833},

population: 1714

}

}

cityCircle = new fatosmap.maps.Circle({

fillColor: '#FF0000', // Optional Default '#000000'

fillOpacity: 0.35,    // Optional Default 1.0

map: mapInstance,     // Must

center: citymap['chicago'].center, // Must

radius: Math.sqrt(citymap['chicago'].population) * 100 // Must

});

 

cityCircle.setMap(mapInstance);

};

 

function removeCircle(){

cityCircle.setMap(null);

};

</script>

<style>

</style>

</body>

</html>