Video: Add a gradient route line to a static map
Intermediate
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 forstartColor
andendColor
. - 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:
Related tutorials