Клуб API Карт

Yandex Maps + React

Пост в архиве.

Думаю, многие слышали про Реакт — это такой подход к описанию интерфейсов. Штука чрезвычайно популярная, судя по количеству звёзд на гитхабе (их больше сорока тысяч).

Интерактивная карта на веб-странице легко описывается в реактовских терминах, что избавляет разработчика от рутинного яваскрипта. В простейшем случае достаточно добавить всего один тег с начальными настройками, в чуть более сложном — отдельными тегами описать слои и всякие панельки. Минимальный рабочий результат выглядит так: <MySuperMap center={ [45, 53.1] } zoom=15 />.

Мне попадались реактовские обёртки для Лифлета и Гуглокарт, а вот для карт от Яндекса такой не нашлось. Вдруг волшебный тег <YandexMap /> уже кем-то написан, просто его не так легко обнаружить? Поделитесь, пожалуйста, ссылкой, если видели!

Если реактовский компонент для карт — штука пока несуществующая, хочу обратить внимание на это ребят из Яндекса. Мне кажется, тут просматривается упущенная выгода :–) Судя по тенденциям последней пары лет, огромное количество интерфейсов будут состоять именно из реактовских компонентов. Возможность встроить карту от Яндекса так же просто, как сегодня тот же Лифлет — важное конкунретное преемущество, которое не стоит недооценивать.

Сейчас я работаю над проектом, первая фаза которого — перевод старого интерфейса сайта под Реакт без изменений. Именно такое ограничение привело меня на этот форум и не дало тихо перепрыгнуть на другой движок для карт, который уже совместим с Реактом. Надеюсь, какое-то решение получится найти.

Вот чего хочется от компонента <YandexMap />:

  • динамическая подргузка скрипта с АПИ при первом отображении компонента (многостраничное веб-приложение не должно генерировать лишний трафик, пока пользователь не переключился на страницу с картой),
  • возможность задавать базовые настройки карты (центр, масштаб, режимы, кнопки, границы перемещения и масштаба),
  • возможность добавлять пользовательские кнопки с самописными обработчиками (например, «вернуть исходный вид карты»),
  • возможность отображать пользовательскую карту, сделанную в конструкторе (часто это схема проезда со стрелочками).
  • в идеале: отображение статичной карты для тех, у кого отключен яваскрипт или при печати

Клуб, помоги с Реактом — не дай мне отчаяться и уйти к забугорному аналогу Яндекс.карт! :–)

9 комментариев
https://github.com/search?utf8=%E2%9C%93&q=react+yandex
Димику: прикольные компоненты :–)
https://github.com/sargonpiraev/react-yandex-maps/blob/master/src/components/YandexMap.jsx
https://github.com/effrenus/yandex-map-react/blob/master/README.md
A K,
Напишите хорошую реакт-обертку для АПИ и мы с удовольствием ее опубликуем.
dimik,
не уверен, что это задача обычного «внедрителя» карты на сайт. Создание хорошей обёртки для АПИ требует время, глубокое знание предмета и ответственность за дальнейшие обновления. Лично у меня всего этого нет :–)

Мне кажется, что разработка и поддержка реактовских компонентов не только для карт, но и для других похожих АПИ в прямых стратегических интересах Яндекса. Они, на мой взгляд, должны быть официальными, а не «народными» — для разработчиков так надёжнее. Я очень лоялен к вашей компании и желаю, чтобы вашими сервисами пользовались больше людей. В отсутствии качественной реакт-обёртки я вижу упущенную для вас выгоду и хочу, чтобы вы обратили на это внимание.

Как человек, который ограничен в ресурсах, у меня нет возможности брать на себя работу инженера коммерческой компании. Боюсь, что несмотря на моё к вам отличное отношение, в реактовском проекте пока что придётся внедрять что-то другое. Чисто по экономическим соображениям.

Искренне желаю вам обзавестись хорошими реактовскими обёртками для разных штук и дарить разработчикам удовольствие от сэкономленного времени.

1. npm install react-yandex-maps
2. import { YandexMap } from 'react-yandex-maps'
3. <YandexMap center={ [45, 53.1] } zoom=15 />
4. ?????
5. PROFIT!
A K,
Можете нам показать хотя бы одну официальную реакт-обертку, например, для АПИ Гугл?
dimik,
официальная реактовская обёртка для Гуглокарт мне не попадалась. Гугл в политических контрах с Фейсбуком, так что не факт, что она появится. Несмотря на это, есть минимум две возможности встроить гуглокарту как реактовский компонент:
https://github.com/istarkov/google-map-react
https://github.com/tomchentw/react-google-maps

Количество звёзд у каждой из этих обёрток выше, чем у Танка — топового проекта от Яндекса на гитхабе. Это значит, что у разработчиков веб-интерфейсов всегда будет возможность встроить Гуглокарту в Реакт за пять минут и быть уверенными, что компонент не забросят. Для Яндекс.карт сегодня нет ни одной готовой обёртки, даже собранной на коленке.

Как думаете, какой движок выберет команда, которая только начинает проект на Реакте? Как думаете, сколько сегодня таких команд? Какой у вас прогноз насчёт популярности Реакта через полгода, год, два?

Я не стратегический советник Яндекса, дивидендов от популярности Яндекс.карт у меня тоже нет. Решайте сами, ребята, стоит ли вам смотреть в этом направлении. Не хотите брать на себя создание компонентов для карт и других штук — ваше право. Ссылайтесь на Гугл, это отличный аргумент.

Когда-нибудь какой-нибудь энтузиаст что-нибудь на выходных да и запилит, так что переживать за собственную долю на рынке нечего :–)
A K,
ну чисто технически я бы поставил бы звездочку варианту от effrenus - он член команды АПИ. И свой вариант компоненты обещает доделать.
Маушов Динислам
10 августа 2016, 19:25
dimik,
лол, то есть типа раз у гугла нет, то и вам можно не делать?) Такая у вас логика?)
Маушов Динислам,
Нет это значит, что написанием и поддержкой оберток для разных фреймворков (количество которых сейчас огромно) занимаются энтузиасты, которые эти фреймворки используют в своих проектах. Если команда АПИ будет этим заниматься, у нее не будет времени заниматься АПИ.
Реакт – хороший фреймворк, но не единственный, есть еще очень много других и выделять его я бы не стал.


Выше написали – используйте обертку от effrenus.
Официальной не будет. Вопрос закрыт.