[{"data":1,"prerenderedAt":747},["Reactive",2],{"navigation-list":3,"page-/api-reference/tile-service/integration-navigation-name":460,"page-/api-reference/tile-service/integration":461},{"api-reference":4,"basics":312,"examples":353,"tree":440},{"asideHeader":5,"sectionList":6,"mainHeader":311},"API reference",[7,29,50,95,120,142,155,188,217,249,270],{"label":8,"navigation":-1,"to":9,"icon":10,"itemList":11},"API","/api-reference/api","medium/products/api",[12,17,21,25],{"label":13,"navigation":14,"to":15,"icon":-1,"itemList":16},"Quick setup guide","api-reference","/api-reference/api/quick-setup-guide",[],{"label":18,"navigation":14,"to":19,"icon":-1,"itemList":20},"Pagination","/api-reference/api/pagination",[],{"label":22,"navigation":14,"to":23,"icon":-1,"itemList":24},"API lifecycle","/api-reference/api/api-lifecycle",[],{"label":26,"navigation":14,"to":27,"icon":-1,"itemList":28},"Beta features","/api-reference/api/beta-features",[],{"label":30,"navigation":-1,"to":31,"icon":32,"itemList":33},"Vehicles","/api-reference/vehicle","medium/products/vehicle",[34,38,42,46],{"label":35,"navigation":14,"to":36,"icon":-1,"itemList":37},"Vehicle introduction","/api-reference/vehicle/introduction",[],{"label":39,"navigation":14,"to":40,"icon":-1,"itemList":41},"Query vehicles","/api-reference/vehicle/query-vehicles",[],{"label":43,"navigation":14,"to":44,"icon":-1,"itemList":45},"Query vehicle details","/api-reference/vehicle/query-vehicle-details",[],{"label":47,"navigation":14,"to":48,"icon":-1,"itemList":49},"Query premium vehicle details","/api-reference/vehicle/query-premium-vehicle-details",[],{"label":51,"navigation":-1,"to":52,"icon":53,"itemList":54},"Stations","/api-reference/stations","medium/products/charge-station",[55,59,63,67,71,75,79,83,87,91],{"label":56,"navigation":14,"to":57,"icon":-1,"itemList":58},"Station introduction","/api-reference/stations/introduction",[],{"label":60,"navigation":14,"to":61,"icon":-1,"itemList":62},"Query station details","/api-reference/stations/query-station-details",[],{"label":64,"navigation":14,"to":65,"icon":-1,"itemList":66},"Query stations around a GeoJSON point","/api-reference/stations/query-stations-around",[],{"label":68,"navigation":14,"to":69,"icon":-1,"itemList":70},"Query station reviews","/api-reference/stations/query-stations-reviews",[],{"label":72,"navigation":14,"to":73,"icon":-1,"itemList":74},"Mutate to create a station review","/api-reference/stations/mutate-station-reviews",[],{"label":76,"navigation":14,"to":77,"icon":-1,"itemList":78},"Query station operators","/api-reference/stations/query-station-operators",[],{"label":80,"navigation":14,"to":81,"icon":-1,"itemList":82},"Query station operator details","/api-reference/stations/query-station-operator-details",[],{"label":84,"navigation":14,"to":85,"icon":-1,"itemList":86},"Query station tariffs","/api-reference/stations/query-station-tariffs",[],{"label":88,"navigation":14,"to":89,"icon":-1,"itemList":90},"Query station tariff details","/api-reference/stations/query-station-tariff-details",[],{"label":92,"navigation":14,"to":93,"icon":-1,"itemList":94},"Query station amenities","/api-reference/stations/query-station-amenities",[],{"label":96,"navigation":-1,"to":97,"icon":98,"itemList":99},"Legacy | Routes","/api-reference/routes-legacy","medium/products/route",[100,104,108,112,116],{"label":101,"navigation":14,"to":102,"icon":-1,"itemList":103},"Route legacy introduction","/api-reference/routes-legacy/introduction",[],{"label":105,"navigation":14,"to":106,"icon":-1,"itemList":107},"Mutate to create a new legacy route","/api-reference/routes-legacy/mutate-route",[],{"label":109,"navigation":14,"to":110,"icon":-1,"itemList":111},"Subscribe to route updates","/api-reference/routes-legacy/subscribe-to-route-updates",[],{"label":113,"navigation":14,"to":114,"icon":-1,"itemList":115},"Query route details","/api-reference/routes-legacy/query-route-details",[],{"label":117,"navigation":14,"to":118,"icon":-1,"itemList":119},"Query route path","/api-reference/routes-legacy/query-route-path",[],{"label":121,"navigation":-1,"to":122,"icon":98,"itemList":123},"Routes","/api-reference/routes",[124,128,132,136,139],{"label":125,"navigation":14,"to":126,"icon":-1,"itemList":127},"Route introduction","/api-reference/routes/introduction",[],{"label":129,"navigation":14,"to":130,"icon":-1,"itemList":131},"Migration from Route Legacy","/api-reference/routes/migration",[],{"label":133,"navigation":14,"to":134,"icon":-1,"itemList":135},"Mutate to create a new route","/api-reference/routes/mutate-route",[],{"label":109,"navigation":14,"to":137,"icon":-1,"itemList":138},"/api-reference/routes/subscribe-to-route-updates",[],{"label":113,"navigation":14,"to":140,"icon":-1,"itemList":141},"/api-reference/routes/query-route-details",[],{"label":143,"navigation":-1,"to":144,"icon":145,"itemList":146},"Emissions","/api-reference/route-emissions","medium/content/leaf",[147,151],{"label":148,"navigation":14,"to":149,"icon":-1,"itemList":150},"Route emissions introduction","/api-reference/route-emissions/introduction",[],{"label":152,"navigation":14,"to":153,"icon":-1,"itemList":154},"Query route emissions","/api-reference/route-emissions/query-route-emissions",[],{"label":156,"navigation":-1,"to":157,"icon":158,"itemList":159},"Navigation","/api-reference/navigation","medium/products/navigation",[160,164,168,172,176,180,184],{"label":161,"navigation":14,"to":162,"icon":-1,"itemList":163},"Navigation introduction","/api-reference/navigation/introduction",[],{"label":165,"navigation":14,"to":166,"icon":-1,"itemList":167},"Mutate to start a new navigation session","/api-reference/navigation/mutate-start-navigation",[],{"label":169,"navigation":14,"to":170,"icon":-1,"itemList":171},"Subscribe to navigation updates","/api-reference/navigation/subscribe-to-navigation-updates",[],{"label":173,"navigation":14,"to":174,"icon":-1,"itemList":175},"Query navigation session","/api-reference/navigation/query-a-navigation-session",[],{"label":177,"navigation":14,"to":178,"icon":-1,"itemList":179},"Mutate to update a navigation session","/api-reference/navigation/mutate-update-navigation",[],{"label":181,"navigation":14,"to":182,"icon":-1,"itemList":183},"Mutate to recalculate navigation","/api-reference/navigation/mutate-recalculate-navigation",[],{"label":185,"navigation":14,"to":186,"icon":-1,"itemList":187},"Mutate to finish navigation","/api-reference/navigation/mutate-to-finish-navigation",[],{"label":189,"navigation":-1,"to":190,"icon":191,"itemList":192},"Legacy | Tile service","/api-reference/tile-service-legacy","medium/products/tile-set",[193,197,201,205,209,213],{"label":194,"navigation":14,"to":195,"icon":-1,"itemList":196},"Legacy | Tile service introduction","/api-reference/tile-service-legacy/introduction",[],{"label":198,"navigation":14,"to":199,"icon":-1,"itemList":200},"Legacy | Mapbox Vector Tile","/api-reference/tile-service-legacy/mvt",[],{"label":202,"navigation":14,"to":203,"icon":-1,"itemList":204},"Legacy | JSON Tile","/api-reference/tile-service-legacy/json",[],{"label":206,"navigation":14,"to":207,"icon":-1,"itemList":208},"Legacy | Filters","/api-reference/tile-service-legacy/filters",[],{"label":210,"navigation":14,"to":211,"icon":-1,"itemList":212},"Legacy | Selectors","/api-reference/tile-service-legacy/selectors",[],{"label":214,"navigation":14,"to":215,"icon":-1,"itemList":216},"Legacy | Integration","/api-reference/tile-service-legacy/integration",[],{"label":218,"navigation":-1,"to":219,"icon":191,"itemList":220},"Tile service","/api-reference/tile-service",[221,225,229,233,237,241,245],{"label":222,"navigation":14,"to":223,"icon":-1,"itemList":224},"Tile service introduction","/api-reference/tile-service/introduction",[],{"label":226,"navigation":14,"to":227,"icon":-1,"itemList":228},"Mapbox Vector Tile","/api-reference/tile-service/mvt",[],{"label":230,"navigation":14,"to":231,"icon":-1,"itemList":232},"JSON Tile","/api-reference/tile-service/json",[],{"label":234,"navigation":14,"to":235,"icon":-1,"itemList":236},"Filters","/api-reference/tile-service/filters",[],{"label":238,"navigation":14,"to":239,"icon":-1,"itemList":240},"Selectors","/api-reference/tile-service/selectors",[],{"label":242,"navigation":14,"to":243,"icon":-1,"itemList":244},"Station count","/api-reference/tile-service/count",[],{"label":246,"navigation":14,"to":247,"icon":-1,"itemList":248},"Integration","/api-reference/tile-service/integration",[],{"label":250,"navigation":-1,"to":251,"icon":252,"itemList":253},"Isolines","/api-reference/isolines","medium/products/isoline",[254,258,262,266],{"label":255,"navigation":14,"to":256,"icon":-1,"itemList":257},"Isoline introduction","/api-reference/isolines/introduction",[],{"label":259,"navigation":14,"to":260,"icon":-1,"itemList":261},"Mutation to create an isoline","/api-reference/isolines/mutate-isoline",[],{"label":263,"navigation":14,"to":264,"icon":-1,"itemList":265},"Subscribe to isoline details","/api-reference/isolines/subscribe-to-isoline",[],{"label":267,"navigation":14,"to":268,"icon":-1,"itemList":269},"Query isoline details","/api-reference/isolines/query-isoline",[],{"label":271,"navigation":-1,"to":272,"icon":273,"itemList":274},"Vehicle connectivity","/api-reference/vehicle-connectivity","medium/products/connectivity",[275,279,283,287,291,295,299,303,307],{"label":276,"navigation":14,"to":277,"icon":-1,"itemList":278},"Introduction","/api-reference/vehicle-connectivity/introduction",[],{"label":280,"navigation":14,"to":281,"icon":-1,"itemList":282},"Mutate to create a new connected vehicle","/api-reference/vehicle-connectivity/mutate-create-connected-vehicle",[],{"label":284,"navigation":14,"to":285,"icon":-1,"itemList":286},"Subscribe to a connected vehicle","/api-reference/vehicle-connectivity/subscribe-connected-vehicle",[],{"label":288,"navigation":14,"to":289,"icon":-1,"itemList":290},"Mutate to authorize a connected vehicle","/api-reference/vehicle-connectivity/mutate-authorize-connected-vehicle",[],{"label":292,"navigation":14,"to":293,"icon":-1,"itemList":294},"Query connected vehicle list","/api-reference/vehicle-connectivity/query-connected-vehicle-list",[],{"label":296,"navigation":14,"to":297,"icon":-1,"itemList":298},"Query data from vehicle","/api-reference/vehicle-connectivity/query-connected-vehicle-data",[],{"label":300,"navigation":14,"to":301,"icon":-1,"itemList":302},"Query connected vehicle","/api-reference/vehicle-connectivity/query-connected-vehicle",[],{"label":304,"navigation":14,"to":305,"icon":-1,"itemList":306},"Mutate to update a connected vehicle","/api-reference/vehicle-connectivity/mutate-update-connected-vehicle",[],{"label":308,"navigation":14,"to":309,"icon":-1,"itemList":310},"Mutate to remove a connected vehicle","/api-reference/vehicle-connectivity/mutate-remove-connected-vehicle",[],"Sections",{"asideHeader":313,"sectionList":314,"mainHeader":311},"Basics",[315,341],{"label":316,"navigation":-1,"to":317,"icon":318,"itemList":319},"API Basics","/basics/api-basics","medium/code/code",[320,325,329,333,337],{"label":321,"navigation":322,"to":323,"icon":-1,"itemList":324},"Getting started","basics","/basics/api-basics/getting-started",[],{"label":326,"navigation":322,"to":327,"icon":-1,"itemList":328},"Authorization","/basics/api-basics/authorization",[],{"label":330,"navigation":322,"to":331,"icon":-1,"itemList":332},"Security","/basics/api-basics/security",[],{"label":334,"navigation":322,"to":335,"icon":-1,"itemList":336},"Status & error codes","/basics/api-basics/status-and-error-codes",[],{"label":338,"navigation":322,"to":339,"icon":-1,"itemList":340},"Subscriptions","/basics/api-basics/subscriptions",[],{"label":342,"navigation":-1,"to":343,"icon":318,"itemList":344},"Learn more","/basics/other-basics",[345,349],{"label":346,"navigation":322,"to":347,"icon":-1,"itemList":348},"GraphQL Basics","/basics/other-basics/graphql-basics",[],{"label":350,"navigation":322,"to":351,"icon":-1,"itemList":352},"EV basics","/basics/other-basics/ev-basics",[],{"asideHeader":354,"sectionList":355,"mainHeader":439},"API Section",[356,369,380,420,432],{"label":30,"navigation":-1,"to":357,"icon":358,"itemList":359},"/examples/vehicles","car",[360,365],{"label":361,"navigation":362,"to":363,"icon":-1,"itemList":364},"Vehicle list","examples","/examples/vehicles/vehicle-list",[],{"label":366,"navigation":362,"to":367,"icon":-1,"itemList":368},"Vehicle details","/examples/vehicles/vehicle-details",[],{"label":51,"navigation":-1,"to":370,"icon":371,"itemList":372},"/examples/stations","charge-stations",[373,376],{"label":51,"navigation":362,"to":374,"icon":-1,"itemList":375},"/examples/stations/station-list",[],{"label":377,"navigation":362,"to":378,"icon":-1,"itemList":379},"Station details","/examples/stations/station-info",[],{"label":121,"navigation":-1,"to":381,"icon":382,"itemList":383},"/examples/routes","route",[384,388,392,396,400,404,408,412,416],{"label":385,"navigation":362,"to":386,"icon":-1,"itemList":387},"Route","/examples/routes/route",[],{"label":389,"navigation":362,"to":390,"icon":-1,"itemList":391},"Route (NEW)","/examples/routes/route-new",[],{"label":393,"navigation":362,"to":394,"icon":-1,"itemList":395},"Alternative routes","/examples/routes/alternative-routes",[],{"label":397,"navigation":362,"to":398,"icon":-1,"itemList":399},"Alternative stations","/examples/routes/stations-along-route",[],{"label":401,"navigation":362,"to":402,"icon":-1,"itemList":403},"Operator preference","/examples/routes/preferred-operator",[],{"label":405,"navigation":362,"to":406,"icon":-1,"itemList":407},"Elevation plot","/examples/routes/elevation-plot",[],{"label":409,"navigation":362,"to":410,"icon":-1,"itemList":411},"Battery capacity","/examples/routes/battery-capacity",[],{"label":413,"navigation":362,"to":414,"icon":-1,"itemList":415},"State of charge","/examples/routes/state-of-charge",[],{"label":417,"navigation":362,"to":418,"icon":-1,"itemList":419},"Toll roads and Ferries","/examples/routes/tolls-and-ferries",[],{"label":218,"navigation":-1,"to":421,"icon":422,"itemList":423},"/examples/tile-service","layers",[424,428],{"label":425,"navigation":362,"to":426,"icon":-1,"itemList":427},"Mapbox Vector Tiles","/examples/tile-service/tile-server",[],{"label":429,"navigation":362,"to":430,"icon":-1,"itemList":431},"GeoJSON tiles","/examples/tile-service/tile-json",[],{"label":250,"navigation":-1,"to":433,"icon":434,"itemList":435},"/examples/isolines","isoline",[436],{"label":250,"navigation":362,"to":437,"icon":-1,"itemList":438},"/examples/isolines/isoline",[],"Examples",[441,445,447,452,457],{"label":313,"navigation":442,"to":443,"icon":444,"itemList":314},"main","/basics","medium/content/bookmark",{"label":5,"navigation":442,"to":446,"icon":318,"itemList":6},"/api-reference",{"label":448,"navigation":442,"to":449,"icon":450,"itemList":451},"Release notes","/release-notes","medium/content/megaphone",[],{"label":453,"navigation":442,"to":454,"icon":455,"itemList":456},"Deprecations","/deprecations","medium/content/shredded",[],{"label":439,"navigation":442,"to":458,"icon":459,"itemList":355},"/examples","code",{"navigation":14},{"_path":247,"_dir":462,"_draft":463,"_partial":463,"_locale":464,"title":246,"description":465,"navigation":14,"body":466,"_type":742,"_id":743,"_source":744,"_file":745,"_extension":746},"tile-service",false,"","Integrating the tile service into Mapbox",{"type":467,"children":468,"toc":734},"root",[469],{"type":470,"tag":471,"props":472,"children":473},"element","ct-aside-layout",{},[474,481,487,492,534,549,555,568,584,601,606,619,633,646,651,663,668,681,686,699,704,722],{"type":470,"tag":475,"props":476,"children":478},"h1",{"id":477},"integration",[479],{"type":480,"value":246},"text",{"type":470,"tag":482,"props":483,"children":484},"p",{},[485],{"type":480,"value":486},"The Tile service integrates easily with popular mapping platforms, including Google Maps, Mapbox, Leaflet, and others.",{"type":470,"tag":482,"props":488,"children":489},{},[490],{"type":480,"value":491},"To access the tile service, 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:",{"type":470,"tag":493,"props":494,"children":495},"ul",{},[496,507,516,525],{"type":470,"tag":497,"props":498,"children":499},"li",{},[500],{"type":470,"tag":501,"props":502,"children":504},"a",{"href":503},"#web",[505],{"type":480,"value":506},"Web",{"type":470,"tag":497,"props":508,"children":509},{},[510],{"type":470,"tag":501,"props":511,"children":513},{"href":512},"#ios",[514],{"type":480,"value":515},"iOS",{"type":470,"tag":497,"props":517,"children":518},{},[519],{"type":470,"tag":501,"props":520,"children":522},{"href":521},"#android",[523],{"type":480,"value":524},"Android",{"type":470,"tag":497,"props":526,"children":527},{},[528],{"type":470,"tag":501,"props":529,"children":531},{"href":530},"#react-native",[532],{"type":480,"value":533},"React Native",{"type":470,"tag":482,"props":535,"children":536},{},[537,539,547],{"type":480,"value":538},"For an overview on API authorization please head to this ",{"type":470,"tag":501,"props":540,"children":544},{"href":541,"rel":542},"https://developers.chargetrip.com/basics/api-basics/authorization#the-base-url",[543],"nofollow",[545],{"type":480,"value":546},"section",{"type":480,"value":548},".",{"type":470,"tag":550,"props":551,"children":553},"h3",{"id":552},"web",[554],{"type":480,"value":506},{"type":470,"tag":482,"props":556,"children":557},{},[558,560,566],{"type":480,"value":559},"With the MapboxGL JS library, you can use the ",{"type":470,"tag":459,"props":561,"children":563},{"className":562},[],[564],{"type":480,"value":565},"transformRequest",{"type":480,"value":567}," function to add the necessary headers. Get started with this example:",{"type":470,"tag":569,"props":570,"children":574},"ct-code-block",{":is-inline":571,"label":572,"language":573},"true","Tile service / Integration / Web","js",[575],{"type":470,"tag":576,"props":577,"children":579},"pre",{"code":578},"const map = new mapboxgl.Map({\n  container: \"map\",\n  center: [-122.420679, 37.772537],\n  zoom: 13,\n  transformRequest: (url, resourceType) => {\n    if (\n      resourceType === \"Tile\" &&\n      url.startsWith(\"https://api.chargetrip.io\")\n    ) {\n      return {\n        url: url,\n        headers: {\n          \"x-client-id\": \"YOUR_CHARGETRIP_CLIENT_ID\",\n          \"x-app-id\": \"YOUR_CHARGETRIP_APP_ID\",\n        },\n      };\n    }\n  },\n});\n",[580],{"type":470,"tag":459,"props":581,"children":582},{"__ignoreMap":464},[583],{"type":480,"value":578},{"type":470,"tag":482,"props":585,"children":586},{},[587,589,594,596,600],{"type":480,"value":588},"A fully working example with Mapbox Maps using the MVT API can be found ",{"type":470,"tag":501,"props":590,"children":591},{"href":426},[592],{"type":480,"value":593},"here",{"type":480,"value":595},", while an example with Google Maps using the JSON API is available ",{"type":470,"tag":501,"props":597,"children":598},{"href":430},[599],{"type":480,"value":593},{"type":480,"value":548},{"type":470,"tag":550,"props":602,"children":604},{"id":603},"ios",[605],{"type":480,"value":515},{"type":470,"tag":482,"props":607,"children":608},{},[609,611,618],{"type":480,"value":610},"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 ",{"type":470,"tag":501,"props":612,"children":615},{"href":613,"rel":614},"https://github.com/mapbox/mapbox-gl-native/issues/3597#issuecomment-386142248",[543],[616],{"type":480,"value":617},"Github issue",{"type":480,"value":548},{"type":470,"tag":482,"props":620,"children":621},{},[622,624,631],{"type":480,"value":623},"When using Mapbox version 10 or up for iOS, you can ",{"type":470,"tag":501,"props":625,"children":628},{"href":626,"rel":627},"https://docs.mapbox.com/ios/beta/maps/guides/migrate-to-v10/#modular-architecture",[543],[629],{"type":480,"value":630},"subclass the networking layer",{"type":480,"value":632}," and add your headers. At the time of writing, it should look like this:",{"type":470,"tag":569,"props":634,"children":637},{":is-inline":571,"label":635,"language":636},"Tile service / Integration / iOS","swift",[638],{"type":470,"tag":576,"props":639,"children":641},{"code":640},"class MapboxNetworkingService: HttpServiceInterface {\n  func request(for request: HttpRequest, callback: @escaping HttpResponseCallback) -> UInt64 {\n    var urlRequest = URLRequest(url: URL(string: request.url)!)\n\n    let methodMap: [MapboxCommon.HttpMethod: String] = [\n      .get: \"GET\",\n      .head: \"HEAD\",\n      .post: \"POST\"\n    ]\n\n    urlRequest.httpMethod = methodMap[request.method]!\n    urlRequest.httpBody = request.body\n    urlRequest.allHTTPHeaderFields = request.headers\n\n    if request.url.contains(\"https://api.chargetrip.io\") {\n      urlRequest.addValue(\"YOUR_CHARGETRIP_CLIENT_ID\", forHTTPHeaderField: \"x-client-id\")\n      urlRequest.addValue(\"YOUR_CHARGETRIP_APP_ID\", forHTTPHeaderField: \"x-app-id\")\n      // The following line is only required if application security is set-up via the Chargetrip dashboard:\n      urlRequest.addValue(\"YOUR_CHARGETRIP_APP_IDENTIFIER\", forHTTPHeaderField: \"x-app-identifier\")\n    }\n\n    let task = URLSession.shared.dataTask(with: urlRequest) { (data, response, error) in\n      let expected: Result\u003CHttpResponseData, HttpRequestError>;\n\n      if let error = error {\n        let requestError = HttpRequestError(type: .otherError, message: error.localizedDescription)\n        expected = .failure(requestError)\n      } else if let response = response as? HTTPURLResponse, let data = data {\n        var headers: [String: String] = [:]\n        for (key, value) in response.allHeaderFields {\n          guard let key = key as? String,\n                let value = value as? String else {\n            continue\n          }\n\n          headers[key.lowercased()] = value\n        }\n\n        let responseData = HttpResponseData(headers: headers, code: Int64(response.statusCode), data: data)\n        expected = .success(responseData)\n      } else {\n        let requestError = HttpRequestError(type: .otherError, message: \"Invalid response\")\n        expected = .failure(requestError)\n      }\n\n      let response = HttpResponse(request: request, result: expected)\n      callback(response)\n    }\n\n    task.resume()\n\n    return UInt64(task.taskIdentifier)\n  }\n}\n",[642],{"type":470,"tag":459,"props":643,"children":644},{"__ignoreMap":464},[645],{"type":480,"value":640},{"type":470,"tag":482,"props":647,"children":648},{},[649],{"type":480,"value":650},"Don't forget to set this subclass early on in the app's lifecycle:",{"type":470,"tag":569,"props":652,"children":654},{":is-inline":571,"label":653,"language":636},"Tile service / Mapbox Networking",[655],{"type":470,"tag":576,"props":656,"children":658},{"code":657},"HttpServiceFactory.setUserDefinedForCustom(MapboxNetworkingService())\n",[659],{"type":470,"tag":459,"props":660,"children":661},{"__ignoreMap":464},[662],{"type":480,"value":657},{"type":470,"tag":550,"props":664,"children":666},{"id":665},"android",[667],{"type":480,"value":524},{"type":470,"tag":482,"props":669,"children":670},{},[671,673,680],{"type":480,"value":672},"Install and configure the Mapbox SDK for Android as explained on ",{"type":470,"tag":501,"props":674,"children":677},{"href":675,"rel":676},"https://docs.mapbox.com/android/maps/guides/install/",[543],[678],{"type":480,"value":679},"Mapbox documentation",{"type":480,"value":548},{"type":470,"tag":482,"props":682,"children":683},{},[684],{"type":480,"value":685},"Set the Mapbox access token and custom headers in the application object or in the activity that contains the MapView:",{"type":470,"tag":569,"props":687,"children":690},{":is-inline":571,"label":688,"language":689},"Tile service / Integration / Android","kotlin",[691],{"type":470,"tag":576,"props":692,"children":694},{"code":693},"package com.chargetrip.example\n\nimport android.os.Bundle\nimport androidx.appcompat.app.AppCompatActivity\n\nimport com.mapbox.mapboxsdk.Mapbox\nimport com.mapbox.mapboxsdk.module.http.HttpRequestUtil\n\nimport okhttp3.OkHttpClient\nimport okhttp3.Interceptor\nimport okhttp3.Response\n\nclass MapViewActivity : AppCompatActivity() {\n    override fun onCreate(savedInstanceState: Bundle?) {\n        super.onCreate(savedInstanceState)\n\n        Mapbox.getInstance(this, \"YOUR_MAPBOX_ACCESS_TOKEN\")\n\n        val httpClient = OkHttpClient.Builder()\n            .addInterceptor(object: Interceptor {\n                override fun intercept(chain: Interceptor.Chain): Response {\n                    val request = chain.request().newBuilder()\n                        .addHeader(\"x-client-id\", \"YOUR_CHARGETRIP_CLIENT_ID\")\n                        .addHeader(\"x-app-id\", \"YOUR_CHARGETRIP_APP_ID\")\n                        // The following line is only required if application security is set-up via the Chargetrip dashboard:\n                        .addHeader(\"x-app-identifier\", \"YOUR_CHARGETRIP_APP_IDENTIFIER\")\n                        .build()\n\n                    return chain.proceed(request)\n                }\n            })\n            .build()\n\n        HttpRequestUtil.setOkHttpClient(httpClient)\n\n        // ...\n    }\n}\n",[695],{"type":470,"tag":459,"props":696,"children":697},{"__ignoreMap":464},[698],{"type":480,"value":693},{"type":470,"tag":550,"props":700,"children":702},{"id":701},"react-native",[703],{"type":480,"value":533},{"type":470,"tag":482,"props":705,"children":706},{},[707,709,720],{"type":480,"value":708},"For React Native we suggest using ",{"type":470,"tag":501,"props":710,"children":713},{"href":711,"rel":712},"https://www.npmjs.com/package/@rnmapbox/maps",[543],[714],{"type":470,"tag":459,"props":715,"children":717},{"className":716},[],[718],{"type":480,"value":719},"@rnmapbox/maps",{"type":480,"value":721}," to render the map component in your app, but you can choose to use other implementations.\nYou 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:",{"type":470,"tag":569,"props":723,"children":725},{":is-inline":571,"label":724,"language":573},"Tile service / Integration / React Native",[726],{"type":470,"tag":576,"props":727,"children":729},{"code":728},"import React from \"react\";\nimport { Platform } from \"react-native\";\nimport { Navigation } from \"react-native-navigation\";\nimport Mapbox from \"@rnmapbox/maps\";\n\n// The following access token can be obtained from the Mapbox dashboard.\nMapbox.setAccessToken(\"YOUR_MAPBOX_ACCESS_TOKEN\");\n\n// Chargetrip authentication headers:\nMapbox.addCustomHeader(\"x-client-id\", \"YOUR_CHARGETRIP_CLIENT_ID\");\nMapbox.addCustomHeader(\"x-app-id\", \"YOUR_CHARGETRIP_APP_ID\");\n\n// The following lines are only required if application security is set-up via the Chargetrip dashboard:\nMapbox.addCustomHeader(\"x-app-identifier\", \"YOUR_CHARGETRIP_APP_IDENTIFIER\");\nif (Platform.OS === \"android\") {\n  Mapbox.addCustomHeader(\n    \"x-app-fingerprint\",\n    \"YOUR_CHARGETRIP_ANDROID_FINGERPRINT\",\n  );\n}\n",[730],{"type":470,"tag":459,"props":731,"children":732},{"__ignoreMap":464},[733],{"type":480,"value":728},{"title":464,"searchDepth":735,"depth":735,"links":736},2,[737,739,740,741],{"id":552,"depth":738,"text":506},3,{"id":603,"depth":738,"text":515},{"id":665,"depth":738,"text":524},{"id":701,"depth":738,"text":533},"markdown","content:2.api-reference:9.tile-service:7.integration.md","content","2.api-reference/9.tile-service/7.integration.md","md",1775054260482]