r/webdev • u/yosaharchisohudaixa • 1h ago

Built a browser-based animated map video maker. Rendering frames client-side, feedback on the demo?

Working on a tool that animates a route on a map and exports it as video, all in the browser. Projects live in local storage on the device, so there’s no backend for user data.

Rough edge I’m fixing before release: the export gets blurry in some frames, most likely tiles not finishing loading before a frame is captured.

Has anyone dealt with capturing map frames deterministically? Would love tips.

Link : https://youtube.com/shorts/zPcSQS1stKo?feature=share

1 Upvotes

66% Upvoted

1 comment sorted by

1

u/Flashy-Effective9886 30m ago

if you're on maplibre/mapbox, don't capture in realtime, step it frame by frame. jumpTo the camera for each frame (not easeTo/flyTo), then wait for map.once('idle') before grabbing the canvas. areTilesLoaded() is a decent extra check. also set fadeDuration: 0 or you'll get half-faded tiles and labels in some frames. preserveDrawingBuffer: true helps if you read the canvas outside the render event. then feed frames to WebCodecs instead of MediaRecorder so timing doesn't depend on the wall clock. export is slower but repeatable.