[{"data":1,"prerenderedAt":680},["Reactive",2],{"navigation-list":3,"page-/examples/routes/route-navigation-name":460,"page-/examples/routes/route":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":386,"_dir":462,"_draft":463,"_partial":463,"_locale":464,"title":385,"description":465,"img":466,"background":467,"navigation":362,"body":468,"_type":675,"_id":676,"_source":677,"_file":678,"_extension":679},"routes",false,"","Example of how to request a route and show it on a map","/examples/routes/route.png","accent",{"type":469,"children":470,"toc":672},"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/route/",[],{"type":472,"tag":491,"props":492,"children":493},"ct-grid-section",{},[494,659],{"type":472,"tag":495,"props":496,"children":499},"ct-content",{"className":497},[498],"col-span-6",[500,507,513,526,533,576,582,648,654],{"type":472,"tag":501,"props":502,"children":504},"h1",{"id":503},"mutate-to-create-a-new-route",[505],{"type":506,"value":133},"text",{"type":472,"tag":508,"props":509,"children":510},"p",{},[511],{"type":506,"value":512},"Stations and cars are fun, but it's time to take a look at routing. In this first example the basics will be explained. It will serve as a starting point for more complex routing examples.",{"type":472,"tag":514,"props":515,"children":520},"ct-button",{":is-rounded":516,"href":517,"icon-right":518,"type":519},"true","https://github.com/chargetrip/examples/tree/main/examples/3.routes/1.route","IconName.MD_NAVIGATION_ARROW_UP_RIGHT","primary",[521],{"type":472,"tag":508,"props":522,"children":523},{},[524],{"type":506,"value":525},"View on Github",{"type":472,"tag":527,"props":528,"children":530},"h2",{"id":529},"requirements",[531],{"type":506,"value":532},"Requirements",{"type":472,"tag":534,"props":535,"children":536},"ul",{},[537,552,564],{"type":472,"tag":538,"props":539,"children":540},"li",{},[541,550],{"type":472,"tag":542,"props":543,"children":547},"a",{"href":544,"rel":545},"https://account.chargetrip.com",[546],"nofollow",[548],{"type":506,"value":549},"Chargetrip API key",{"type":506,"value":551}," - to plot routes outside this region",{"type":472,"tag":538,"props":553,"children":554},{},[555,562],{"type":472,"tag":542,"props":556,"children":559},{"href":557,"rel":558},"https://www.mapbox.com",[546],[560],{"type":506,"value":561},"Mapbox API key",{"type":506,"value":563}," - to display the map",{"type":472,"tag":538,"props":565,"children":566},{},[567,574],{"type":472,"tag":542,"props":568,"children":571},{"href":569,"rel":570},"https://formidable.com/open-source/urql/",[546],[572],{"type":506,"value":573},"URQL",{"type":506,"value":575}," - a lightweight graphQL client",{"type":472,"tag":527,"props":577,"children":579},{"id":578},"steps-to-take",[580],{"type":506,"value":581},"Steps to take",{"type":472,"tag":583,"props":584,"children":585},"ol",{},[586,607,627],{"type":472,"tag":538,"props":587,"children":588},{},[589,591,597,599,605],{"type":506,"value":590},"Plotting a route starts by executing the ",{"type":472,"tag":459,"props":592,"children":594},{"className":593},[],[595],{"type":506,"value":596},"newRoute",{"type":506,"value":598}," mutation. This mutation requires information about the car, origin and destination. After the mutation is finished executing a route ",{"type":472,"tag":459,"props":600,"children":602},{"className":601},[],[603],{"type":506,"value":604},"id",{"type":506,"value":606}," will be returned.",{"type":472,"tag":538,"props":608,"children":609},{},[610,612,617,619,625],{"type":506,"value":611},"This ",{"type":472,"tag":459,"props":613,"children":615},{"className":614},[],[616],{"type":506,"value":604},{"type":506,"value":618}," can be used to request route updates through the ",{"type":472,"tag":459,"props":620,"children":622},{"className":621},[],[623],{"type":506,"value":624},"routeUpdatedById",{"type":506,"value":626}," subscription. This subscription receives dynamic updates.",{"type":472,"tag":538,"props":628,"children":629},{},[630,632,638,640,646],{"type":506,"value":631},"After the subscription returns done as status, data can be rendered onto the screen. The ",{"type":472,"tag":459,"props":633,"children":635},{"className":634},[],[636],{"type":506,"value":637},"polyline",{"type":506,"value":639}," and the ",{"type":472,"tag":459,"props":641,"children":643},{"className":642},[],[644],{"type":506,"value":645},"legs",{"type":506,"value":647}," object will be used to display charge stations on the map. Total distance, duration of a trip, consumption are displayed on the side.",{"type":472,"tag":527,"props":649,"children":651},{"id":650},"next-steps",[652],{"type":506,"value":653},"Next steps",{"type":472,"tag":508,"props":655,"children":656},{},[657],{"type":506,"value":658},"This example provides the basis for all upcoming routing examples. More features such as alternative routes, stations along a route, preferred operators and an elevation plot will be added on top of this.",{"type":472,"tag":660,"props":661,"children":663},"div",{"className":662},[498],[664],{"type":472,"tag":665,"props":666,"children":671},"ct-code-tabs",{":codeList":667,":is-inversed":516,"className":668},"[{\"label\":\"client.js\",\"code\":\"import { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';\\nimport { pipe, subscribe } from 'wonka';\\nimport { SubscriptionClient } from 'subscriptions-transport-ws';\\nimport { createRouteQuery, routeUpdateSubscription } from './queries.js';\\n\\n/**\\n * Example application of how to build a route with the Chargetrip API.\\n * Please have a look to Readme file in this repo for more details.\\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 an 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:\\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      if (!routeId) return Promise.reject('Could not retrieve Route ID. The response is not valid.');\\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(route);\\n          }\\n        }),\\n      );\\n    })\\n    .catch(error => console.log(error));\\n};\\n\"},{\"label\":\"index.js\",\"code\":\"import { getRoute } from './client';\\nimport { attachEventListeners, renderRouteData } 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(route => {\\n  drawRoutePolyline(route);\\n  renderRouteData(route);\\n  attachEventListeners(route);\\n});\\n\"},{\"label\":\"interface.js\",\"code\":\"import { getDurationString } from '../../../utils';\\n\\nexport const attachEventListeners = data => {\\n  const driveButton = document.getElementById('drive');\\n  driveButton.removeAttribute('disabled');\\n  driveButton.addEventListener('click', () => {\\n    window.open(getGoogleMapDirectionsURL(data.legs));\\n  });\\n};\\n\\n/**\\n * Show journey specific information like duration, consumption, costs etc.\\n *\\n * @param data {object} route specification\\n */\\nexport const renderRouteData = data => {\\n  // the total distance of the route, in meters converted to km\\n  const routeDistance = data.distance ? `${(data.distance / 1000).toFixed(0)} km` : 'Unknown';\\n\\n  // the amount of stops in this route\\n  const routeStops = `${data.charges ?? 0} stops`;\\n\\n  // the total energy used of the route, in kWh\\n  const routeEnergy = data.consumption ? `${data.consumption.toFixed(2)} kWh` : 'Unknown';\\n\\n  // the average temperature based on all stops across the route\\n  const averageTemperature = calculateAverageTemperature(data);\\n\\n  // A combined field containing several of the route meta data\\n  document.getElementById('route-metadata').innerHTML = `${routeDistance} / ${routeStops} / ${routeEnergy}`;\\n\\n  // the total duration of the journey (including charge time), in seconds\\n  document.getElementById('duration').innerHTML = `${getDurationString(data.duration ?? 0)}`;\\n\\n  // the total time required to charge of the entire route, in seconds\\n  document.getElementById('charge-duration').innerHTML = getDurationString(data.chargeTime ?? 0);\\n\\n  // the total energy used of the route, in kWh\\n  document.getElementById('consumption').innerHTML = routeEnergy;\\n\\n  // the money saved by the user driving this route with the electric vehicle\\n  document.getElementById('cost').innerHTML = `${data.saving?.currency || '€'} ${data.saving?.money ?? 0} `;\\n\\n  // the total amount of CO2 which were used with a petrol vehicle\\n  document.getElementById('co2').innerHTML = data.saving?.co2 ? `${data.saving.co2 / 1000} Kg` : 'Unknown';\\n\\n  // Enable or disable our border-crossing UI\\n  document.getElementById('border-crossing').style.display = data.tags.includes('crossborder') ? 'flex' : 'none';\\n\\n  // A rendering of the average temperature on a specific route\\n  const averageTemperatureTag = document.getElementById('average-temperature');\\n  averageTemperatureTag.innerHTML = `${averageTemperature} ºC`;\\n\\n  // Set the temperature tag color based on the temperature\\n  if (averageTemperature \u003C 0) {\\n    averageTemperatureTag.classList.add('blue');\\n  } else if (averageTemperature > 23) {\\n    averageTemperatureTag.classList.add('red');\\n  } else {\\n    averageTemperatureTag.classList.add('gray');\\n  }\\n};\\n\\n/**\\n * Calculate the average temperature by adding up all temperatures across every stop\\n * and dividing them by the number of stations.\\n * @param { object } data - route specification\\n * @returns { int } - average temperature rounded across all stops to 1 decimal\\n */\\nconst calculateAverageTemperature = data => {\\n  let averageTemperature = 0;\\n\\n  // Go over every leg in our route and get the temperature on every stop origin.\\n  // To prevent an overlap on the last leg we select the destination.\\n  // We then add up all the temperatures into one variable.\\n  data.legs.map((legs, idx) => {\\n    averageTemperature +=\\n      idx === data.legs.length - 1 ? Number(legs.destination.properties.temp) : Number(legs.origin.properties.temp);\\n  });\\n\\n  // Average out the temperature by dividing it through all stops and round the value to 1 decimal\\n  return (averageTemperature / data.legs.length).toFixed(1);\\n};\\n\\n/**\\n * Create a Google Map Directions URL.\\n * See documentation here https://developers.google.com/maps/documentation/urls/get-started#directions-action.\\n *\\n * @param legs Route legs (origin, destination, waypoints and stations)\\n * @returns {string} Google Map Directions URL\\n */\\nconst getGoogleMapDirectionsURL = legs => {\\n  if (legs.length === 0) return;\\n\\n  let googleDirURL = `https://www.google.com/maps/dir/?api=1`;\\n  const origin = legs[0].origin?.geometry?.coordinates;\\n  const destination = legs[legs.length - 1].destination?.geometry?.coordinates;\\n\\n  // Coordinates are an array with longitude as first value and latitude as the second one\\n  // we have to reverse it as Google Maps accept latitude first\\n  const googleOrigin = origin\\n    ?.slice()\\n    .reverse()\\n    ?.join(',');\\n  const googleDestination = destination\\n    ?.slice()\\n    .reverse()\\n    ?.join(',');\\n  googleDirURL += `&origin=${googleOrigin}&destination=${googleDestination}`;\\n\\n  if (legs.length > 2) {\\n    googleDirURL += `&waypoints=`;\\n\\n    legs.forEach((leg, index) => {\\n      // Add charging stations and waypoints\\n      if (index !== legs.length - 1) {\\n        googleDirURL += `${leg.destination?.geometry?.coordinates\\n          ?.slice()\\n          .reverse()\\n          ?.join(',')}|`;\\n      }\\n    });\\n  }\\n\\n  googleDirURL += `&dir_action=navigate&travelmode=driving`;\\n\\n  return encodeURI(googleDirURL);\\n};\\n\"},{\"label\":\"map.js\",\"code\":\"import mapboxgl from 'mapbox-gl';\\nimport { getDurationString } from '../../../utils';\\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: 6,\\n  center: [9.1320104, 54.9758916],\\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 *\\n * @param coordinates {array} Array of coordinates\\n * @param legs {array} route 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    drawChargingTimes(legs);\\n    showLegs(legs);\\n  } else {\\n    map.on('load', () => {\\n      drawPolyline(coordinates);\\n      drawChargingTimes(legs);\\n      showLegs(legs);\\n    });\\n  }\\n};\\n\\n/**\\n * Render the charging times at each station directly on top of it's marker.\\n * @param {array} legs - each leg represents either a charging station, or a via point or final point\\n */\\nconst drawChargingTimes = legs => {\\n  legs.forEach((leg, idx) => {\\n    if (idx == legs.length - 1) {\\n      return;\\n    }\\n\\n    const chargeTime = leg.chargeTime;\\n    const hrs = ~~(chargeTime / 3600);\\n    const mins = ~~((chargeTime % 3600) / 60);\\n\\n    new mapboxgl.Popup({ closeOnClick: false })\\n      .setLngLat(leg.destination.geometry.coordinates)\\n      .setHTML(`\u003Csmall>${hrs}:${mins}\u003C/small>`)\\n      .addTo(map);\\n  });\\n};\\n\\n/**\\n * Draw route polyline on a map.\\n *\\n * @param coordinates {array} 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 charging station, origin and destination on the map.\\n *\\n * Last leg of the route is a destination point.\\n * All other legs are either charging stations or via points (if route has stops).\\n *\\n * @param legs {array} route legs\\n */\\nconst showLegs = 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      icon: 'location_big',\\n    },\\n    geometry: legs[0].origin?.geometry,\\n  });\\n\\n  legs.map((leg, index) => {\\n    // add charging stations\\n    if (index !== legs.length - 1) {\\n      points.push({\\n        type: 'Feature',\\n        properties: {\\n          description: `${getDurationString(leg.chargeTime)}`,\\n          icon: 'unknown-turbo',\\n        },\\n        geometry: leg.destination?.geometry,\\n      });\\n    } else {\\n      // add destination point (last leg)\\n      points.push({\\n        type: 'Feature',\\n        properties: {\\n          icon: 'arrival',\\n        },\\n        geometry: leg.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 Nørresundby, 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      tags\\n      charges\\n      saving {\\n        money\\n        co2\\n      }\\n      chargeTime\\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\"}]",[669,670],"stick","top-6",[],{"title":464,"searchDepth":673,"depth":673,"links":674},2,[],"markdown","content:5.examples:3.routes:1.route.md","content","5.examples/3.routes/1.route.md","md",1775054253113]