[{"data":1,"prerenderedAt":717},["Reactive",2],{"navigation-list":3,"page-/examples/routes/elevation-plot-navigation-name":460,"page-/examples/routes/elevation-plot":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":406,"_dir":462,"_draft":463,"_partial":463,"_locale":464,"title":405,"description":465,"img":466,"background":467,"navigation":362,"body":468,"_type":712,"_id":713,"_source":714,"_file":715,"_extension":716},"routes",false,"","Display the elevation profile of a journey","/examples/routes/elevation-plot.png","accent",{"type":469,"children":470,"toc":709},"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/elevation-plot/",[],{"type":472,"tag":491,"props":492,"children":493},"ct-grid-section",{},[494,696],{"type":472,"tag":495,"props":496,"children":499},"ct-content",{"className":497},[498],"col-span-6",[500,508,514,527,534,589,595,685,691],{"type":472,"tag":501,"props":502,"children":504},"h1",{"id":503},"mutate-to-display-route-elevation-data",[505],{"type":506,"value":507},"text","Mutate to display route elevation data",{"type":472,"tag":509,"props":510,"children":511},"p",{},[512],{"type":506,"value":513},"Route elevation has impact on the battery performance. Having the elevation data at hand with segment details demonstrates this.",{"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/6.elevation-plot","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,577],{"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":539,"props":578,"children":579},{},[580,587],{"type":472,"tag":543,"props":581,"children":584},{"href":582,"rel":583},"https://www.chartjs.org/docs/latest/",[547],[585],{"type":506,"value":586},"Chart.js",{"type":506,"value":588}," - to display a graph",{"type":472,"tag":528,"props":590,"children":592},{"id":591},"steps-to-take",[593],{"type":506,"value":594},"Steps to take",{"type":472,"tag":596,"props":597,"children":598},"ol",{},[599,620,640],{"type":472,"tag":539,"props":600,"children":601},{},[602,604,610,612,618],{"type":506,"value":603},"Plotting elevation data starts by executing the ",{"type":472,"tag":459,"props":605,"children":607},{"className":606},[],[608],{"type":506,"value":609},"newRoute",{"type":506,"value":611}," mutation. This mutation requires information about the car, origin and destination. After the mutation is finished executing a route ",{"type":472,"tag":459,"props":613,"children":615},{"className":614},[],[616],{"type":506,"value":617},"id",{"type":506,"value":619}," will be returned.",{"type":472,"tag":539,"props":621,"children":622},{},[623,625,630,632,638],{"type":506,"value":624},"This ",{"type":472,"tag":459,"props":626,"children":628},{"className":627},[],[629],{"type":506,"value":617},{"type":506,"value":631}," can be used to request route updates through the ",{"type":472,"tag":459,"props":633,"children":635},{"className":634},[],[636],{"type":506,"value":637},"routeUpdatedById",{"type":506,"value":639}," subscription. This subscription receives dynamic updates.",{"type":472,"tag":539,"props":641,"children":642},{},[643,645,651,653,659,661,667,669,675,677,683],{"type":506,"value":644},"After the subscription returns ",{"type":472,"tag":459,"props":646,"children":648},{"className":647},[],[649],{"type":506,"value":650},"done",{"type":506,"value":652}," as status, the ",{"type":472,"tag":459,"props":654,"children":656},{"className":655},[],[657],{"type":506,"value":658},"pathPlot",{"type":506,"value":660}," field will be available. It contains 100 segments which are rendered using the open source ",{"type":472,"tag":459,"props":662,"children":664},{"className":663},[],[665],{"type":506,"value":666},"chart.js",{"type":506,"value":668}," library. The ",{"type":472,"tag":459,"props":670,"children":672},{"className":671},[],[673],{"type":506,"value":674},"polyline",{"type":506,"value":676}," and ",{"type":472,"tag":459,"props":678,"children":680},{"className":679},[],[681],{"type":506,"value":682},"legs",{"type":506,"value":684}," object 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":528,"props":686,"children":688},{"id":687},"next-steps",[689],{"type":506,"value":690},"Next steps",{"type":472,"tag":509,"props":692,"children":693},{},[694],{"type":506,"value":695},"As seen in the example, route elevation impacts the battery performance. To be more conservative or aggressive on battery level, it might be useful to play with the capacity. This will be explained in the next example.",{"type":472,"tag":697,"props":698,"children":700},"div",{"className":699},[498],[701],{"type":472,"tag":702,"props":703,"children":708},"ct-code-tabs",{":codeList":704,":is-inversed":517,"className":705},"[{\"label\":\"client.js\",\"code\":\"import { SubscriptionClient } from 'subscriptions-transport-ws';\\nimport { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';\\nimport { createRouteQuery, routeUpdateSubscription } from './queries';\\nimport { pipe, subscribe } from 'wonka';\\n\\n/**\\n * For the purpose of this example we use urgl - 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 * To create a route you need to:\\n *\\n * 1. create a new route and receive back its ID;\\n * 2. subscribe to route updates in order to receive its details.\\n */\\nexport const getRoute = callback => {\\n  client\\n    .mutation(createRouteQuery)\\n    .toPromise()\\n    .then(response => {\\n      const routeId = response.data.newRoute;\\n\\n      const { unsubscribe } = pipe(\\n        client.executeSubscription(createRequest(routeUpdateSubscription, { 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(routeId, route);\\n          }\\n        }),\\n      );\\n    })\\n    .catch(error => console.log(error));\\n};\\n\"},{\"label\":\"index.js\",\"code\":\"import { getRoute } from './client';\\nimport { renderRouteHeader, renderRouteDetails, renderGraph, attachEventListeners } from './interface';\\nimport { drawRoutePolyline } from './map';\\n\\n/**\\n * This project shows you how to fetch a car list and render the car details\\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((routeId, routeData) => {\\n  drawRoutePolyline(routeId, routeData);\\n\\n  renderRouteHeader(routeData);\\n  renderRouteDetails(routeData.pathPlot[0]);\\n  renderGraph(routeData);\\n});\\n\\nattachEventListeners();\\n\"},{\"label\":\"interface.js\",\"code\":\"import Chart from 'chart.js/auto';\\nimport { getDurationString } from '../../../utils';\\n\\nlet routeData;\\n\\n/**\\n * Function that renders the header details\\n * @param { object } data - All available route data\\n */\\nexport const renderRouteHeader = data => {\\n  document.getElementById('duration').innerHTML = `${getDurationString(data.duration ?? 0)}`;\\n  document.getElementById('route-metadata').innerHTML = `\\n    Uphill ${(data.elevationUp / 1000).toFixed(0) ?? 'Unknown'} km / \\n    Downhill ${(data.elevationDown / 1000).toFixed(0) ?? 'Unknown'} km\\n  `;\\n};\\n\\n/**\\n * Small helper function that renders the data that we want to display when clicking a certain point of the route\\n * @param { object } data - Formatted route data that we want to display on the UI\\n */\\nexport const renderRouteDetails = data => {\\n  const routeDetails = document.getElementById('route-details');\\n  routeDetails.textContent = '';\\n\\n  // Format the data so it's inline with the HTML\\n  const formattedData = {\\n    Elevation: `${data.elevation} m`,\\n    'Consumption estimation': `${data.consumptionPerKm} kWh/km`,\\n    'Average speed': `${data.averageSpeed} km/h`,\\n  };\\n\\n  // Loop over the formatted data and render tables or lists inside the HTML\\n  Object.keys(formattedData).forEach(key => {\\n    routeDetails.insertAdjacentHTML(\\n      'beforeend',\\n      `\u003Cli>\\n          \u003Cp>${key}\u003C/p>\\n          \u003Cp>${formattedData[key]}\u003C/p>\\n        \u003C/li>`,\\n    );\\n  });\\n};\\n\\n/**\\n * Construct an elevation graph using the points from the elevationPlot.\\n * @param { object } route - All route data\\n */\\nexport const renderGraph = route => {\\n  const { pathPlot, distance } = route;\\n  const ctx = document.getElementById('elevation-graph').getContext('2d');\\n\\n  const elevation = pathPlot.map(plot => plot.elevation);\\n\\n  // add labels\\n  const labels = new Array(elevation.length).fill('').map((_, idx) => {\\n    if (idx === 0) return '0';\\n    if (idx === elevation.length - 1) return `${(distance / 1000).toFixed(0)}`;\\n\\n    return '';\\n  });\\n\\n  routeData = route;\\n\\n  // Hide loader\\n  document.getElementById('elevation-loader').style.display = 'none';\\n  document.getElementById('slider-container').style.opacity = '1';\\n\\n  // Construct the chart with chart.js and our dataset\\n  new Chart(ctx, {\\n    type: 'line',\\n    data: {\\n      datasets: [\\n        {\\n          data: elevation,\\n          fill: true,\\n          showLine: false,\\n          backgroundColor: 'rgba(0, 120, 255, 0.2)',\\n        },\\n      ],\\n      labels: labels,\\n    },\\n    options: {\\n      elements: {\\n        point: {\\n          radius: 0,\\n        },\\n      },\\n      scales: {\\n        y: {\\n          ticks: {\\n            display: false,\\n          },\\n          grid: {\\n            tickLength: 0,\\n            borderColor: '#E5F0F5',\\n            color: '#E5F0F5',\\n            borderDash: [4, 6],\\n          },\\n        },\\n        x: {\\n          grid: {\\n            display: false,\\n            borderColor: '#E5F0F5',\\n          },\\n          ticks: {\\n            autoSkip: false,\\n            maxRotation: 0,\\n            color: '#566A75',\\n            font: {\\n              family: 'Inter',\\n              size: 12,\\n              weight: 600,\\n            },\\n          },\\n        },\\n      },\\n      plugins: {\\n        legend: {\\n          display: false,\\n        },\\n      },\\n      tooltips: {\\n        display: false,\\n      },\\n    },\\n  });\\n};\\n\\nexport const attachEventListeners = () => {\\n  document.getElementById('slider-input').addEventListener('input', didUpdateGraphSlider);\\n};\\n\\n/**\\n * Whenever the slider moves we update the corresponding values below the graph\\n * @param { Event } event - The slider drag event\\n */\\nconst didUpdateGraphSlider = event => {\\n  const plotSliderOutput = document.getElementById('slider-output');\\n\\n  const val = event.target.value;\\n  const min = event.target.min ? event.target.min : 0;\\n  const max = event.target.max ? event.target.max : 100;\\n  const newVal = Number(((val - min) * 100) / (max - min));\\n\\n  plotSliderOutput.style.left = `calc(${newVal}% + (${11 - newVal * 0.25}px))`;\\n\\n  renderRouteDetails(routeData.pathPlot[event.target.value]);\\n};\\n\"},{\"label\":\"map.js\",\"code\":\"import mapboxgl from 'mapbox-gl';\\nimport * as mapboxPolyline from '@mapbox/polyline';\\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 = (id, data) => {\\n  const decodedData = mapboxPolyline.decode(data?.polyline);\\n  const reversed = decodedData.map(item => item.reverse());\\n\\n  drawRoute(id, reversed, data?.legs);\\n};\\n\\n/**\\n * Draw route polyline and show the point of origin and destination 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 = (id, 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  map.on('mouseenter', 'polyline', () => {\\n    map.getCanvas().style.cursor = 'pointer';\\n  });\\n\\n  map.on('mouseleave', 'polyline', () => {\\n    map.getCanvas().style.cursor = '';\\n  });\\n};\\n\\n/**\\n * Draw route polyline on a map.\\n * @param { array } coordinates - polyline coordinates\\n */\\nconst drawPolyline = coordinates => {\\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 origin and destination on the map.\\n * The destination of the last leg is the destination point.\\n * The origin of the first leg is the origin of our route.\\n * @param { array } legs - stops -- each leg represents either a charging station, or via point or final point\\n */\\nconst showLegs = legs => {\\n  if (!legs || legs.length === 0) return;\\n  let route = [];\\n\\n  route.push({\\n    type: 'Feature',\\n    properties: {\\n      icon: 'location_big',\\n    },\\n    geometry: legs[0].origin?.geometry,\\n  });\\n\\n  route.push({\\n    type: 'Feature',\\n    properties: {\\n      icon: 'arrival',\\n    },\\n    geometry: legs[legs.length - 1].destination?.geometry,\\n  });\\n\\n  // draw origin and destination points on a map\\n  map.addLayer({\\n    id: 'route',\\n    type: 'symbol',\\n    layout: {\\n      'icon-image': '{icon}',\\n      'icon-allow-overlap': true,\\n      'icon-size': 0.9,\\n      'icon-offset': ['case', ['==', ['get', 'icon'], 'arrival'], ['literal', [0, -15]], ['literal', [0, 0]]],\\n    },\\n    source: {\\n      type: 'geojson',\\n      data: {\\n        type: 'FeatureCollection',\\n        features: route,\\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 changing conditions are:\\n *   - full battery at Hanover, Germany\\n *   - EV can charge at CHAdeMO 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 */\\nexport const createRouteQuery = qql`\\nmutation newRoute{\\n    newRoute(\\n      input: {\\n        ev: {\\n          id: \\\"5d161be5c9eef46132d9d20a\\\"\\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 routeUpdateSubscription = qql`\\nsubscription routeUpdatedById($id: ID!){\\n  routeUpdatedById(id: $id) {\\n    status\\n    route {\\n      distance\\n      pathPlot {\\n        elevation\\n        consumptionPerKm\\n        averageSpeed\\n      }\\n      elevationUp\\n      elevationDown\\n      polyline\\n      duration\\n      legs{\\n        distance\\n        origin{\\n          geometry{\\n            type\\n            coordinates\\n          }\\n        }\\n        destination{\\n          geometry\\n          {\\n            type\\n            coordinates\\n          }\\n        }\\n      }\\n    }\\n  }\\n}\\n`;\\n\"}]",[706,707],"stick","top-6",[],{"title":464,"searchDepth":710,"depth":710,"links":711},2,[],"markdown","content:5.examples:3.routes:6.elevation-plot.md","content","5.examples/3.routes/6.elevation-plot.md","md",1775054253122]