Query stations around
To display stations at a certain location and display them on a map, the stationAround query can be used. This query can be combined with some additional filters for more precise results.
View on Github
Requirements
- Chargetrip API key - to fetch stations all over Europe instead of a subset
- Mapbox API key - to display the map
- URQL - a lightweight graphQL client
Steps to take
- Start by implementing the
stationAroundquery. ThestationAroundquery requires a GeoJSON location and the distance around this GeoJSON location as arguments. Optionally apoweroramenityfilter can be applied to plot stations that meet the requirements. - In this example the
distance,powerandamenityare dynamic. To do so, additional logic is written to request new data everytime one of these filters are updated. - With this logic in place, it's time to render the stations onto a map based on their location. The availability of the station will also be taken into account to show the differences on the map.
Next steps
After stations are available on a map, fetching additional station data on interaction is a logical next step. So let's move onto the next example to fetch data such as chargers, predicted availability, amenities or operator details.
- client.js
- index.js
- interface.js
- map.js
- queries.js
- 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
import { createClient, defaultExchanges } from '@urql/core';import { getStationsAroundQuery } from './queries.js'; /** * 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 an 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 client = createClient({ url: 'https://api.chargetrip.io/graphql', fetchOptions: { method: 'POST', headers, }, exchanges: [...defaultExchanges],}); /** * In this example we fetch the closest stations within a radius of 3000 meters */export const getStations = ({ distance = 3000, power = [], amenities = [] }) => { return client .query(getStationsAroundQuery, { query: { location: { type: 'Point', coordinates: [10.197422, 56.171395] }, distance, power, amenities, }, }) .toPromise() .then(response => { return response.data?.stationAround; }) .catch(error => console.log(error));};