Display stations on a map using a GeoJSON response

Rendering stations on a map can be done performant and secure by using a tile service. In this example, the GeoJSON response format will be used and displayed on Google Maps instance.

View on Github

Requirements

Chargetrip API key - to plot routes outside this region
Google Maps API key - to display the map
URQL - a lightweight graphQL client

Steps to take

To render the tiles a tile service URL is required and authorization headers need to be set.
After that, stations can be requested based upon the maps zoom level and the x and y coordinates of the tiles.
Doing this on each map update allows for having up-to-date states on every tile.
To make sure stations are being received provide at least a power and connector filter. Other filters are optional. These filters can be added as url query parameters.

Next steps

With MVT and GeoJSON responses explained, there is not much left to cover on our tile service. Next steps would be playing around with filters and mabye rendering it on a different map provider.

          /** * To establish a connection with Chargetrip GraphQL API you need to have an API key. * The keys in this example are public and only provide access to a small part of our extensive database. * You need a registered `x-client-id` to access the full database. * Read more on how to get your own key 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 stations  'x-client-id': '5ed1175bad06853b3aa1e492',  'x-app-id': '623998b2c35130073829b2d2',};export const getTiles = async (point, zoom) => {  return fetch(    `https://api.chargetrip.io/station/${zoom}/${point.x}/${point.y}/tile.json?connectors[]=IEC_62196_T2&connectors[]=IEC_62196_T2_COMBO&connectors[]=TESLA_S&connectors[]=CHADEMO&powerGroups[]=fast&powerGroups[]=turbo`,    {      headers,    },  )    .then(response => response.json())    .then(data => {      return data;    })    .catch(e => {      console.log(e);      return {};    });};