Integration

The tile service integrates easily with Mapbox and other maps providers (Google Maps, Leaflet etc). However to access the tile service, you need to include authorization headers in your requests. The method for setting these headers varies per platform. Below, we provide examples for configuring authorization headers with different Mapbox SDKs:

For an overview on API authorization please head to this section.

Web

With the MapboxGL JS library, you can use the transformRequest function to add the necessary headers. Get started with this example:

Tile Service / Integration / Web

          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_CHARGETRIP_CLIENT_ID",          "x-app-id": "YOUR_CHARGETRIP_APP_ID",        },      };    }  },});

A fully working example with Mapbox Maps using the MVT API can be found here, while an example with Google Maps using the JSON API is available here.

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 / Integration / iOS

          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_CHARGETRIP_CLIENT_ID", forHTTPHeaderField: "x-client-id")      urlRequest.addValue("YOUR_CHARGETRIP_APP_ID", forHTTPHeaderField: "x-app-id")      // The following line is only required if application security is set-up via the Chargetrip dashboard:      urlRequest.addValue("YOUR_CHARGETRIP_APP_IDENTIFIER", forHTTPHeaderField: "x-app-identifier")    }     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())

Android

Install and configure the Mapbox SDK for Android as explained on Mapbox documentation.

Set the Mapbox access token and custom headers in the application object or in the activity that contains the MapView:

Tile Service / Integration / Android

          package com.chargetrip.example import android.os.Bundleimport androidx.appcompat.app.AppCompatActivity import com.mapbox.mapboxsdk.Mapboximport com.mapbox.mapboxsdk.module.http.HttpRequestUtil import okhttp3.OkHttpClientimport okhttp3.Interceptorimport okhttp3.Response class MapViewActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)         Mapbox.getInstance(this, "YOUR_MAPBOX_ACCESS_TOKEN")         val httpClient = OkHttpClient.Builder()            .addInterceptor(object: Interceptor {                override fun intercept(chain: Interceptor.Chain): Response {                    val request = chain.request().newBuilder()                        .addHeader("x-client-id", "YOUR_CHARGETRIP_CLIENT_ID")                        .addHeader("x-app-id", "YOUR_CHARGETRIP_APP_ID")                        // The following line is only required if application security is set-up via the Chargetrip dashboard:                        .addHeader("x-app-identifier", "YOUR_CHARGETRIP_APP_IDENTIFIER")                        .build()                     return chain.proceed(request)                }            })            .build()         HttpRequestUtil.setOkHttpClient(httpClient)         // ...    }}

React Native

For React Native we suggest using @rnmapbox/maps to render the map component in your app, but you can choose to use other implementations. You can set the necessary headers in your entry file or in the component that will contain the map, based on the lifecycle of your map, as follows:

Tile Service / Integration / React Native

          import React from "react";import { Platform } from "react-native";import { Navigation } from "react-native-navigation";import Mapbox from "@rnmapbox/maps"; // The following access token can be obtained from the Mapbox dashboard.Mapbox.setAccessToken("YOUR_MAPBOX_ACCESS_TOKEN"); // Chargetrip authentication headers:Mapbox.addCustomHeader("x-client-id", "YOUR_CHARGETRIP_CLIENT_ID");Mapbox.addCustomHeader("x-app-id", "YOUR_CHARGETRIP_APP_ID"); // The following lines are only required if application security is set-up via the Chargetrip dashboard:Mapbox.addCustomHeader("x-app-identifier", "YOUR_CHARGETRIP_APP_IDENTIFIER");if (Platform.OS === "android") {  Mapbox.addCustomHeader(    "x-app-fingerprint",    "YOUR_CHARGETRIP_ANDROID_FINGERPRINT",  );}