Frontend External APIs - SE750-Group14-GirlGang/roadtrip-planner GitHub Wiki

Mapbox GL JS

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps. Geocoder was a component used that was created as an add on to Mapbox GL JS that allows for the searching and selecting of locations.

For more details on Mapbox GL JS visit their website.

For more details on Geocoder visit their GitHub repository.

Styling

Mapbox allows you to create custom map styles, but we imported one of their existing ones, named "Streets V11", and applied this to the maps used in our application, and then used a custom Marker component from Mapbox GL JS that we customised to fit our colour scheme (turning it a coral/salmon colour).

Integrating the map

Integrating a map into the application involved setting up a container the map would appear in, setting the view width and height, setting an initial viewport detailing a latitude, longitude, and zoom level the map would start at, and adding a Mapbox token to the environment variables. State was then used to update the latitude and longitude the map was centred on as a location was selected and submitted/received.

Selecting a location

The Geocoder component was added and linked to the map set into the Map Page Modal to allow for the searching and selecting of a location on the map, and setting a marker on that location. No further implementation needed to be added for this to work, besides retrieving the latitude and longitude data from the selected location to save this data and relay it to the main Map Page.

Spotify

Authorization

There were four optional flows to obtain authorization to Spotify. We decided on the authorization code flow.

  • The user grants permission to the web app once for the scopes
  • We prompt the user to a webpage where they can choose to grant access to their data.
  • An access token and a refresh token is received.
  • The access token is valid for an hour. A new one needs to be requested using the refresh token after this time.

API Calls

Many of the Spotify API calls were made with the help of spotify-web-api-js.

Example:

const spotify = new SpotifyWebApi();
spotify.setAccessToken(accessToken);

spotify.requestMethod().then((response) => handleResponse);

We give the access token and the built-in methods take care of the rest.