Chargetrip Tile Service with React Native and Mapbox

Tim Kuilman Nov 3, 2020 · 2 min read

Chargetrip Tile Service with React Native and Mapbox

The Chargetrip EV Routing Platform enables companies in the e-mobility space to build ground-breaking (navigation) applications. The GraphQL API can be used to build advanced route planners, station databases, EV-comparison tools, and many other valuable products. This article introduces you to the Chargetrip Tile Service and the caveats of integrating it into a React Native mobile application.

What is the Chargetrip Tile Service?

The Tile Service is an important part of the Chargetrip Platform. It provides a fix for painfully slow maps that render dynamic data like availability. The Chargetrip Tile Service implements an in-house developed Vector Tile Server that offers a pre-rendered, fully clustered station map solution with filtering capabilities. It combines rich functionality (filtering on connector type, charging power, speed, etc.) with excellent performance even for devices that lack high computational power, such as low-end mobile devices and in-car infotainment systems.

Setting up authentication

We have built a simplified demo application to demonstrate how you can integrate the Charegtrip Tile Service into a React Native application. In this example, we make use of the react-native-mapbox/maps library which is a wrapper over the native iOS and Android Mapbox SDKs that lets you build maps.

To authenticate with the Chargetrip API, you need to set a custom header on all requests made by Mapbox. Similarly to setting a Mapbox token you can simply call the addCustomHeader method on the React Native side.

MapboxGL.addCustomHeader('x-client-id', 'your-client-id-here');

For iOS we need to include two extra lines in the AppDelegate.m file that will initialize the custom HTTP headers on the native side. You can find more information about custom headers in the documentation or check this commit. An additional setup for Android is not required.

Running the demo locally

Prior experience with running React Native applications is required for successfully running our example on your local machine. You can find detailed instructions in the repository.

  1. Sign-up for a Mapbox account at mapbox.com/account. After logging in with the newly created account you can see your personal Mapbox token.

  2. Fill in the MAPBOX_TOKEN and CHARGETRIP_CLIENT_ID. For the purpose of this demo, you can use the demo client ID 5e8c22366f9c5f23ab0eff39.

  3. Run the application in the simulator!

What to do next?

Now that you have the demo application running on your local machine you can explore the full power of the Chargetrip Tile Service! With the current implementation only two types of connectors are displayed. Can you make the filter query dynamic and add filtering capabilities on power groups or only show stations that are available right now?

Do you have questions after reading this article? Please leave a comment below this article and we will try to help you!