[{"data":1,"prerenderedAt":709},["Reactive",2],{"navigation-list":3,"page-/examples/routes/battery-capacity-navigation-name":460,"page-/examples/routes/battery-capacity":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":362},{"_path":410,"_dir":462,"_draft":463,"_partial":463,"_locale":464,"title":409,"description":465,"img":466,"background":467,"navigation":362,"body":468,"_type":704,"_id":705,"_source":706,"_file":707,"_extension":708},"routes",false,"","Change the battery capacity and reroute a journey","/examples/routes/battery-capacity.png","accent",{"type":469,"children":470,"toc":701},"root",[471,490],{"type":472,"tag":473,"props":474,"children":477},"element","ct-section",{"className":475},[476],"!pt-6",[478],{"type":472,"tag":479,"props":480,"children":489},"ct-iframe-wrapper",{"className":481,"src":488},[482,483,484,485,486,487],"w-full","h-[640px]","relative","overflow-hidden","rounded-lg","shadow-sm","https://examples.chargetrip.com/battery-capacity/",[],{"type":472,"tag":491,"props":492,"children":493},"ct-grid-section",{},[494,688],{"type":472,"tag":495,"props":496,"children":499},"ct-content",{"className":497},[498],"col-span-6",[500,508,514,527,534,577,583,677,683],{"type":472,"tag":501,"props":502,"children":504},"h1",{"id":503},"update-a-route-based-on-the-battery-capacity",[505],{"type":506,"value":507},"text","Update a route based on the battery capacity",{"type":472,"tag":509,"props":510,"children":511},"p",{},[512],{"type":506,"value":513},"Extending or limiting the battery capacity determines whether the routing will be conservative or aggressive. To make sure a charger or destination can be reached we advise to remain within the boundaries of -20% and +20% of the battery capacity.",{"type":472,"tag":515,"props":516,"children":521},"ct-button",{":is-rounded":517,"href":518,"icon-right":519,"type":520},"true","https://github.com/chargetrip/examples/tree/main/examples/3.routes/7.battery-capacity","IconName.MD_NAVIGATION_ARROW_UP_RIGHT","primary",[522],{"type":472,"tag":509,"props":523,"children":524},{},[525],{"type":506,"value":526},"View on Github",{"type":472,"tag":528,"props":529,"children":531},"h2",{"id":530},"requirements",[532],{"type":506,"value":533},"Requirements",{"type":472,"tag":535,"props":536,"children":537},"ul",{},[538,553,565],{"type":472,"tag":539,"props":540,"children":541},"li",{},[542,551],{"type":472,"tag":543,"props":544,"children":548},"a",{"href":545,"rel":546},"https://account.chargetrip.com",[547],"nofollow",[549],{"type":506,"value":550},"Chargetrip API key",{"type":506,"value":552}," - to plot routes outside this region",{"type":472,"tag":539,"props":554,"children":555},{},[556,563],{"type":472,"tag":543,"props":557,"children":560},{"href":558,"rel":559},"https://www.mapbox.com",[547],[561],{"type":506,"value":562},"Mapbox API key",{"type":506,"value":564}," - to display the map",{"type":472,"tag":539,"props":566,"children":567},{},[568,575],{"type":472,"tag":543,"props":569,"children":572},{"href":570,"rel":571},"https://formidable.com/open-source/urql/",[547],[573],{"type":506,"value":574},"URQL",{"type":506,"value":576}," - a lightweight graphQL client",{"type":472,"tag":528,"props":578,"children":580},{"id":579},"steps-to-take",[581],{"type":506,"value":582},"Steps to take",{"type":472,"tag":584,"props":585,"children":586},"ol",{},[587,616,636,665],{"type":472,"tag":539,"props":588,"children":589},{},[590,592,598,600,606,608,614],{"type":506,"value":591},"Plotting a route based on battery capacity starts by executing the ",{"type":472,"tag":459,"props":593,"children":595},{"className":594},[],[596],{"type":506,"value":597},"newRoute",{"type":506,"value":599}," mutation. This mutation requires information about the car, origin and destination. To support changing the battery capacity, the ",{"type":472,"tag":459,"props":601,"children":603},{"className":602},[],[604],{"type":506,"value":605},"ev.battery.capacity",{"type":506,"value":607}," argument needs to be treated as a variable. After the mutation is finished executing a route ",{"type":472,"tag":459,"props":609,"children":611},{"className":610},[],[612],{"type":506,"value":613},"id",{"type":506,"value":615}," will be returned.",{"type":472,"tag":539,"props":617,"children":618},{},[619,621,626,628,634],{"type":506,"value":620},"This ",{"type":472,"tag":459,"props":622,"children":624},{"className":623},[],[625],{"type":506,"value":613},{"type":506,"value":627}," can be used to request route updates through the ",{"type":472,"tag":459,"props":629,"children":631},{"className":630},[],[632],{"type":506,"value":633},"routeUpdatedById",{"type":506,"value":635}," subscription. This subscription receives dynamic updates.",{"type":472,"tag":539,"props":637,"children":638},{},[639,641,647,649,655,657,663],{"type":506,"value":640},"After the subscription returns ",{"type":472,"tag":459,"props":642,"children":644},{"className":643},[],[645],{"type":506,"value":646},"done",{"type":506,"value":648}," as status, the ",{"type":472,"tag":459,"props":650,"children":652},{"className":651},[],[653],{"type":506,"value":654},"polyline",{"type":506,"value":656}," and ",{"type":472,"tag":459,"props":658,"children":660},{"className":659},[],[661],{"type":506,"value":662},"legs",{"type":506,"value":664}," fields will be available. These can be used to display the route and charge stations on the map. Additional data such as distance, duration and consumption are also available.",{"type":472,"tag":539,"props":666,"children":667},{},[668,670,675],{"type":506,"value":669},"Now the ",{"type":472,"tag":459,"props":671,"children":673},{"className":672},[],[674],{"type":506,"value":605},{"type":506,"value":676}," will be tied to a slider in the UI. Every time the slider gets updated, a new route will be generated and displayed to show the impact.",{"type":472,"tag":528,"props":678,"children":680},{"id":679},"next-steps",[681],{"type":506,"value":682},"Next steps",{"type":472,"tag":509,"props":684,"children":685},{},[686],{"type":506,"value":687},"Of course a car is not always at the same battery percentage. So apart from adjusting the battery capacity, the current state of charge can be set. How this is done, is explained in our next example.",{"type":472,"tag":689,"props":690,"children":692},"div",{"className":691},[498],[693],{"type":472,"tag":694,"props":695,"children":700},"ct-code-tabs",{":codeList":696,":is-inversed":517,"className":697},"[{\"label\":\"client.js\",\"code\":\"import { SubscriptionClient } from 'subscriptions-transport-ws';\\nimport { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';\\nimport { createRoute, routeUpdate } from './queries';\\nimport { pipe, subscribe } from 'wonka';\\n\\n/**\\n * For the purpose of this example we use urql - lightweights GraphQL client.\\n * To establish a connection with Chargetrip GraphQL API you need to have an API key.\\n * The key in this example is a public one and gives access only to a part of our extensive database.\\n * You need a registered `x-client-id` to access the full database.\\n * Read more about authorisation in our documentation (https://docs.chargetrip.com/#authorisation).\\n */\\nconst headers = {\\n  //Replace this x-client-id and app-id with your own to get access to more cars\\n  'x-client-id': '5ed1175bad06853b3aa1e492',\\n  'x-app-id': '623998b2c35130073829b2d2',\\n};\\n\\nconst subscriptionClient = new SubscriptionClient('wss://api.chargetrip.io/graphql', {\\n  reconnect: true,\\n  connectionParams: headers,\\n});\\n\\nconst client = createClient({\\n  url: 'https://api.chargetrip.io/graphql',\\n  fetchOptions: {\\n    method: 'POST',\\n    headers,\\n  },\\n  exchanges: [\\n    ...defaultExchanges,\\n    subscriptionExchange({\\n      forwardSubscription(operation) {\\n        return subscriptionClient.request(operation);\\n      },\\n    }),\\n  ],\\n});\\n\\n/**\\n * The function that makes a route request to the Chargetrip API with the customized battery capacity.\\n * @param { number } capacity - The current battery capacity\\n * @param { function } callback - As soon as our asynchronous call is finished we do a callback to update our UI.\\n */\\nexport const getRoute = (capacity, callback) => {\\n  client\\n    .mutation(createRoute, { capacity: capacity })\\n    .toPromise()\\n    .then(response => {\\n      const routeId = response.data.newRoute;\\n\\n      const { unsubscribe } = pipe(\\n        client.executeSubscription(createRequest(routeUpdate, { id: routeId })),\\n        subscribe(result => {\\n          const { status, route } = result.data?.routeUpdatedById;\\n\\n          // You can keep listening to the route changes to update route information.\\n          // For this example we want to only draw the initial route.\\n          if (status === 'done' && route) {\\n            unsubscribe();\\n            callback(route);\\n          } else if (status === 'not_found') {\\n            callback();\\n          }\\n        }),\\n      );\\n    })\\n    .catch(error => console.log(error));\\n};\\n\"},{\"label\":\"index.js\",\"code\":\"import { getRoute } from './client';\\nimport { attachEventListeners, getBatteryCapacity, renderRouteHeader, renderErrorToast } from './interface';\\nimport { drawRoutePolyline } from './map';\\n\\n/**\\n * This project shows you how to render alternative routes.\\n * The project structure contains;\\n *\\n *    - client.js - All networking requests\\n *    - interface.js - All interface rendering\\n *    - map.js - All map rendering (including routes and waypoints)\\n *    - queries.js - The GraphQL queries used in the networking requests\\n */\\n\\ngetRoute(getBatteryCapacity(), routeData => {\\n  if (routeData) {\\n    drawRoutePolyline(routeData);\\n    renderRouteHeader(routeData);\\n  } else {\\n    renderErrorToast();\\n  }\\n});\\n\\nattachEventListeners();\\n\"},{\"label\":\"interface.js\",\"code\":\"import { getRoute } from './client';\\nimport { drawRoutePolyline } from './map';\\nimport { getDurationString } from '../../../utils';\\n\\n// This example uses a Tesla 75D (2016-2019). By default it has a useable battery capacity of 72.5 kWh and\\n// a Chargetrip best range of 389. These two values are interchangeable when adjusting the capacity.\\n// In a real application you would fetch these values on a per car basis using a car request.\\nconst usableBatteryCapacityInKWH = 72.5;\\nconst chargetripBestRange = 389;\\n\\n/**\\n * Function that renders the header details\\n * @param { object } data - All available route data\\n */\\nexport const renderRouteHeader = data => {\\n  const routeDistance = data.distance ? `${(data.distance / 1000).toFixed(0)} km` : 'Unknown';\\n  const routeStops = `${data.charges ?? 0} stops`;\\n  const routeEnergy = data.consumption ? `${data.consumption.toFixed(2)} kWh` : 'Unknown';\\n\\n  document.getElementById('duration').innerHTML = `${getDurationString(data.duration ?? 0)}`;\\n  document.getElementById('route-metadata').innerHTML = `${routeDistance} / ${routeStops} / ${routeEnergy}`;\\n};\\n\\nexport const renderErrorToast = () => {\\n  const errorToast = document.getElementById('error-toast');\\n  errorToast.style.transform = `translateY(0)`;\\n\\n  setTimeout(() => {\\n    errorToast.style.transform = `translateY(100%)`;\\n  }, 2500);\\n};\\n\\nexport const attachEventListeners = () => {\\n  document.getElementById('range').addEventListener('input', didUpdateRangeSlider, true);\\n  document.getElementById('range').addEventListener('change', didReleaseRangeSlider, true);\\n};\\n\\n/**\\n * Attach an event listener to our slider to update the current vehicle battery capacity\\n */\\nconst didUpdateRangeSlider = event => {\\n  event.preventDefault();\\n  const vehicleRange = document.getElementById('battery-capacity');\\n\\n  const computedRangeInKM = chargetripBestRange + (chargetripBestRange / 100) * event.target.value;\\n  const formattedPercentage = `${event.target.value > 0 ? '+' + event.target.value : event.target.value}`;\\n\\n  vehicleRange.innerHTML = `${formattedPercentage}% • ${parseInt(computedRangeInKM)}km`;\\n};\\n\\n/**\\n * Attach an event listener that updates our route with the new battery capacity on release\\n */\\nconst didReleaseRangeSlider = event => {\\n  event.preventDefault();\\n  event.target.disabled = true;\\n\\n  const computedBatteryCapacity = getBatteryCapacity();\\n  const loadingToast = document.getElementById('loading-toast');\\n\\n  loadingToast.style.transform = `translateY(0)`;\\n\\n  getRoute(computedBatteryCapacity, routeData => {\\n    if (routeData) {\\n      drawRoutePolyline(routeData);\\n      renderRouteHeader(routeData);\\n    } else {\\n      renderErrorToast();\\n    }\\n\\n    event.target.disabled = false;\\n    loadingToast.style.transform = `translateY(100%)`;\\n  });\\n};\\n\\n/**\\n * Computes new usableBatteryCapacity within the set bounds of -20% and +20%.\\n * @returns - the usableBatteryCapacity\\n */\\nexport const getBatteryCapacity = () => {\\n  return usableBatteryCapacityInKWH + (usableBatteryCapacityInKWH / 100) * document.getElementById('range').value;\\n};\\n\"},{\"label\":\"map.js\",\"code\":\"import * as mapboxPolyline from '@mapbox/polyline';\\nimport mapboxgl from 'mapbox-gl';\\n\\nmapboxgl.accessToken = 'pk.eyJ1IjoiY2hhcmdldHJpcCIsImEiOiJjazhpaG8ydTIwNWNpM21ud29xeXc2amhlIn0.rGKgR3JfG9Z5dCWjUI_oGA';\\n\\nconst map = new mapboxgl.Map({\\n  cooperativeGestures: true,\\n  container: 'map',\\n  style: 'mapbox://styles/chargetrip/ckgcbf3kz0h8819qki8uwhe0k',\\n  zoom: 5.5,\\n  center: [9.1320104, 55.1758916],\\n});\\n\\n/**\\n * Draw a route on a map.\\n *\\n * Route object contains `polyline` data -  the polyline encoded route (series of coordinates as a single string).\\n * We need to decode this information first. We use Mapbox polyline tool (https://www.npmjs.com/package/@mapbox/polyline) for this.\\n * As a result of decoding we get pairs [latitude, longitude].\\n * To draw a route on a map we use Mapbox GL JS. This tool uses the format [longitude,latitude],\\n * so we have to reverse every pair.\\n *\\n * @param data {object} route specification\\n */\\nexport const drawRoutePolyline = data => {\\n  const decodedData = mapboxPolyline.decode(data.polyline);\\n  const reversed = decodedData.map(item => item.reverse());\\n\\n  drawRoute(reversed, data.legs);\\n};\\n\\n/**\\n * Draw route polyline and show charging stations on the map.\\n * @param { array } coordinates - Array of coordinates\\n * @param { array } legs - stops -- each leg represents either a charging station, or via point or final point\\n */\\nconst drawRoute = (coordinates, legs) => {\\n  if (map.loaded()) {\\n    drawPolyline(coordinates);\\n    showLegs(legs);\\n  } else {\\n    map.on('load', () => {\\n      drawPolyline(coordinates);\\n      showLegs(legs);\\n    });\\n  }\\n};\\n\\n/**\\n * Draw route polyline on a map.\\n * @param { array } coordinates - polyline coordinates\\n */\\nconst drawPolyline = coordinates => {\\n  if (map.getLayer('polyline')) map.removeLayer('polyline');\\n  if (map.getSource('polyline-source')) map.removeSource('polyline-source');\\n  const geojson = {\\n    type: 'FeatureCollection',\\n    features: [\\n      {\\n        type: 'Feature',\\n        geometry: {\\n          type: 'LineString',\\n          properties: {},\\n          coordinates,\\n        },\\n      },\\n    ],\\n  };\\n\\n  map.addSource('polyline-source', {\\n    type: 'geojson',\\n    lineMetrics: true,\\n    data: geojson,\\n  });\\n\\n  map.addLayer({\\n    id: 'polyline',\\n    type: 'line',\\n    options: 'beforeLayer',\\n    source: 'polyline-source',\\n    layout: {\\n      'line-join': 'round',\\n      'line-cap': 'round',\\n    },\\n    paint: {\\n      'line-color': '#0078FF',\\n      'line-width': 3,\\n    },\\n  });\\n};\\n\\n/**\\n * Show the charging station, origin and destination on the map\\n * The origin of the first leg is the start of your route.\\n * The destination of the last is the destination of your route.\\n * The desitinatation of all other legs are charging stations or via points.\\n *\\n * @param { array } legs - route legs\\n */\\nconst showLegs = legs => {\\n  if (map.getLayer('legs')) map.removeLayer('legs');\\n  if (map.getSource('legs')) map.removeSource('legs');\\n  if (legs.length === 0) return;\\n\\n  let points = [];\\n\\n  // we want to show origin point on the map\\n  // to do that we use the origin of the first leg\\n  points.push({\\n    type: 'Feature',\\n    properties: {\\n      description: legs[0].rangeStart,\\n      icon: 'location_big',\\n    },\\n    geometry: legs[0].origin?.geometry,\\n  });\\n\\n  for (let i = 0; i \u003C legs.length; i++) {\\n    // add charging stations\\n    if (i !== legs.length - 1) {\\n      points.push({\\n        type: 'Feature',\\n        properties: {\\n          description: legs[i].rangeEnd,\\n          icon: 'unknown-turbo',\\n        },\\n        geometry: legs[i].destination?.geometry,\\n      });\\n    } else {\\n      // add destination point (last leg)\\n      points.push({\\n        type: 'Feature',\\n        properties: {\\n          icon: 'arrival',\\n          description: legs[i].rangeEnd,\\n        },\\n        geometry: legs[i].destination?.geometry,\\n      });\\n    }\\n  }\\n\\n  // draw route points on a map\\n  map.addLayer({\\n    id: 'legs',\\n    type: 'symbol',\\n    layout: {\\n      'icon-image': '{icon}',\\n      'icon-allow-overlap': true,\\n      'icon-offset': ['case', ['==', ['get', 'icon'], 'location_big'], ['literal', [0, 0]], ['literal', [0, -15]]],\\n    },\\n    source: {\\n      type: 'geojson',\\n      data: {\\n        type: 'FeatureCollection',\\n        features: points,\\n      },\\n    },\\n  });\\n};\\n\"},{\"label\":\"queries.js\",\"code\":\"import qql from 'graphql-tag';\\n\\n/*\\n * In this example we request a route from Hanover, Germany to Aalborg, Denmark\\n * Your origin and destination are required fields. You also need to select an EV.\\n * Only the EV ID here is mandatory, all other fields are optional and when not specified will use the default values.\\n * The conditions are:\\n *   - full battery at Hanover, Germany\\n *   - EV can charge at CHAdeMO and T2 Combo changers\\n *   - should use climate (temperature and weather conditions)\\n *   - min power of chargers is 43 kWh. This is the default setting\\n *   - one passenger in the car (drive alone)\\n *   - an adjustable battery capacity\\n */\\nexport const createRoute = qql`\\nmutation newRoute($capacity: Float!){\\n  newRoute(\\n    input: {\\n      ev: {\\n        id: \\\"5d161be5c9eef46132d9d20a\\\"\\n        battery: {\\n          stateOfCharge: { value: $capacity, type: kwh }\\n          capacity: { value: $capacity, type: kwh }\\n        }\\n        plugs: { chargingPower: 150, standard: TESLA_S }\\n        adapters: [\\n          { chargingPower: 150, standard: IEC_62196_T2_COMBO }\\n          { chargingPower: 150, standard: CHADEMO }\\n        ]\\n        climate: true\\n        numberOfPassengers: 1\\n      }\\n      routeRequest: {\\n        origin: {\\n          type: Feature\\n          geometry: { type: Point, coordinates: [9.732625731357011, 52.3806314590276] }\\n          properties: { name: \\\"Hanover, Germany\\\" }\\n\\n        }\\n        destination: {\\n          type: Feature\\n          geometry: { type: Point, coordinates: [9.922192327081783, 57.046057998779176] }\\n          properties: { name: \\\"Aalborg, Denmark\\\" }\\n        }\\n      }\\n    }\\n  )\\n}\\n`;\\n\\nexport const routeUpdate = qql`\\nsubscription routeUpdatedById($id: ID!){\\n  routeUpdatedById(id: $id) {\\n    status\\n    route {\\n      charges\\n      distance\\n      duration\\n      consumption\\n      polyline\\n      legs{\\n        chargeTime\\n        origin{\\n          geometry{\\n            type\\n            coordinates\\n          }\\n          properties\\n        }\\n        destination{\\n          geometry\\n          {\\n            type\\n            coordinates\\n          }\\n          properties\\n        }\\n      }\\n    }\\n  }\\n}\\n`;\\n\"}]",[698,699],"stick","top-6",[],{"title":464,"searchDepth":702,"depth":702,"links":703},2,[],"markdown","content:5.examples:3.routes:7.battery-capacity.md","content","5.examples/3.routes/7.battery-capacity.md","md",1775054263271]