All casesGIS & Data Visualization

movingpolygons.com

Creator & Lead Developer

2023 — Present/Personal Project
Visit project

The Challenge

Animating shapes across a map sounds simple until you try it. Geographic coordinates are not linear, projections distort movement, and rendering dozens of concurrent animated polygons at 60fps in a browser is a performance challenge. Existing tools either require desktop GIS software or only support static visualizations.

My Contribution

Built the entire tool from scratch: a Mapbox GL JS canvas layer for rendering, custom great-circle interpolation algorithms for smooth geographic movement, and a timeline editor for controlling speed, easing, and sequencing of multiple polygons.

Designed the UI to be approachable for non-technical users: define waypoints by clicking the map, adjust timing with drag handles, customize polygon styles, and export the result as video or GIF. Optimized the rendering loop to maintain 60fps with 50+ concurrent animated elements.

Key Results

  • Smooth 60fps animation with 50+ concurrent moving polygons in the browser
  • Great-circle interpolation producing geographically accurate movement paths
  • Export to video/GIF enabling use in presentations and social media
  • Zero-install browser tool accessible to non-GIS users

Technologies Used

TypeScriptMapbox GL JSGeoJSONCanvas APIWeb AnimationsReact