Exploring the TransLink API with JavaScript

Are you looking to create an application that uses public transit data in the Metro Vancouver area? If so, the TransLink API might be the perfect tool for you. In this blog post, we'll cover everything you need to know about using the TransLink API in JavaScript, including some useful example code.

Getting Started with the TransLink API

Before you can start using the TransLink API, you need to create an account and apply for an API key. Once you have your API key, you can access the TransLink API documentation to explore the different endpoints and query parameters available.

Making Requests with JavaScript

To make requests to the TransLink API in JavaScript, you can use the built-in fetch function. Here's an example of how to make a request to retrieve all the Bus Routes:

fetch('https://api.translink.ca/rttiapi/v1/routes', {
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer your-api-key-here'
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

In this code snippet, we're using the fetch function to send a GET request to the TransLink API's /routes endpoint. We're also including our API key in the Authorization header of the request.

Example Use Cases

Displaying Next Bus Times

One of the most common use cases for the TransLink API is displaying next bus times for a given stop. Here's an example of how to make a request to get the next bus times for a given stop:

const stopId = '60921'; // Replace with your desired stop ID
const busRoute = 'C18';  // Replace with your desired bus route

fetch(`https://api.translink.ca/rttiapi/v1/stops/${stopId}/estimates?apikey=your-api-key-here&routeNo=${busRoute}`, {
  headers: {
    'Accept': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    // The API returns an array of time estimates, so we only need the first one
    const nextBusTime = data[0].Schedules[0].ExpectedLeaveTime;

    // Do something with the next bus time, like display it on a webpage
    console.log(`The next ${busRoute} bus is coming at ${nextBusTime}!`);
  });

In this code snippet, we're making a request to the TransLink API's /estimates endpoint to get the next bus times for a specific stop and bus route. We're then extracting the first time estimate (which will be the next bus time) from the response data and doing something with it (in this case, logging it to the console).

Displaying Bus Locations on a Map

Another use case for the TransLink API is displaying bus locations in real-time on a map. Here's an example of how to make a request to get the current locations of all buses on a given route:

const routeId = 'C18'; // Replace with your desired route ID

fetch(`https://gtfs.translink.ca/v2/gtfsrealtime/buses?apikey=your-api-key-here`, {
  headers: {
    'Accept': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    // Filter the bus data to only include buses on our desired route
    const busesOnRoute = data.entity.filter(bus => bus.vehicle.trip.route_id === routeId);

    // Do something with the filtered bus data, like plot it on a map
    console.log(`There are currently ${busesOnRoute.length} buses on route ${routeId}.`);
  });

In this code snippet, we're making a request to the TransLink API's GTFS Realtime feed, which provides real-time data about buses and their locations. We're then filtering the response data to only include buses on a specific route, and doing something with that filtered data (in this case, logging the number of buses on the route to the console).

Conclusion

The TransLink API is a powerful tool for anyone looking to build applications that make use of public transit data in the Metro Vancouver area. With a little bit of JavaScript code, you can access real-time data about bus locations, next bus times, and more. We hope this blog post has given you some ideas for how to get started with the TransLink API in JavaScript!