Skip to content

Commit

Permalink
Updated docs for using non-mapbox sourced tiles (#730)
Browse files Browse the repository at this point in the history
  • Loading branch information
thomasgwatson authored and Pessimistress committed Feb 20, 2019
1 parent 039e018 commit 5ecbc72
Showing 1 changed file with 21 additions and 1 deletion.
22 changes: 21 additions & 1 deletion docs/get-started/mapbox-tokens.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,29 @@ But we would recommend using something like [dotenv](https://github.com/motdotla

## Display Maps Without A Mapbox Token

It is possible to use the map component without the paid service, if you host your own map tiles. You will need a custom Mapbox style that points to your own [vector tile source](https://www.mapbox.com/mapbox-gl-js/style-spec/#sources-vector), and pass it to `ReactMapGL` using the `mapStyle` prop.
It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). You will need a custom Mapbox GL style that points to your own [vector tile source](https://www.mapbox.com/mapbox-gl-js/style-spec/), and pass it to `ReactMapGL` using the `mapStyle` prop. This custom style must match the schema of your tile source.

Open source tile schemas include:

- [TileZen schema](https://tilezen.readthedocs.io/en/latest/layers/)
- [OpenMapTiles schema ](https://openmaptiles.org/schema/)

Some useful resources for creating your own map service:

- [Mapbox Vector Tile Spec](https://www.mapbox.com/developers/vector-tiles/)
- [Open source tools](https://github.com/mapbox/awesome-vector-tiles)

If you are using a third party service that requires header based authentication, you can do this by defining a function to pass to `ReactMapGL` using the `transformRequest` prop.

An example function:

```js
const transformRequest = (url, resourceType) => {
if (resourceType === 'Tile' && url.match('yourTileSource.com')) {
return {
url: url,
headers: { 'Authorization': 'Bearer ' + yourAuthToken }
}
}
}
```

0 comments on commit 5ecbc72

Please sign in to comment.