Яндекс Карты в React Native вместо Google Maps — открытый код для мобильных приложений

Кому полезно: доставкам, агрегаторам такси, торгово-розничным сетям, интернет-магазинам с пунктами выдачи, сетевым общепитам.

Если при разработке мобильного приложения на React Native вы используете Google Maps, то у вас есть две проблемы:

  • оплата невозможна;
  • Google могут заблокировать в России.

Вам нужно решение, которое подойдёт для разных задач: установки маркеров, геокодинга, построения маршрутов.

Попробуйте Яндекс Карты, ниже мы поделимся готовым решением для вашей команды разработки.

Сильные стороны Яндекса

  • Детализация. На карте России и СНГ больше адресов и они точнее.
  • Одна цена на все продукты: Static API, MapKit SDK, JavaScript API и Геокодер.

Как всё случилось

Три года назад мы разрабатывали клиентское приложение, где использовался Yandex MapKit.

Yandex MapKit – это программная библиотека картографических данных

Создавать приложение решили на React Native, чтобы сэкономить время, но это потребовало адаптировать MapKit к iOS и Android. Результат работы – библиотека с открытым исходным кодом “react-native-yamap”, который используем в разработке и сегодня.

В течение трёх лет Яндекс Карты менялись. К нам приходили другие заказчики с новыми задачами для MapKit: нужно было реализовать геокодинг, научить код строить маршруты или проставлять кастомные маркеры. С наращиванием этих запросов библиотека усложнялась.

Так появилась версия кода 4.0.0

Готовое решение React Native-Yandex Map

Репозиторий доступен на GitHub – там выложен бесплатный открытый код для разработчиков на React Native.

Что нужно, чтобы использовать код у вас в приложении:

1. Установить зависимость с Яндекс Картами через пакетный менеджер

2. Получить API Ключ в Личном кабинете Яндекса

3. Инициализировать библиотеку с этим API Ключом

Возникли трудности?

Напишите нам, если нужны дополнительные фичи, мы можем сделать их в свободное от работы время и выложить в открытый доступ. Горят сроки по проекту? Возьмём запрос на доработку библиотеки в рабочее время.

Если у вас нет своей команды и в приложении нужны Яндекс Карты, мы готовы взять проект в работу.

0
31 комментарий
Написать комментарий...
Pavel Vladimiroff

спасибо, попробуем! очень актуальная тема сейчас. буквально прямо сейчас 4 приложения в очереди на смену картографического сервиса

Ответить
Развернуть ветку
vvdev
Автор

Если будут вопросы по нашему коду или в целом, пишите в комментах. Подскажем

Ответить
Развернуть ветку
Иван Коломбет

Приветствую!

В прошлом году купил плагин (Вордпресс) для которого необходим ключ Google Maps, естественно ключ мой отвалился как и у других в России. Хотел бы узнать можно место Google Maps использовать к примеру Яндекс.

Вот этот плагин: https://codecanyon.net/item/quickcab-woocommerce-taxi-booking-plugin/23798539

Ответить
Развернуть ветку
vvdev
Автор

Здравствуйте. Передали вопрос разработчикам, напишем, как будет ответ

Ответить
Развернуть ветку
vvdev
Автор

Написали в личные сообщения

Ответить
Развернуть ветку
Макс

Не могли бы вы тоже прислать в личное как на woordpress заменить эти карты Googla на Яндекс

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Евгений Назаров

Как использовать балуны? Либо какой-то способ сделать callout/tooltip?

Ответить
Развернуть ветку
vvdev
Автор

Передали вопрос разработчикам, скоро появится ответ

Ответить
Развернуть ветку
vvdev
Автор

Ответ отдела разработки:
Оставьте запрос на добавление функционала в issue на гитхабе. Рассмотрим в свободное от работы время.

Ответить
Развернуть ветку
pashebor

Есть бага открытия карт со смещением в ios. Соответственно функция центра карты так же отрабатывает со смещением. Баг воспроизводится через раз(версия 4.0.15)

Ответить
Развернуть ветку
vvdev
Автор

