Display an isoline to show driving distance
Is the destination reachable with the current state of charge? Can an electric vehicle really go that far? Questions often heard. By using isolines, these questions don't go unanswered. Display the driving distance from a location on a map.
View on Github
Requirements
- Chargetrip API key - to plot routes outside this region
- Mapbox API key - to display the map
- URQL - a lightweight graphQL client
Steps to take
- To display an isoline, a mutation and subscription are required. The createIsoline mutation will be used to define variables such as the polygon_count and location. In return an id will be created that can be used on the subscription.
- The isoline subscription will provide status updates. Calculation of an isoline can take a little while depending on the polygon_count.
- When the isoline is ready and the subscription returns status done, it can be plotted on the map.
Next steps
This example illustrates the basics of how to display an isoline. To learn more about isolines and their capabilities navigate to our API reference.
- 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
- 61
- 62
- 63
- 64
- 65
- 66
- 67
import { SubscriptionClient } from 'subscriptions-transport-ws';import { createClient, createRequest, defaultExchanges, subscriptionExchange } from '@urql/core';import { createIsoline, isolineSubscription } from './queries';import { pipe, subscribe } from 'wonka'; /** * For the purpose of this example we use urgl - 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 and stations '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); }, }), ],}); /* * To create an isoline you need to: * * 1. create an isoline and receive back its ID; * 2. subscribe to isoline updates in order to receive its details. */export const getIsoline = callback => { client .mutation(createIsoline) .toPromise() .then(response => { const isolineId = response.data.createIsoline; const { unsubscribe } = pipe( client.executeSubscription(createRequest(isolineSubscription, { id: isolineId })), subscribe(result => { const { isoline } = result.data; // To improve performance please unsubscribe when you have reached a final status. if (isoline.status === 'done') { unsubscribe(); callback(isoline); } else if (isoline.status === 'not_found') { callback(); } }), ); }) .catch(error => console.log('error', error));};