Updated docs for using non-mapbox sourced tiles (#730)

This commit is contained in:
Tom Watson 2019-02-20 14:06:05 -08:00 committed by Xiaoji Chen
parent 039e018c91
commit 5ecbc7268c

View File

@ -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 }
}
}
}
```