Theme
Change the map theme
setTheme
mapInstance.setTheme(theme);Parameters
Parameter (Requied)
Description
Remark
theme
Set map colors and theme types are basic
light1 // Gray theme
light2 // Street theme
light3 // Background Dark, Road Color
light4 // Dark theme
satellite // Satellite theme
String
Returns
Parameter
Description
Remark
Example
let LatLng = {lat: 37.482890, lng: 126.896086}
let mapInstance = new mogosmap.maps.Map(
document.getElementById("app"),
{
zoom: 14,
center: LatLng,
maxZoom: 20,
minZoom: 2,
key: 'YOUR_API_KEY'
// theme
theme: 'light1' Default basic
}
)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map Event</title>
</head>
<body>
<div style="height: 100vh">
<div id="app"></div>
</div>
<button style="position: absolute; float: top; top: 50px; left: 50px;" onclick="setTheme()">Set Theme</button>
<button style="position: absolute; float: top; top: 50px; left: 150px;" onclick="getTheme()">Get Theme</button>
<button style="position: absolute; float: top; top: 100px; left: 50px;" onclick="showTraffic(true)">Show Traffic Line</button>
<button style="position: absolute; float: top; top: 100px; left: 200px;" onclick="showTraffic(false)">Remove Traffic Line</button>
<script type="text/javascript" src="https://maps.fatos.biz/dist/fatosmap-gl.js"></script>
<script>
let LatLng = {lat: 37.482901, lng: 126.896038};
let mapInstance = new mogosmap.maps.Map(
document.getElementById("app"),
{
zoom: 14.5,
center: LatLng,
maxZoom: 20,
minZoom: 2,
key: 'YOUR_API_KEY'
}
);
function setTheme() {
mapInstance.setTheme('light2');
}
function getTheme() {
console.log(mapInstance.getTheme());
}
function showTraffic(bool) {
mapInstance.setTraffic(bool)
}
</script>
</body>
</html>getTheme
Parameters
Parameter (Required)
Description
Remark
Returns
Parameter
Description
Remark
Example
The MOGOS Maps API requires an API Key, which can be obtained from the MOGOS Console website or contact [email protected].
Last updated