diff --git a/docs/get-started/mapbox-tokens.md b/docs/get-started/mapbox-tokens.md index d15eff6e..9c1bb6fd 100644 --- a/docs/get-started/mapbox-tokens.md +++ b/docs/get-started/mapbox-tokens.md @@ -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 } + } + } + } +```