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