Categories
Make

Map Animations • Make

Map Animations • Make

Creating Map Animations with the Mapbox Static Images API

Overview

Television production companies want to create high quality, customizable map animations. Mapbox does not have an animation product, however it is possible to create them with the Mapbox Static Images API and editing software.

Here’s a method that shows you how.

Tools

  • Ruby Programming Language
  • ffmpeg - a command line tool to convert multimedia files between formats

Make sure these are installed on your system.

Animate.rb

The Animate.rb is a ruby script used to create Map animations.

Project Settings

In the program, you’ll need to set the Project Name, which is used to create some output folders, and to help name your output animation, with the map style name.

Make sure your Mapbox_User_Token is properly set.

Set your the MapAccount value, and the MapStyle value, to correspond to the map that you’ll be using.

Project Settings

You’ll need to set the duration of the animation. How long do you need the animation to be? The units used are seconds.

Set the FPS value, which is the final frames per second that you want to use.

These two values are multiplied to each other to get the number of frames needed to build the animation.

Set the height and width of the animation, in pixels.

Animation Settings

The animation settings are necessary to get the camera movement in the animation. You can use zoom, pitch, bearing and lat long, as animatable parameters.

Animation Settings

Getting IncrementBy values

The incrementBy values for the animation settings are calculated by first determining the number of frames. Then we find the difference between the end and start, which is divided by the frame count. This provides us with the incrementBy value for the animation settings. As we iterate through the creation of each frame, we use the incrementBy value to find out the right animation value to request.

Getting incrementBy Values

Building the Animation

Every frame is generated by assembling a new Static Image API request, calling it, and storing the frames in a folder. Once every frame has been made, we stitch the frames together into a video file to build the animation.

Examples

Coming soon

  • Cluster data overlay
  • Dark Map Zoom
  • Light Map Zoom

Things to try

  • Choropleth Overlay

  • Heatmap Overlay

  • Trace Route Overlay

  • Follow points

  • Many points

  • Ease In Ease Out

  • Parabola Camera Flight

  • Bearing Increment

  • Circle Flight

  • Sine Wave Oscillate

Inspiring Examples

There are some great examples of map flyovers that I’d like to try to replicate. The first one that comes to mind is the Powers of Ten movie by Eames. I’m sure I’ve seen some on National Geographic, and I love the Apple TV screensaver.

Attempt to replicate these
  • Powers of Ten, Eames
  • National Geographic style
  • Apple Screensaver style
  • Around the World
  • Continents

Summary

I used the method above to create high resolution map animations. If you need help implementing this method into your workflow, feel free to reach out anytime!