Tutorials
beginner
JavaScript

Video: Add a gradient route line to a map

Use the Path Gradients helper library with the Mapbox Static Images API to add a gradient route line to a static map image.

Before getting started, you will need to create a Mapbox account to access your free Mapbox access token. You can create an account at mapbox.com/account.

Create a map image

  • 0:56 - Use the Static Images API playground to generate an API request.
  • 1:10 - Copy the API request URL, paste it into a browser, and hit enter to view your image.

Create a gradient line

  • 1:21 - Download or clone the Path Gradients helper library repository to your computer.
  • 1:43 - Open main.js.
  • 2:10 - In your terminal, run npm ci to install Node packages.
  • 2:15 - In your terminal, run node main.js to generate a default encoded polyline.

Add the line to a map image

  • 2:36 - Copy your original API request URL and paste it into a text editor.
  • 2:54 - Change your API request URL parameters for a better result.
  • 3:04 - Copy the encoded polyline from your terminal and paste it into your API request URL.
  • 3:14 - Copy the API request URL, paste it into a browser, and hit enter to view your image.

Change the line colors

  • 3:22 - Open main.js and change the hex values for startColor and endColor.
  • 3:37 - Run node main.js -f to generate a full API request URL.
  • 3:45 - Add your Mapbox token to the API request.
  • 3:55 - Copy the API request URL, paste it into a browser, and hit enter to view your image.

Change the route

  • 4:02 - Open main.js and replace the route coordinate data with a new array of coordinates.
  • 4:19 - Run node main.js -f to generate a new API request URL.
  • 4:38 - Add your Mapbox token to the API request.
  • 4:44 - Copy the API request URL, paste it into a browser, and hit enter to view your image.
Was this page helpful?