https://github.com/dqunbp/use-mapbox-gl
mapbox-gl react hook
https://github.com/dqunbp/use-mapbox-gl
mapbox mapbox-gl react react-hook
Last synced: 10 months ago
JSON representation
mapbox-gl react hook
- Host: GitHub
- URL: https://github.com/dqunbp/use-mapbox-gl
- Owner: dqunbp
- Created: 2019-09-19T22:13:36.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T20:47:58.000Z (over 3 years ago)
- Last Synced: 2024-12-17T05:57:32.610Z (over 1 year ago)
- Topics: mapbox, mapbox-gl, react, react-hook
- Language: JavaScript
- Homepage: https://dqunbp.github.io/use-mapbox-gl/
- Size: 8.18 MB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# use-mapbox-gl
Simple, 0 dependency hook around [mapbox-gl](https://docs.mapbox.com/mapbox-gl-js/api/)
[](https://www.npmjs.com/package/use-mapbox-gl)
[](https://conventionalcommits.org)
## 🖥 Demo
Check out the [demo](https://dqunbp.github.io/use-mapbox-gl/)
## 📦 Installation
##### with npm
$ npm install --save use-mapbox-gl
##### with yarn
$ yarn add use-mapbox-gl
## ⚠️ Don't forget install peer dependencies! If it not alredy installed
##### with npm
$ npm install --save mapbox-gl
##### with yarn
$ yarn add mapbox-gl
## 💅 Import styles. You also need to use `mapbox-gl` styles
If you are using `create-react-app` add this link to the `public/index.html` into the `head` tag
```html
```
**OR** You can also import styles from `mapbox-gl` dependencies
Add this import to your `src/index.js`
```js
import "mapbox-gl/dist/index.css"
```
## 📖 Examples
### 🔗 With token
```jsx
import React from "react";
import { useMapboxGl } from "use-mapbox-gl";
function BasicMap() {
const containerRef = useRef();
useMapboxGl(containerRef, {
style: "mapbox://styles/mapbox/streets-v11",
accessToken: "your_access_token",
});
return
;
}
export default BasicMap
```
### 🔗 Without token
For using without token, you need to define custom base map style, as example:
```js
import React from "react";
import { useMapboxGl } from "use-mapbox-gl";
const osmStyle = {
version: 8,
sources: {
osm: {
type: "raster",
tiles: [
"https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
"https://b.tile.openstreetmap.org/{z}/{x}/{y}.png",
"https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
],
tileSize: 256,
},
},
layers: [
{
id: "osm",
source: "osm",
type: "raster",
},
],
};
function WithoutTokenMap() {
const containerRef = useRef();
useMapboxGl(containerRef, {
style: osmStyle,
zoom: 9,
center: [30, 50],
});
return
;
}
export default WithoutTokenMap
```
## 🕹 API
#### 🔗 useMapboxGl
- **container** - The HTML element `React` `ref` in which Mapbox GL JS will render the map
- **options** *(optional)* - object with native [mapbox-gl](https://docs.mapbox.com/mapbox-gl-js/api/map/#map-parameters) parameters, without container prop
- **setMapApi** *(optional)* - map load callback, called when the [mapbox-gl load event] (https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:load) occurs
- **cleanMapApi** *(optional)* - map cleanup callback, called when the map container is unmounted
```ts
useMapboxGl(
container: React.MutableRefObject
options?: Omit
setMapApi?: (map: mapboxgl.Map) => void
cleanMapAPI?: () => void
)
```
---
## License
MIT © [dqunbp](https://github.com/dqunbp)