@evamaps/react

Карта EvaMaps для React 18 и 19: компонент EvaMap и метки EvaMarker. Тайлы OpenStreetMap, лёгкий 2D-движок без Leaflet и MapLibre, типы TypeScript внутри.

Установка

npm i @evamaps/react

Нужен react 18 или 19. Пакет сам тянет @evamaps/sdk, ставить его отдельно не нужно.

Пример

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

<EvaMap center={[37.6173, 55.7558]} zoom={12} style={{ height: 400 }} />

Высоту задайте сами. Стили подключаются один раз, те же, что у SDK. Координаты везде [lng, lat].

Ключ кабинета — проп apiKey (в SDK это key, в React это имя занято).

onCenterChange и onZoomChange сообщают новый вид, onReady отдаёт объект карты. Опции карты те же, что у create() в SDK: theme (light, dark, gray), maxBounds, fullscreenControl, geolocateControl и остальные.

Поиск адресов

geocode (координаты по адресу) и reverse (адрес по точке) импортируются из этого же пакета:

import { geocode, reverse } from '@evamaps/react';

const places = await geocode('Тверская 1', { limit: 5 });
const place = await reverse([37.6173, 55.7558]); // или null

Поиску нужен ключ (бесплатный подходит), привязанный в кабинете к домену сайта. Передайте его в apiKey у карты — поиск возьмёт его сам. Подробнее: https://evamaps.ru/docs/search

Ключ и тайлы

Тайлы отдаются только через EvaMaps SDK, <eva-map> и iframe. Без ключа — 5 000 загрузок карты в месяц на сайт, ключ и тарифы — в кабинете https://app.evamaps.ru.

Ссылки

Документация: https://evamaps.ru/docs/react SDK без фреймворка: @evamaps/sdk

Подпись © OpenStreetMap · © EvaMaps на карте видна всегда и не отключается.