Creative tools & geospatial visualization
MapAnim — Route Motion Studio
A browser-based editor for animated travel maps, with an editable itinerary, camera controls, a timeline, map styles and MP4 export.
An interactive route-animation editor combining itinerary editing, camera controls, map styling and a frame-by-frame export pipeline.
Editor
Problem
Turning a travel itinerary into a map animation requires coordinating route geometry, camera movement, timing and video rendering.
What I built
A browser-based editor for animated travel maps, with an editable itinerary, camera controls, a timeline, map styles and MP4 export.
- Editable itineraries, GPX import and route timing on a timeline.
- Camera controls and continuous route transitions.
- Multiple map styles and a Route 66 example from Chicago to Santa Monica.
- Frame-by-frame capture and FFmpeg MP4 encoding.
Architecture
React and TypeScript power the editor, MapLibre GL renders the map, and Zustand manages project state. A shared scene engine evaluates the route and camera at a given time. Playwright captures frames in Chromium and FFmpeg encodes the video.
AI / agentic component
The route animation and video export pipeline does not depend on generative AI.
Deterministic components
The editor preview and frame-by-frame export share getSceneAtTime(project, time), so both use the same route and camera calculations.
One scene model for interactive preview and exported video.
Stack
My role
Product development and software engineering.
Outcome
An interactive route-animation editor combining itinerary editing, camera controls, map styling and a frame-by-frame export pipeline.