Herramientas creativas y visualización geoespacial
MapAnim — Route Motion Studio
Editor de mapas de viajes animados en el navegador, con itinerarios editables, una línea de tiempo de cámara, estilos de mapa y exportación MP4.
Editor interactivo de rutas animadas con itinerarios, cámara, estilos de mapa y exportación por fotogramas.
Editor
El problema
Animar un itinerario requiere coordinar la geometría de la ruta, la cámara, los tiempos y el renderizado.
Qué construí
Editor de mapas de viajes animados en el navegador, con itinerarios editables, una línea de tiempo de cámara, estilos de mapa y exportación MP4.
- Importación GPX y tiempos del itinerario.
- Transiciones continuas de cámara.
- Estilos de mapa y ejemplo de la Ruta 66, de Chicago a Santa Mónica.
- Exportación MP4 por fotogramas con FFmpeg.
Arquitectura
React, TypeScript, MapLibre GL y Zustand. Un motor de escena compartido calcula la ruta y la cámara para cada instante; Playwright y Chromium capturan los fotogramas y FFmpeg genera el vídeo.
Componente de IA y agentes
El funcionamiento no depende de IA generativa.
Componentes deterministas
La vista previa y la exportación comparten getSceneAtTime(project, time) para representar la misma escena en cada instante.
Un único modelo de escena para la vista previa y la exportación.
Tecnologías
Mi papel
Desarrollo de producto e ingeniería de software
Resultado
Editor interactivo de rutas animadas con itinerarios, cámara, estilos de mapa y exportación por fotogramas.