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>

<input id = "btnAll" type="button" onclick="btnAll()" value="offBtnAll"></input>

<input id = "btnZoom" type="button" onclick="btnZoom()" value="offBtnZoom" ></input>

<input id = "btnCompass" type="button" onclick="btnCompass()" value="offBtnCompass"></input>

<input id = "btnPitch" type="button" onclick="btnPitch()" value="offBtnPitch"></input>

<input id = "btnSatellite" type="button" onclick="btnSatellite()" value="offBtnSatellite"></input>

<input id = "btnBering" type="button" onclick="btnBering()" value="offBtnBering"></input>

<input id = "btnFullScreen" type="button" onclick="btnFullScreen()" value="offBtnFullScreen" style="margin-top: 10px"></input>

<input id = "btnGeoLocate" type="button" onclick="btnGeoLocate()" value="offBtnGeoLocate"></input>

<input id = "btnBuilding3d" type="button" onclick="btnBuilding3d()" value="offBtnBuilding3d"></input>

<input id = "btnDistance" type="button" onclick="btnDistance()" value="offBtnDistance"></input>

<input id = "btnArea" type="button" onclick="btnArea()" value="offBtnArea"></input>

<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'

}

)

function btnAll () {

if(document.getElementById("btnAll").value=="onBtnAll") {

document.getElementById("btnAll").value= "offBtnAll"

document.getElementById("btnAll").style.color = 'white'

document.getElementById("btnAll").style.backgroundColor='black'

 

mapInstance.onBtnAll();

} else if(document.getElementById("btnAll").value== "offBtnAll") {

document.getElementById("btnAll").value= "onBtnAll"

document.getElementById("btnAll").style.color = 'black'

document.getElementById("btnAll").style.backgroundColor='white'

mapInstance.offBtnAll();

}

}

 

function btnZoom () {

if(document.getElementById("btnZoom").value=="onBtnZoom")

{

document.getElementById("btnZoom").value= "offBtnZoom"

document.getElementById("btnZoom").style.color = 'white'

document.getElementById("btnZoom").style.backgroundColor='black'

mapInstance.onBtnZoom();

}

else if(document.getElementById("btnZoom").value== "offBtnZoom")

{

document.getElementById("btnZoom").value= "onBtnZoom"

document.getElementById("btnZoom").style.color = 'black'

document.getElementById("btnZoom").style.backgroundColor='white'

mapInstance.offBtnZoom();

}

}

 

function btnCompass () {

if(document.getElementById("btnCompass").value=="onBtnCompass")

{

document.getElementById("btnCompass").value= "offBtnCompass"

document.getElementById("btnCompass").style.color = 'white'

document.getElementById("btnCompass").style.backgroundColor='black'

mapInstance.onBtnCompass();

}

else if(document.getElementById("btnCompass").value== "offBtnCompass")

{

document.getElementById("btnCompass").value= "onBtnCompass"

document.getElementById("btnCompass").style.color = 'black'

document.getElementById("btnCompass").style.backgroundColor='white'

mapInstance.offBtnCompass();

}

}

 

function btnPitch () {

if(document.getElementById("btnPitch").value=="onBtnPitch")

{

document.getElementById("btnPitch").value= "offBtnPitch"

document.getElementById("btnPitch").style.color = 'white'

document.getElementById("btnPitch").style.backgroundColor='black'

mapInstance.onBtnPitch();

}

else if(document.getElementById("btnPitch").value== "offBtnPitch")

{

document.getElementById("btnPitch").value= "onBtnPitch"

document.getElementById("btnPitch").style.color = 'black'

document.getElementById("btnPitch").style.backgroundColor='white'

mapInstance.offBtnPitch();

}

}

 

function btnSatellite () {

if(document.getElementById("btnSatellite").value=="onBtnSatellite")

{

document.getElementById("btnSatellite").value= "offBtnSatellite"

document.getElementById("btnSatellite").style.color = 'white'

document.getElementById("btnSatellite").style.backgroundColor='black'

mapInstance.onBtnSatellite();

}

else if(document.getElementById("btnSatellite").value== "offBtnSatellite")

{

document.getElementById("btnSatellite").value= "onBtnSatellite"

document.getElementById("btnSatellite").style.color = 'black'

document.getElementById("btnSatellite").style.backgroundColor='white'

mapInstance.offBtnSatellite();

}

}

 

