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
- 01
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
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
const 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
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
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
- 01
HttpServiceFactory.setUserDefinedForCustom(MapboxNetworkingService())