Дополнение текущего стиля карты «на лету»

Чтобы изменить текущий стиль, экземпляр карты имеет два метода: addLayer и removeLayer.

Добавление нового слоя в стиль карты

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

map.on('styleload', () => {
    map.addLayer(layer);
});

Если вы измените стиль карты с помощью метода map.setStyleById(), вы также можете использовать Promise, возвращаемый этим методом:

map.setStyleById('e05ac437-fcc2-4845-ad74-b1de9ce07555').then(() => {
    map.addLayer(layer);
});

Добавление перед другим слоем

Слои стиля карты упорядочены относительно друг друга. Порядок слоев определяет последовательность их отрисовки на карте.

По умолчанию метод map.addLayer(layer) добавляет новый слой в конец списка, т.е. новый слой будет отрисован последним. Если вам нужно добавить слой не в конец, а перед другим слоем, укажите ID другого слоя в качестве второго аргумента:

map.addLayer(anotherLayer, 'my-polygons-layer');

Вы также можете добавить слой перед слоями, настроенными в Редакторе стилей:

map.addLayer(layer, '577315');

<!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="map.addLayer under roads example" />
  <style>
    html,
    body,
    #container {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="container"></div>
  <script src="https://mapgl.2gis.com/api/js/v1"></script>
  <script>
    const map = new mapgl.Map('container', {
      center: [55.425, 25.355],
      zoom: 13,
      key: 'Your API access key',
    });
    const layer = {
      "id": "newLayer",
      "name": "Country, 2GIS",
      "type": "polygon",
      "style": {
        "color": "#949494ee",
        "visibility": "visible"
      },
      "filter": [
        "match",
        [
          "get",
          "sublayer"
        ],
        [
          "Country_2gis_area"
        ],
        true,
        false
      ]
    }
    map.on('styleload', () => {
      map.addLayer(layer, '577315');
    });
  </script>
</body>