Как в React и react-yandex-maps отмечать объект в списке при клике на него на карте?

Question

[boxe]

Привет, Тостер!

Застрял, реально застрял с такой проблемой. Есть станица «Контакты» на сайте. На странице — карта и список объектов (филиалов). Остальное элементы опустим для упрощения.

Что нужно: взять из API информацию о филиале, добавить в список под картой и поставить соответствующую метку на карте (в API есть даже координаты).

Также нужно при клике на метку на карте вывести отдельный блок-информацию (который почти повторяет блок-описание, но содержит дополнительные данные). Схематично для простоты восприятия (гео-метки сделал специально разные, это не важно):



Для карты используется react-yandex-maps. Реакт только учу, поэтому много туплю из-за свалившихся задач.

Вопросы такие:

1. Как одновременно выводить филиал и в списке в филиалов и добавлять гео-метку на карту?
2. Как при клике на гео-метку развернуть дополнительное описание и поменять иконку на карте (чтобы было видно, куда ткнули)? Вот так наглядно:


Как правильно это сделать? В одном компоненте? Передавать состояния? Я увы, плохо всё это понимаю, но стараюсь. Подскажите, пожалуйста?

Comments

[Олег Драпеза]

На яндекс картах достаточно только вывести метки, это объект Placemark.
На каждый placemark вы можете повесить обработку события click, и на этом этапе можно про яндекс карты забыть.

Все внешние элементы (вроде дополнительного описания) создаете как react компоненты, можете абсолютно позиционировать поверх карты, после срабатывания события click - выводите инфу о выбранном объекте.

По поводу изменения цвета метки при наведении или клике - ссылка на пример - в используемом плагине и события, и свойства - меняются как обычные props компонента.

react-yandex-maps - это удобная абстракция над API яндекс карт, которая повторяет этот API, но в декларативном стиле, так что разбираться лучше с самим API, и вам не составит труда все реализовать на react-yandex-maps, или даже написать свои компоненты - обертки.