@evamaps/sdk

Лёгкая 2D-карта для сайтов и приложений на тайлах OpenStreetMap: свой движок без Leaflet и MapLibre, без 3D и вращения. Метки, балуны, линии, многоугольники, круги, GeoJSON, кластеры, слои, геокодер. Типы TypeScript внутри, зависимостей нет.

Установка

npm i @evamaps/sdk

import { create } from '@evamaps/sdk';
import '@evamaps/sdk/style.css';

const map = create(document.getElementById('map'), {
  center: [37.6173, 55.7558], // [долгота, широта]
  zoom: 12,
  theme: 'light', // light | dark | gray
  key: 'pk_…', // ключ из кабинета, можно без него
});

Высоту контейнера задайте сами. Координаты везде [lng, lat], как в GeoJSON.

Для обычной страницы без сборки есть скрипт: <script src="https://evamaps.ru/sdk/1/evamaps.js"> — тот же код, объект window.EvaMaps.

Ключ и тайлы

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

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

Прямое и обратное геокодирование по России и СНГ: координаты по адресу, адрес по точке, подсказки при наборе.

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

const places = await geocode('Тверская 1', { near: map.getCenter(), limit: 5 });
// [{ label, lngLat: [lng, lat], country, region, city, street, housenumber, … }]

const place = await reverse([37.6173, 55.7558]); // или null, если рядом ничего нет

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

Для Vue и React

Готовые компоненты: @evamaps/vue и @evamaps/react.

Ссылки

Документация и справочник: https://evamaps.ru/docs/sdk/ · поиск адресов: https://evamaps.ru/docs/search

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