Managing mapbox-gl state in React app
Tags: react, mapbox, xstate, javascript
Published: 2021-06-25 11:11:05

## Description of the problem

In the course of my work at [geoalert.io](http://geoalert.io/), I have repeatedly encountered the problem of managing the state of an application in `React` with a built-in [mapbox-gl](https://docs.mapbox.com/mapbox-gl-js/api/)

I plan to cover the topic in a series of articles, including this one:

- Managing `mapbox-gl` state in `React` app
- [Using `mapbox-gl`  in `React` with `Next.js`](https://dev.to/dqunbp/using-mapbox-gl-in-react-with-next-js-2glg)
- Managing the state of a `React` application with `mapbox-gl` using `XState`

The last two articles mentioned correspond to the 2 main problems I encountered while using `mapbox-gl` in `React`

- Embedding `mapbox-gl` in `React` - storing the built-in `mapbox-gl` instance and making it accessible from other app components
- Managing the state of a `React` app with `mapbox-gl` - since `mapbox-gl` has an internal state, you need to synchronize it with the state of the app itself

## Embedding `mapbox-gl`in `React`

There are several options for solving this problem, here are the most popular among them:

- Using ready-made wrapper libraries
- Self-native integration, for this option I would highlight 2 cases
    - Implementing as a `React Component`
    - Storing the map instance outside of `React`

### Using ready-made wrapper libraries

The most popular among them

- [react-map-gl](https://github.com/visgl/react-map-gl) - is a solution from [uber](https://www.uber.com/), perhaps the most sophisticated among others, one of the main drawbacks:
    - Steep learning curve, having sufficiently rich functionality, including for managing state, it is rather difficult to understand the library api
    - Has [almost 1MB bundle size](https://bundlephobia.com/package/react-map-gl@6.1.16), which is quite a lot
- [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl) - ranks second in popularity, has an order of magnitude smaller bundle size and more concise and easy-to-understand api
- [@urbica/react-map-gl](https://github.com/urbica/react-map-gl) - the size of the bundle and api is about the same as [react-mapbox-gl](https://github.com/alex3165/react-mapbox-gl)
- [use-mapbox-gl](https://github.com/dqunbp/use-mapbox-gl) - I will use the opportunity to attach my solution, this is a lightweight React hook wrapping `mapbox-gl`

### Self-service native integration

#### Implementing as a `React Component`

The main idea of this approach is to create a web map component, which must contain a `DOM` node for initializing the map, initialization logic, and it must also store an instance of the created map

The `mapbox-gl` documentation contains [instructions](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/) on how to do this for a new `React` application.


Continuation and more detailed consideration of this issue, with various examples of implementation, wait in the next article

{% link https://dev.to/dqunbp/using-mapbox-gl-in-react-with-next-js-2glg %}

#### Storing the map instance outside of `React`

An example of such an implementation will also be considered in the next article

## Managing state of `React` app with `mapbox-gl`using `XState`

As a rule, tutorials on using `mapbox-gl` in `React` end after the method of integrating the first into the second is described, articles about state management in such applications are rare, most articles on this topic are outdated at the moment

[Here's an example](https://medium.com/critigenopensource/an-approach-to-integrating-mapboxgl-in-react-redux-b50d82bc0ed0) of a nice article from [@Cole Beese](https://medium.com/@cole.bessee)

This article describes an example of state management with Redux using [React class components](https://reactjs.org/docs/components-and-props.html)

As mentioned above `mapbox-gl` has internal state for example properties such as

- Map center coordinates
- Zoom
- Bearing
- Current map style
- Vector or raster user layers
- etc.

Usually in the application interface, in addition to the map itself, there are elements whose display depends on the internal state of the map, for example, an element that displays the current coordinates and zoom, [as in the above example](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dxhd25aak1352lptf2x5.png)
  

In addition to the state inside the map instance, the application can also have its own internal state, in our case, [XState](https://github.com/davidkpiano/xstate)  will be used for this

I'll cover this in more detail with an example of using `XState` in my next post

Useful links:

- [MAPBOX GL JS + REACT](https://www.mapbox.com/blog/mapbox-gl-js-react)
- [Use Mapbox GL JS in a React app](https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/)
- [An approach to integrating MapboxGL in React / Redux](https://medium.com/critigenopensource/an-approach-to-integrating-mapboxgl-in-react-redux-b50d82bc0ed0)