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

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

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

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

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

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

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

Две последние указанные статьи соответствуют 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

Use Mapbox GL JS in a React app | Help

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

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

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

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

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

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

An approach to integrating MapboxGL in React / Redux.

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

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

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

• Зум

• Наклон

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

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

• и т.п.

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

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

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