remotion-dev / mapbox-example

Remotion Mapbox example

Remotion Mapbox example

video.mp4

This example allows you to animate a route using Mapbox and export it as an MP4 using Remotion. You need a Mapbox API key, which is free though.

Special considerations for using Remotion with Mapbox

• Since rendering happens on multiple cores, more Mapbox initializations may be charged to your Mapbox account.
• Mapbox has label transitions that cannot be controlled using useCurrentFrame() - therefore they have been disabled.
• Having no transitions causes certain elements like terrain data and POI markers to not be animated nicely - therefore those have been disabled in the style.
• Since it uses the GPU, the angle rendering mode has been enabled in the config file.
• If you want to render this video on Lambda, it will be slower because Lambda has no GPU.

Mapbox style

You can copy the mapbox style from here: https://api.mapbox.com/styles/v1/jonnyburger/clgtb8stl002z01o5d15ye0u0.html?title=copy&access_token=pk.eyJ1Ijoiam9ubnlidXJnZXIiLCJhIjoiY2xndDg3Y3lmMjFsazNrbW0zdWEzOTVpbSJ9.S40QeakLmFuEyxi8MBMczg&zoomwheel=true&fresh=true#14.09/42.69864/9.45602

Commands

Install Dependencies

npm i

Start Preview

Rename .env.example to .env and add an API key that you get through https://account.mapbox.com

npm start

Render video

npm run build

Upgrade Remotion

npm run upgrade

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Notice that for some entities a company license is needed. Read the terms here.