Быстрый старт

Минимальная карта на SDK: подложка, метка с балуном, круг и полигон — у каждой фигуры свой балун (Popup). Плюс балун в произвольной точке — по клику на карту, без привязки к метке или фигуре.

Карта создаётся через EvaMaps.create() — он сразу подключает наши тайлы, тему и контролы по умолчанию (зум, линейка, атрибуция). Дальше фигуры добавляются фабриками EvaMaps.marker(), EvaMaps.circle(), EvaMaps.polygon(), у каждой — .addTo(map) и .setPopup(...).

Координаты везде в порядке [lng, lat] (как в GeoJSON), а не [lat, lng], как у Яндекс Карт 2.x. Единственное исключение в примере — событие клика e.lngLat, у него тот же порядок.

Код

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

<!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 = EvaMaps.create('map', {
        center: [37.6173, 55.7558],
        zoom: 13,
        theme: 'light',
      });

      var marker = EvaMaps.marker([37.6173, 55.7558]).addTo(map);
      marker.setPopup(EvaMaps.popup().setText('Привет! Я живу тут.'));

      var circle = EvaMaps
        .circle([37.611, 55.752], 500, { color: '#1a73e8', fillOpacity: 0.3 })
        .addTo(map);
      circle.setPopup(EvaMaps.popup().setText('Я круг радиусом 500 м.'));

      var polygon = EvaMaps
        .polygon(
          [
            [37.623, 55.759],
            [37.635, 55.759],
            [37.635, 55.767],
            [37.623, 55.767],
          ],
          { color: '#e53935', fillOpacity: 0.3 },
        )
        .addTo(map);
      polygon.setPopup(EvaMaps.popup().setText('Я полигон.'));

      // Балун в точке клика по карте.
      map.on('click', function (e) {
        EvaMaps.popup()
          .setLngLat(e.lngLat)
          .setText('Вы кликнули в ' + e.lngLat[1].toFixed(4) + ', ' + e.lngLat[0].toFixed(4))
          .openOn(map);
      });
    </script>
  </body>
</html>

← Все примеры