https://github.com/sarveshpro/mapbox-react-wrapper
Better React Wrapper for Mapbox GL
https://github.com/sarveshpro/mapbox-react-wrapper
gis map mapbox mapbox-gl mapbox-gl-js maps react typescript
Last synced: 5 months ago
JSON representation
Better React Wrapper for Mapbox GL
- Host: GitHub
- URL: https://github.com/sarveshpro/mapbox-react-wrapper
- Owner: sarveshpro
- License: mit
- Created: 2022-10-24T22:32:07.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-02T11:07:58.000Z (over 3 years ago)
- Last Synced: 2025-09-04T04:59:59.627Z (10 months ago)
- Topics: gis, map, mapbox, mapbox-gl, mapbox-gl-js, maps, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/mapbox-react-wrapper
- Size: 75.2 KB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Better React Wrapper for Mapbox GL
[](https://github.com/sarveshpro/mapbox-react-wrapper/actions/workflows/npm-publish.yml)
[](https://www.npmjs.com/package/mapbox-react-wrapper)
[](https://www.npmjs.com/package/mapbox-react-wrapper)
[](https://github.com/microsoft/TypeScript)
This is a React wrapper for Mapbox GL JS. I created this wrapper for 2 reasons:
1. Existing wrappers are not well maintained and are not up to date with the latest Mapbox GL JS API.
2. I wanted to support `mapbox-gl@v2` while still supporting `mapbox-gl@v1` because it's free.
## Installation
```bash
npm install mapbox-react-wrapper
```
By default, this package will install `mapbox-gl@v1`. If you want to use `mapbox-gl@v2`, you can install it like this:
```bash
npm install mapbox-react-wrapper mapbox-gl@2.10.0
```
## Usage
```jsx
import React from "react";
import { MapboxReact } from "mapbox-react-wrapper";
const App = () => {
return (
);
};
export default App;
```
## Props
| Prop | Type | Description |
| --------------- | ----------------------- | ------------------------------------------------------------------- |
| accessToken | string | Mapbox access token. Required if you are using mapbox's map styles. |
| mapStyle | string or object | Mapbox style object or url. |
| interactive | boolean | Whether the map is interactive. |
| height | CSSProperties['height'] | Height of the map. |
| width | CSSProperties['height'] | Width of the map. |
| mapboxOptions | MapboxOptions | Mapbox options. |
| idleSpin | boolean | Whether the map should spin when idle. |
| showMapControls | boolean | Whether to show map controls. |
| markers | CustomMarkerProps[] | Array of markers. |
| flyTo | CustomFlyToOptions | Fly to options. |
## Props supported in `mapbox-gl@v2`
| Prop | Type | Description |
| ---------- | -------------- | --------------------------- |
| projection | ProjectionLike | Projection used by the map. |
| fog | FogOptions | Fog options. |
## Examples
### 3D Globe Projection
Works with `mapbox-gl@v2`
```jsx
import React from "react";
import { MapboxReact } from "mapbox-react-wrapper";
const App = () => {
return (
);
};
export default App;
```
### Free Mapbox GL JS
Using open satellite layer from arcgis instead of mapbox map styles and `mapbox-gl@v1` where you don't need an access token if no mapbox APIs are being used. You can also use map style objects which follow [Mapbox Style Spec](https://docs.mapbox.com/mapbox-gl-js/style-spec/). [OpenMapTiles](https://openmaptiles.org/styles/) is a collection of Open-source map styles that follow Mapbox GL style specification. It requires a little bit of tweeking but it works. Maybe I can include support for other map styles in future versions. Best part is with `mapbox-gl@v1` you can use it for free. Don't forget to add proper attribution when using third party map styles.
```jsx
import React from "react";
import { MapboxReact } from "mapbox-react-wrapper";
const App = () => {
return (
);
};
export default App;
```
## Roadmap till v0.1.0
- [x] globe projection with `mapbox-gl@v2`
- [x] free usage with `mapbox-gl@v1`
- [x] custom map styles
- [x] default markers
- [x] partial support for raster layers
- [x] fly to options
- [x] idle spin
- [x] fog support with `mapbox-gl@v2`
- [ ] custom markers and popups
- [ ] geojson layers
- [ ] raster layers
- [ ] vector layers
- [ ] events
- [ ] clustering
## Contributing
Contributions are welcome! Please open an issue or a PR.
## License
[MIT](https://github.com/sarveshpro/mapbox-react-wrapper/blob/main/LICENSE)
## :heart: of Open Source
This project is part of the [Open Source Initiative](https://opensource.org/osd).
[](https://opensource.org/)
## Disclaimer
This project is not affiliated with Mapbox in any way. Mapbox is a registered trademark of [Mapbox, Inc.](https://www.mapbox.com/). I am using Mapbox's APIs and services in the spirit of Open Source. Any issues with the usage of Mapbox's APIs and services should be directed to [Mapbox, Inc.](https://www.mapbox.com/).