Creating Map Animations with LeafletJS
Welcome! Over the past few months, I’ve built myself a neat little prototype that lets me create video clips of map animations using LeafletJS. I’ve used this to create several Youtube videos over on my Exploring Winnipeg Parks Youtube Channel, when I’m explaining details about the location of parks or neighbourhoods. The entire process uses several technologies: Python scripts using the Overpass API and OpenRouteService API to fetch geometries that I want to draw on the map. Both of these API’s make use of OpenStreetMap, the map database maintained by a global community of volunteers. The Shapely Python library to manipulate geometric shapes, and the PyProj Python library to handle geospatial co-ordinates. The LeafletJS JavaScript library to display interactive maps in a web browser window. A custom JavaScript prototype driven by a requestAnimationFrame loop, and a custom JSON file that describes the map animation steps to perform. OBS Studio to record the browser window into a video file. Any video editing software of your choice. I use an old version of Corel VideoStudio, but if you’re looking for a free open-source video editor, you can try out Kdenlive. LeafletJS and the Web Browser LeafletJS is typically used by websites that want to embed a map, displaying the location of their business or other points of interest. I used it extensively on the Exploring Winnipeg Parks website to display the location of parks, with map markers for points of interest and nearby bus stops. ...