Integration

Our tile service integrates easily with Mapbox. We provide you with a url parameter called x_client_id or a header called x-client-id. If you use the x_client_id url parameter it should work out of the box. If you would like to use the headers you will need to transform your requests towards Mapbox. How you do that varies per platform.

Using the URL Parameter

When using the URL parameter you can simply use the tile service base URL and extend it like this;

Tile Service / URL Parameter
https://api.chargetrip.io/station/{z}/{x}/{y}/tile.mvt?x_client_id='YOUR_CLIENT_ID_HERE'

Transforming Mapbox requests

Since adding headers to a Mapbox request is not as straight-forward as using the URL parameter we decided to outline the basics per platform. For more detailed information head over to Mapbox.

Javascript

When using the mapboxgl Javascript library you can use the transformRequest parameter. Here is a snippet to give you an idea of how this will look when we combine everything together;

Tile Service / Header
var map = new mapboxgl.Map({  container: 'map',  center: [-122.420679, 37.772537],  zoom: 13,  transformRequest: (url, resourceType)=> {    if(resourceType === 'Tile' && url.startsWith('https://api.chargetrip.io')) {       return {        url: url,        headers: { "x-client-id": "YOUR_CLIENT_ID_HERE" },      }    }  }});

React Native

When using the Mapbox react native implementation it's pretty similar to the javascript variant but you will need to take a few additional steps. You can read all about it in our blogpost.

iOS

When using Mapbox version 9 or lower for iOS you will need to use a method swizzler. A more detailed explanation is provided inside this Github issue.

When using Mapbox version 10 or up for iOS, you can subclass the networking layer and add your headers. At the time of writing, it should look like this;

Tile Service / Header
class MapboxNetworkingService: HttpServiceInterface {  func request(for request: HttpRequest, callback: @escaping HttpResponseCallback) -> UInt64 {    var urlRequest = URLRequest(url: URL(string: request.url)!)         let methodMap: [MapboxCommon.HttpMethod: String] = [      .get: "GET",      .head: "HEAD",      .post: "POST"    ]         urlRequest.httpMethod = methodMap[request.method]!    urlRequest.httpBody = request.body    urlRequest.allHTTPHeaderFields = request.headers         if request.url.contains("https://api.chargetrip.io") {      urlRequest.addValue("YOUR_CLIENT_ID_HERE", forHTTPHeaderField: "x-client-id")      urlRequest.addValue("max-age=0", forHTTPHeaderField: "Cache-Control")    }         let task = URLSession.shared.dataTask(with: urlRequest) { (data, response, error) in      let expected: Result<HttpResponseData, HttpRequestError>             if let error = error {        let requestError = HttpRequestError(type: .otherError, message: error.localizedDescription)        expected = .failure(requestError)      } else if let response = response as? HTTPURLResponse, let data = data {        var headers: [String: String] = [:]        for (key, value) in response.allHeaderFields {          guard let key = key as? String,                let value = value as? String else {            continue          }                     headers[key.lowercased()] = value        }                 let responseData = HttpResponseData(headers: headers, code: Int64(response.statusCode), data: data)        expected = .success(responseData)      } else {        let requestError = HttpRequestError(type: .otherError, message: "Invalid response")        expected = .failure(requestError)      }             let response = HttpResponse(request: request, result: expected)      callback(response)    }         task.resume()         return UInt64(task.taskIdentifier)  }}

Don't forget to set this subclass early on in the app's lifecycle;

Tile Service / Mapbox Networking
HttpServiceFactory.setUserDefinedForCustom(MapboxNetworkingService())