Свои иконки

По умолчанию метка — цветная точка (color). Чтобы поставить свою картинку, передайте icon: { url, size, anchor, popupAnchor }. url принимает только http(s) или data:image/… — произвольный HTML внутри метки не подставляется, это осознанное ограничение SDK против XSS.

В примере одна и та же SVG-иконка (зелёный пин) используется трижды с разным размером — движок сам пересчитывает anchor (точку, которой метка «стоит» на карте) и место балуна (popupAnchor) под размер картинки, пересчитывать вручную не нужно.

Код

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

<!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>
      // Своя простая SVG-иконка (зелёный пин с белым "глазком"), кодируем в data:image/svg+xml —
      // icon.url принимает только http(s) или data:image/… (docs/api/reference.md §5).
      var ICON_SVG =
        '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 40">' +
        '<path d="M16 0C7.2 0 0 7.2 0 16c0 12 16 24 16 24s16-12 16-24C32 7.2 24.8 0 16 0z" fill="#2e7d32" stroke="white" stroke-width="2"/>' +
        '<circle cx="16" cy="16" r="6" fill="white"/>' +
        '</svg>';
      var ICON_URL = 'data:image/svg+xml,' + encodeURIComponent(ICON_SVG);

      var map = EvaMaps.create('map', {
        center: [37.6173, 55.7558],
        zoom: 13,
        theme: 'light',
      });

      function iconMarker(lngLat, size, text) {
        return EvaMaps.marker(lngLat, {
          title: text,
          icon: {
            url: ICON_URL,
            size: [size, size * 1.25],
            anchor: [size / 2, size * 1.25],
            popupAnchor: [0, -size * 1.25 - 4],
          },
        })
          .setPopup(EvaMaps.popup().setText(text))
          .addTo(map);
      }

      iconMarker([37.6, 55.752], 24, 'Маленькая иконка (24×30)');
      iconMarker([37.617, 55.756], 36, 'Средняя иконка (36×45)');
      iconMarker([37.634, 55.76], 52, 'Большая иконка (52×65)');
    </script>
  </body>
</html>

← Все примеры