Добрый вечер. Подскажите, нашли решение?

Ответить
Развернуть ветку
pashebor

Да, как раз в заведенной проблеме репозитория есть предложенные решения (https://github.com/volga-volga/react-native-yamap/issues/97). Но это всё равно не полноценное решение, ждём фикса.

Ответить
Развернуть ветку
vvdev
Автор

Хорошо, с понедельника отправим запрос разработчикам, пофиксят. Отпишемся вам, когда будет готово

Ответить
Развернуть ветку
pashebor

Issue такое есть(https://github.com/volga-volga/react-native-yamap/issues/97). Пока прибег к решению из комментария к нему

Ответить
Развернуть ветку
Alexander Solovyov

Есть вариант использования с Expo ?

Ответить
Развернуть ветку
vvdev
Автор

Здравствуйте, в рабочие дни передадим вопрос разработчикам. Ответим вам

Ответить
Развернуть ветку
vvdev
Автор

Доброе утро. Вот что ответили в отделе разработки:
Экспо не позволяет подключать сторонние нативные зависимости
Только если сделать eject. Инструкция https://docs.expo.dev/expokit/eject/

Ответить
Развернуть ветку
Арьков Александр

Подключил карту, но она не отображается. Что делать?

Ответить
Развернуть ветку
vvdev
Автор

Здравствуйте, сейчас передадим вопрос в отдел разработки

Ответить
Развернуть ветку
vvdev
Автор

Вот что ответили: https://github.com/volga-volga/react-native-yamap/issues/45

Если будут еще вопросы, пишите сразу на ГитХаб, так удобнее)

Ответить
Развернуть ветку
Даниил Бабакин

Здравствуйте! Подскажите пожалуйста, пишет ошибку Unable to resolve module 'react-native/Libraries/Image/resolveAssetSource.js'. Перепробовал все , что было в интернете( к несчастью, "гайдов" было мало ).Ошибку выдает на этапе подключения( то есть я делаю импорт Yamap from 'react-native', а после этого сразу же появляется ошибка )

Ответить
Развернуть ветку
Yunus Nazarov

Здравствуйте, я не нахожу двухточечную линию от линии a до линии b. у этого пакета есть такая функция?

Ответить
Развернуть ветку
Wangable

А вы как запустили карту у меня даже не запусткается, можете помочь пожалуйста)

Ответить
Развернуть ветку
Дмитрий Соколов

Добрый день! У меня небольшая проблема, при первом рендере компонента <Marker/>, картинки маркеров (передаваемые любым возможным способом, через source, через children), не отображаются. При повторной перезагрузке приложения все ок. В чем может быть проблема?

Ответить
Развернуть ветку
Влад Кошечкин

Добрый день, проблему лучше добавить в issue, мы стараемся отвечать в свободное время по некоммерческим вопросам
Также мы готовы осуществлять поддержку проекта в рамках какого либо проекта в рамках коммерческого договора в первом приоритете/с выделенной командой под задачи

Ответить
Развернуть ветку
Wangable

А вы как запустили карту у меня даже не запусткается, можете помочь пожалуйста)

Ответить
Развернуть ветку
Tom Jerry

Как сделать добавление маршрута на карту?

Ответить
Развернуть ветку
Роман Тимми

Здравствуйте, подойдет ли ваша библиотека для простого отображения маркеров в реальном времени (пользователи на карте), больше нам ничего не нужно. Ознакомился с условиями пользования yandex api, но остался вопрос - можем ли мы использовать вашу библиотеку на бесплатных условиях yandex api, и разрешает ли yandex api таким образом отображать пользователей? или все таки нужно приобретать коммерческую версию yandex api?

Ответить
Развернуть ветку
Igor Yaremchuk

Добрый день, может быть вы сможете мне помочь/подскать, как можно реализовать такую стрелочку указывающую на направление поворота при построение маршрута?

Ответить
Развернуть ветку
Wangable

Здравствуйте, я установил эту библиотек на свою программу но выводит такую ошибку

Ответить
Развернуть ветку
28 комментариев
Раскрывать всегда