> For the complete documentation index, see [llms.txt](https://fatos-doc.fatos.biz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fatos-doc.fatos.biz/fatos-api/map/map-control/theme.md).

# Theme

## Set map theme

| Parameter | Description                                                                                                                                                                                              | Type   |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| theme     | <p>basic</p><p>light1       // Gray theme</p><p>light2       // Street theme </p><p>light3      // Background Dark, Road Color </p><p>light4      // Dark theme</p><p>satellite   // Satellite theme</p> | String |

{% tabs %}
{% tab title="Before loading the map" %}

```javascript
    let LatLng = {lat: 37.482890, lng: 126.896086}
    let mapInstance = new fatosmap.maps.Map(
        document.getElementById("app"),
        {
            zoom: 14,
            center: LatLng,
            maxZoom: 20,
            minZoom: 2,
            key: 'YOUR_API_KEY'
            
            // theme
            theme: 'light1' Default basic
        }
    )
```

{% endtab %}

{% tab title="After loading the map" %}

```javascript
<!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 fatosmap.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>

```

{% endtab %}
{% endtabs %}
