Переключатель слоёв

Контрол с двумя группами: подложки-радиокнопки (включена всегда одна) и оверлеи-галочки (можно включить несколько сразу). В примере подложки — наши три темы (EvaMaps.themeLayers()), оверлей — группа меток «Города» (EvaMaps.layerGroup([...])).

Карта здесь собирается через new EvaMaps.Map(...) напрямую, без EvaMaps.create(): подложкой целиком управляет сам LayersControl, и если добавить ещё и дефолтный слой из create(), на карте окажутся два наложенных друг на друга TileLayer. Поэтому для переключателя тем — new Map() + themeLayers() + layersControl(), а не create().

Код

Код ниже — рабочий, с боевыми адресами: вставьте как есть на свою страницу.

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>EvaMaps SDK — переключатель слоёв</title>
    <link rel="stylesheet" href="https://evamaps.ru/sdk/1/evamaps.css" />
    <style>
      html,
      body {
        margin: 0;
        font-family: system-ui, -apple-system, sans-serif;
      }
      #map {
        width: 100%;
        height: 520px;
      }
      p {
        margin: 10px 16px;
        color: #555;
        font-size: 13px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script src="https://evamaps.ru/sdk/1/evamaps.js"></script>
    <script>

      var map = new EvaMaps.Map('map', {
        center: [37.6173, 55.7558],
        zoom: 13,
        zoomControl: true,
        scaleControl: true,
      });

      var bases = EvaMaps.themeLayers();

      var cities = EvaMaps.layerGroup([
        EvaMaps.marker([37.6173, 55.7558], { title: 'Центр' }).setPopup(EvaMaps.popup().setText('Центр Москвы')),
        EvaMaps.marker([37.6208, 55.7539], { title: 'Красная площадь' }).setPopup(
          EvaMaps.popup().setText('Красная площадь'),
        ),
        EvaMaps.marker([37.6031, 55.7304], { title: 'Парк Горького' }).setPopup(
          EvaMaps.popup().setText('Парк Горького'),
        ),
      ]);

      EvaMaps.layersControl(bases, { Города: cities }).addTo(map);
    </script>
  </body>
</html>

← Все примеры