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

@pbe/react-yandex-maps — это обертка для API Яндекс.Карт, которая позволяет отображать карты Яндекса в вашем React приложении с минимальными усилиями 🎉

Установка

Используйте npm/yarn для установки библиотеки из npm:

Через npm:

npm install --save @pbe/react-yandex-maps

Через yarn:

yarn add @pbe/react-yandex-maps

Добавляем карту в приложение

Добавление карт в приложение можно разделить на два этапа.

Во-первых, мы добавим компонент провайдера, который будет обрабатывать загрузку API Яндекс.Карт и предоставлять его любому интересующему компоненту на странице. Обычно вы не хотите иметь несколько провайдеров на одной странице. Хорошее место для размещения вашего провайдера, может быть в верхней части вашего приложения:

import { YMaps } from '@pbe/react-yandex-maps';

const App = () => (
  <YMaps>
    <div>My awesome application with maps!</div>
  </YMaps>
);

Затем добавьте компонент Map с желаемым состоянием где-нибудь на странице:

import { YMaps, Map } from '@pbe/react-yandex-maps';

const App = () => (
  <YMaps>
    <div>
      My awesome application with maps!
      <Map defaultState={{ center: [55.75, 37.57], zoom: 9 }} />
    </div>
  </YMaps>
);

Вот и все! Теперь, как только API Яндекс.Карт загружается YMaps компонентом провайдера, Map компонент будет отображать ymaps.Map объект на странице.

Прежде чем вы начнете экспериментировать с библиотекой, я настоятельно рекомендую быстро просмотреть раздел "Что поддерживается?" и "Основные принципы"

Что поддерживается?

Эта библиотека представляет собой тонкую обертку над API Яндекс.Карт, многие объекты и функции API Яндекс.Карт поддерживаются компонентами React, но не все и не все их возможности.

Поддерживаемые возможности

• Изменение запроса API Яндекс.Карт через YMaps компонент провайдера
• Получение доступа к API Яндекс.Карт в ваших компонентах через withYMaps HOC
• Точечная загрузка необходимых модулей API с API модулей Яндекс.Карт
• Контролируемые и неконтролируемые компоненты для каждого поддерживаемого объекта
• Корпоративный API через YMaps query проп

Контролируемые компоненты не 100% контролируемые, так как нет возможностей остановить обновление объектов Яндекс.Карты. Поэтому, при использовании контролируемых компонентов, вы должны держать в голове, что state/properties/options и объекты Яндекс.Карты могут быть не синхронизированны.

MapObjects

Map, Panorama

GeoObjects

GeoObject, Placemark, Polyline, Rectangle, Polygon, Circle, Clusterer, ObjectManager

Controls

Button, FullscreenControl, GeolocationControl, ListBox, ListBoxItem, RouteButton, RouteEditor, RoutePanel, RulerControl, SearchControl, TrafficControl, TypeSelector, ZoomControl

Что не поддерживается?

Отрисовка React DOM нод для Яндекс.Карты фабрики шаблонов, не поддерживается (т.е. вы не можете визуализировать содержимое балуна с помощью этой библиотеки), смотри FAQ для больше информации.