frontend-1.md

Отображение объектов на карте 🗺️

Тестовое задание на позицию frontend разработчика.

Задача

Реализовать приложение, в котором отображается карта с нанесенными на нее маркерами объектов из представленного ниже списка. По нажатию на объект из списка он становится выбранным (появляется какой-то отличительный признак, например, подсветка его строки), вместе с этим карта изменяет масштаб до 10 уровня и центрируется на этом маркере.

Данные объектов доступны прямо в репозитории по ссылке.

Модель объекта следующая:

interface Object {
  id: number
  // Широта
  latitude: number
  // Долгота
  longitude: number
  // Имя
  name: string
}

Требования

• TypeScript* / JavaScript

• Использование Leaflet

Дополнительно (будет преимуществом)

• Использование современного фреймворка: Angular* / React / Vue

• Реализация строки поиска (фильтрация списка с помощью поисковой фразы)

Звездочкой (*) отмечены приоритетные технологии, с которыми Вам предстоит работать у нас в команде.

Дизайн

Схематичный дизайн представлен ниже, делать точь-в-точь не обязательно! Важнее архитектура проекта и организация кода, чем внешний вид.

Ссылка на Figma

Решение

Решение должно быть представлено публичным репозиторием или zip-архивом. В проекте необходимо добавить readme с инструкцией по запуску приложения. Результат решения (ссылку на репозиторий или zip-архив) следует отправить на почту по адресу: [email protected].

Удачи! <3