Объекты на интерактивной карте, прототип

ТЗ

• Подложка в виде карты с маркерами (можно выбрать любую sdk карт);
• От нижнего края пальцем выдвигается шторка с полем ввода, которая после отпускания фиксируется в ближайшем из трех положений: нижнее, среднее и верхнее;
• В шторке также присутствуют несколько вкладок;
• В каждой вкладке вертикально прокручиваемый список (при прокрутке списка до верхнего края шторка тянется вниз, при прокрутке списка вниз шторка разворачивается в верхнее положение);
• При нажатии на поле ввода шторка разворачивается в верхнее положение.

Референс.

Особенности реализации

• В качестве API карт использована библиотека Leaflet.
• Для управления пагинацией и свайпом категорий использована библиотека Swiper.

IMHO

Эти не баги, но фичи, сделаны не от невозможности реализации, а из лучших побуждений:

• Зона контентных карточек не отзывается на перетаскивание шторок, так как это мешает при прокрутке контента.
• Тестируя на разных экранах, пришел к выводу, что полезной фичей будет упразднить среднее положение на экранах ниже 600px, что и сделано.
• Разворачивание по клику на поиск выполняется только в режиме нижнего положения, так как в среднем это губит визуалищацию динамики на карте.

Сборка

vue3, vite, pinia, scss, postcss, eslint, stylelint, prettier

Установка зависимостей

Требуется Node не ниже 16.x.

npm i

Запуск в режиме разработки

npm run dev

В режиме разработки доступна ссылка во внутренней сети роутера для тестирования в браузерах мобильных устройств.