Как стать автором
Обновить

Управление состоянием mapbox-gl в React

Время на прочтение 3 мин
Количество просмотров 2.7K

Описание проблемы

В процессе моей работы я не раз сталкивался с проблемой управления состоянием приложения на React со встроенной картой mapbox-gl.

Я планирую посвятить теме цикл статей, включая эту:

ЗЫ: заголовки без ссылок запланированы для написания либо еще в процессе

Две последние указанные статьи соответствуют 2 основным проблемам с которыми я столкнулся в процессе использования mapbox-gl в React

  • Встраивание mapbox-gl в React - хранение встроенного инстанса mapbox-gl и организация доступ к нему из других компонентов приложения

  • Управление состоянием приложения React с mapbox-gl- так какmapbox-gl имеет внутреннее состояние, необходимо синхронизировать его с состоянием самого приложения

Встраивание mapbox-gl в React

Есть несколько вариантов решения данной задачи, вот наиболее популярные среди них:

  • Использование готовых библиотек-оберток

  • Самостоятельная нативная интеграция, для этого варианта я бы выделил 2 случая

    • Имплементация в виде компонента React

    • Хранение инстанса карты вне React

Использование готовых библиотек-оберток

Наиболее популярные среди них:

  • react-map-gl - решение от uber, пожалуй самое навороченное среди прочих, один из главных недостатков:

    • Steep learning curve, имея достаточно богатый функционал, в том числе для управления состоянием, достаточно сложно разобраться в api библиотеки

    • Имеет почти 1мб размер бандла что весьма много

  • react-mapbox-gl - занимает второе место по популярности, имеет на порядок меньший размер бандла и более лаконичный и простой для понимания api

  • @urbica/react-map-gl - по размеру бандла и api находится примерно на одном уровне с react-mapbox-gl

  • use-mapbox-gl - пользуясь случаем приложу свое решение, это легковесный React hook обертывающий mapbox-gl

Самостоятельная нативная интеграция

Имплементация в виде компонента React

Основная идея данного подхода - создание компонента веб-карты, который должен содержать dom node для инициализации карты, логику инициализации, так же он должен хранить инстанс созданной карты.

В документации mapbox-gl есть инструкция как это сделать для нового приложения на React

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

Хранение инстанса карты вне React

Пример подобной реализации будет также рассмотрен в следующей статье

Управление состоянием React приложения с mapbox-gl с использованием XState

Обычно туториалы по использованию mapbox-gl в React заканчиваются после того как описан способ интеграции первого во второе, артикли об управлении состоянием в подобных приложениях встречаются редко, большинство артиклей на эту тему на данный момент устарели.

Вот, например, неплохая статья от @Cole Beese

В данном артикле описан пример управления состоянием с помощью Redux с использованием классовых компонентов React.

Как уже упоминалось выше, mapbox-gl имеет внутреннее состояние, например такие свойства как:

  • Координаты центра карты

  • Зум

  • Наклон

  • Текущий стиль карты

  • Векторные или растровые пользовательские слои

  • и т.п.

Как правило в интерфейсе приложения помимо самой карты есть элементы отображение которых зависит от внутреннего состояния карты, например элемент отображающий текущий координаты и зум, как в упомянутом выше примере:

Помимо состояния внутри инстанса карты в приложении так же может быть свое внутреннее состояние, в нашем случае для этого будет использоваться XState.

Я рассмотрю это более подробно на примере использования XState в своем следующем посте.

Теги:
Хабы:
+6
Комментарии 1
Комментарии Комментарии 1

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн