Sign in / Sign up
Vehicle details Station details

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

Steps to take

  1. Start by implementing the stationAround query. The stationAround query requires a GeoJSON location and the distance around this GeoJSON location as arguments. Optionally a power or amenity filter can be applied to plot stations that meet the requirements.
  2. In this example the distance, power and amenity are dynamic. To do so, additional logic is written to request new data everytime one of these filters are updated.
  3. 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.

  • 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));};