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>