function btnBering () {

if(document.getElementById("btnBering").value=="onBtnBering")

{

document.getElementById("btnBering").value= "offBtnBering"

document.getElementById("btnBering").style.color = 'white'

document.getElementById("btnBering").style.backgroundColor='black'

mapInstance.onBtnBering();

}

else if(document.getElementById("btnBering").value== "offBtnBering")

{

document.getElementById("btnBering").value= "onBtnBering"

document.getElementById("btnBering").style.color = 'black'

document.getElementById("btnBering").style.backgroundColor='white'

mapInstance.offBtnBering();

}

}

 

function btnFullScreen () {

if(document.getElementById("btnFullScreen").value=="onBtnFullScreen")

{

document.getElementById("btnFullScreen").value= "offBtnFullScreen"

document.getElementById("btnFullScreen").style.color = 'white'

document.getElementById("btnFullScreen").style.backgroundColor='black'

mapInstance.onBtnFullScreen();

}

else if(document.getElementById("btnFullScreen").value== "offBtnFullScreen")

{

document.getElementById("btnFullScreen").value= "onBtnFullScreen"

document.getElementById("btnFullScreen").style.color = 'black'

document.getElementById("btnFullScreen").style.backgroundColor='white'

mapInstance.offBtnFullScreen();

}

}

 

function btnGeoLocate () {

if(document.getElementById("btnGeoLocate").value=="onBtnGeoLocate")

{

document.getElementById("btnGeoLocate").value= "offBtnGeoLocate"

document.getElementById("btnGeoLocate").style.color = 'white'

document.getElementById("btnGeoLocate").style.backgroundColor='black'

mapInstance.onBtnGeoLocate();

}

else if(document.getElementById("btnGeoLocate").value== "offBtnGeoLocate")

{

document.getElementById("btnGeoLocate").value= "onBtnGeoLocate"

document.getElementById("btnGeoLocate").style.color = 'black'

document.getElementById("btnGeoLocate").style.backgroundColor='white'

mapInstance.offBtnGeoLocate();

}

}

 

function btnBuilding3d () {

if(document.getElementById("btnBuilding3d").value=="onBtnBuilding3d")

{

document.getElementById("btnBuilding3d").value= "offBtnBuilding3d"

document.getElementById("btnBuilding3d").style.color = 'white'

document.getElementById("btnBuilding3d").style.backgroundColor='black'

mapInstance.onBtnBuilding3d();

}

else if(document.getElementById("btnBuilding3d").value== "offBtnBuilding3d")

{

document.getElementById("btnBuilding3d").value= "onBtnBuilding3d"

document.getElementById("btnBuilding3d").style.color = 'black'

document.getElementById("btnBuilding3d").style.backgroundColor='white'

mapInstance.offBtnBuilding3d();

}

}

 

function btnDistance () {

if(document.getElementById("btnDistance").value=="onBtnDistance")

{

document.getElementById("btnDistance").value= "offBtnDistance"

document.getElementById("btnDistance").style.color = 'white'

document.getElementById("btnDistance").style.backgroundColor='black'

mapInstance.onBtnDistance();

}

else if(document.getElementById("btnDistance").value== "offBtnDistance")

{

document.getElementById("btnDistance").value= "onBtnDistance"

document.getElementById("btnDistance").style.color = 'black'

document.getElementById("btnDistance").style.backgroundColor='white'

mapInstance.offBtnDistance();

}

}

 

function btnArea () {

if(document.getElementById("btnArea").value=="onBtnArea")

{

document.getElementById("btnArea").value= "offBtnArea"

document.getElementById("btnArea").style.color = 'white'

document.getElementById("btnArea").style.backgroundColor='black'

mapInstance.onBtnArea();

}

else if(document.getElementById("btnArea").value== "offBtnArea")

{

document.getElementById("btnArea").value= "onBtnArea"

document.getElementById("btnArea").style.color = 'black'

document.getElementById("btnArea").style.backgroundColor='white'

mapInstance.offBtnArea();

}

}

 

</script>

<style>

 

</style>

</body>

</html>