React

@evamaps/react — компонент для React 18 и 19. Карта появляется вместе с компонентом и снимается при размонтировании.

Ключ кабинета — проп apiKey: в React имя key занято.

tsx

import { EvaMap, EvaMarker } from '@evamaps/react'
import '@evamaps/react/style.css'

export function OfficeMap() {
  return (
    <EvaMap center={[37.6173, 55.7558]} zoom={12} theme="light" apiKey="pk_…" style={{ height: 400 }}>
      <EvaMarker lnglat={[37.6173, 55.7558]} color="#e53935" label="Офис">Наш офис</EvaMarker>
    </EvaMap>
  )
}

Высоту задайте сами. Стили — те же, что у SDK: @evamaps/react/style.css или @evamaps/sdk/style.css, один раз. Атрибуция на карте не отключается.

center и zoom можно держать в состоянии. После сдвига приходят onCenterChange и onZoomChange — новые числа верните в эти пропсы. Если значение уже совпадает с картой, вид заново не ставится. Тема меняется на лету. Остальное читается при создании: чтобы сменить ключ, смените key у компонента, React создаст карту заново. Объект карты приходит в onReady — это тот же create(). Пропсы карты — те же опции, что у create() (maxBounds, fullscreenControl, geolocateControl, keyboard, touchZoom, doubleClickZoom и остальные), кроме имени ключа.

У метки те же опции, что у Marker в SDK. Своя картинка — icon: { url, size: [ширина, высота], anchor?, popupAnchor? }, адрес только http(s) или data:image. Без картинки рисуется оранжевая капля, color красит её. Ещё есть appearance, hint, title, keyboard, zIndexOffset, riseOnHover, draggable. Текст балуна только текстом, ссылка в link — только http(s).

tsx

<EvaMarker
  lnglat={[37.6173, 55.7558]}
  icon={{ url: 'https://example.com/pin.png', size: [32, 40], anchor: [16, 40] }}
>
  Наш офис
</EvaMarker>

React ​

React