Video: Add a gradient route line to a static map | Help

Intermediate

codeJavaScript

This video tutorial shows you how to use the Path Gradients helper library with the Mapbox Static Images API to add a gradient route line to a static map image.

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.

Next steps

Now you know how to add a gradient route line to a Mapbox static map image.

Here are some things to try next: