Глобальные переменные стиля карты

Глобальные переменные стиля карты (глобальные стилевые переменные) — это переменные с типом global, которые задаются в объекте StyleState и используются в стилевых выражениях (Expressions). С помощью глобальных стилевых переменных вы можете динамически включать и выключать отображение стилевых слоёв на карте, а также стилизовать отображение объектов (см. инструкцию Раскрашивание объектов).

Вы можете как инициализировать собственные глобальные переменные стиля и указывать их в настройках стилевого слоя, так и использовать зарезервированные глобальные переменные. Примеры зарезервированных переменных:

trafficOn — отображение пробок;
parkingOn — отображение парковок;
navigatorOn — включение режима навигации;
immersiveRoadsOn — отображение иммерсивных дорог;
terrainEnabled — отображение 3D-рельефа.

При инициализации карты используются глобальные переменные стиля, указанные в объекте StyleState. С помощью метода map.patchStyleState() вы можете устанавливать значения глобальных переменных (например, true или false).

Создание глобальных переменных

В этом примере создаётся переменная showFoodPoi для стилевого слоя с иконками ресторанов в Редакторе стилей (слой Eateries в папке POI icons New). Вы можете добавлять зависимость от глобальных переменных для любых стилевых слоёв.

Чтобы создать глобальную стилевую переменную и с помощью неё управлять отображением стилевого слоя:

Откройте Редактор стилей.
Откройте нужный стиль.
Откройте нужный слой. Перейдите на вкладку Данные и нажмите JSON — добавить вручную:
Добавьте к фильтру слоя зависимость от глобальной переменной стиля. Для этого вместо значения true укажите ["global", "showFoodPoi"]:
```
[
    "all",
    ["match", ["get", "sublayer"], ["Low_zoom_poi"], true, false],
    ["match", ["get", "objectClass"], ["poi_food_service"], ["global", "showFoodPoi"], false]
]
```
При инициализации переменных вы можете использовать любые названия, но нельзя начинать название с символа нижнего подчёркивания (_).
При инициализации карты укажите в поле styleState глобальную стилевую переменную showFoodPoi. В поле style укажите ID стиля, в котором находится слой с заданной переменной:
```
const map = new mapgl.Map('container', {
    center: [37.60301424238976, 55.730826265146305],
    zoom: 17,
    key: 'Your API access key',
    style: 'Your map style identifier',
    styleState: {
        showFoodPoi: true,
    },
});
```

Чтобы включить или отключить отображение слоя, используйте метод map.patchStyleState():

// Показать слой
map.patchStyleState({ showFoodPoi: true });

// Скрыть слой
map.patchStyleState({ showFoodPoi: false });

Пример использования:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="Icons example" />
        <link rel="stylesheet" type="text/css" href="/css/switch.css" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #buttons {
                position: absolute;
                z-index: 2;

                top: 0;
                left: 0;
                margin: 8px;
                padding: 2px 4px;

                display: flex;
                align-items: center;
                background-color: white;
                border-radius: 8px;
                font: 13px sans-serif;
            }

            #buttons label {
                padding: 0 4px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="buttons">
            <label>Restaurant icons</label>
            <input type="checkbox" role="switch" onclick="toggleRelief(event)" checked="true"/>
            <label id="stateCaption">On</label>
        </div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {                
                center: [37.60301424238976, 55.730826265146305],
                zoom: 17,
                key: 'Your API access key',
                style: 'de22a8b8-59e8-4d04-8711-b2c19e100072',
                styleState: {
                    showFoodPoi: true,
                }
            });

            const stateCaption = document.getElementById('stateCaption');

            function toggleRelief(ev) {
                const enabled = ev.target.checked;
                map.patchStyleState({ showFoodPoi: enabled })
                stateCaption.innerText = enabled ? 'On' : 'Off';
            }
        </script>
    </body>
</html>

Использование зарезервированных глобальных переменных

В этом примере для отображения 3D-рельефа на карте используется зарезервированная переменная terrainEnabled.

Чтобы управлять 3D-рельефом на карте:

При инициализации карты укажите в поле styleState глобальную стилевую переменную terrainEnabled:

const map = new mapgl.Map('container', {
    center: [160.5444267119923, 54.74660368519054],
    zoom: 12.1,
    key: 'Your API access key',
    styleState: {
        terrainEnabled: true,
    },
});

Чтобы включить или отключить 3D-рельеф, используйте метод map.patchStyleState():

// Включить 3D-рельеф
map.patchStyleState({ terrainEnabled: true });

// Отключить 3D-рельеф
map.patchStyleState({ terrainEnabled: false });

Пример использования:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>2GIS Map API</title>
        <meta name="description" content="3D terrain example" />
        <link rel="stylesheet" type="text/css" href="/css/switch.css" />
        <style>
            html,
            body,
            #container {
                margin: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            #buttons {
                position: absolute;
                z-index: 2;

                top: 0;
                left: 0;
                margin: 8px;
                padding: 2px 4px;

                display: flex;
                align-items: center;
                background-color: white;
                border-radius: 8px;
                font: 13px sans-serif;
            }

            #buttons label {
                padding: 0 4px;
            }
        </style>
    </head>
    <body>
        <div id="container"></div>
        <div id="buttons">
            <label>3D terrain</label>
            <input type="checkbox" role="switch" onclick="toggleRelief(event)" checked="true"/>
            <label id="stateCaption">On</label>
        </div>
        <script src="https://mapgl.2gis.com/api/js/v1"></script>
        <script>
            const map = new mapgl.Map('container', {                
                center: [160.5444267119923, 54.74660368519054],
                zoom: 12.1,
                pitch: 42,
                rotation: 45,
                key: 'Your API access key',
                style: '8500c08c-0d73-4147-bb73-e6dcba21fa47',
                styleState: {
                    hillshade: true,
                    terrainEnabled: true,
                }
            });

            const stateCaption = document.getElementById('stateCaption');

            function toggleRelief(ev) {
                const enabled = ev.target.checked;
                map.patchStyleState({ terrainEnabled: enabled })
                stateCaption.innerText = enabled ? 'On' : 'Off';
            }
        </script>
    </body>
</html>