Sign in / Sign up
State of charge Mapbox Vector Tiles

Display toll roads and ferries on your journey overview

This example will explain how to add ferries and toll roads to the journey overview in order to better inform users about what to expect.

View on Github

Requirements

Steps to take

  1. Plotting a route starts with executing the newRoute mutation. This mutation requires information about the car, origin and destination. After the mutation is finished executing a route id will be returned.
  2. Ferry steps are not split up by default. Inside interface.js it is first necessary to see if a leg contains a ferry route, and if so, to then split up the leg so as to more easily display it as a step on the journey overview.
  3. It is also useful to check if the leg contains toll roads before rendering the entire journey overview, which has now been split into separate legs.

Next steps

The last couple of examples explained most of the variables when it comes to routing. In the next step, the vector tile service is introduced.

  • 01
  • 02
  • 03
  • 04
  • 05
  • 06
  • 07
  • 08
  • 09
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
          import { SubscriptionClient } from 'subscriptions-transport-ws';import { createClient, defaultExchanges, subscriptionExchange, createRequest } from '@urql/core';import { createRouteQuery, routeUpdateSubscription } from './queries';import { pipe, subscribe } from 'wonka'; /** * For the purpose of this example we use urql - lightweights GraphQL client. * To establish a connection with Chargetrip GraphQL API you need to have an API key. * The key in this example is a public one and gives access only to a part of our extensive database. * You need a registered `x-client-id` to access the full database. * Read more about authorisation in our documentation (https://docs.chargetrip.com/#authorisation). */const headers = {  //Replace this x-client-id and app-id with your own to get access to more cars  'x-client-id': '5ed1175bad06853b3aa1e492',  'x-app-id': '623998b2c35130073829b2d2',}; const subscriptionClient = new SubscriptionClient('wss://api.chargetrip.io/graphql', {  reconnect: true,  connectionParams: headers,}); const client = createClient({  url: 'https://api.chargetrip.io/graphql',  fetchOptions: {    method: 'POST',    headers,  },  exchanges: [    ...defaultExchanges,    subscriptionExchange({      forwardSubscription(operation) {        return subscriptionClient.request(operation);      },    }),  ],}); export const getRoute = callback => {  client    .mutation(createRouteQuery)    .toPromise()    .then(response => {      const routeId = response.data.newRoute;       const { unsubscribe } = pipe(        client.executeSubscription(createRequest(routeUpdateSubscription, { id: routeId })),        subscribe(result => {          const { status, route } = result.data?.routeUpdatedById;          // Subscription used as computation time can increase for longer routes.          if (status === 'done' && route) {            unsubscribe();            callback(route);          }        }),      );    })    .catch(error => console.log(error));};