Animating Maps

I spent several hours today playing around with animated GIFs. For those who aren’t among the technocenti (circa 1995), an animated GIF is a type of graphic file that allows you to animate its contents. You’ll see a fair number of them online, particularly if you read many blogs with animated cat icons. It’s a poor cousin to the more powerful animations and interactive websites available in Flash, which Steve Jobs declared war against about the time the iPad came out.

I’d dabbled with Flash before, and will again, but I wanted to keep my experimentation simple at first. So here’s my first attempt. I have lots of ideas for the medium-term future, but this will give you a sense of what they look like at their most basic.

Animated map of Allied holdings in Iberia, War of the Spanish Succession

(The blog may require you to click on the image in order to run the animation. Go ahead. I’ll wait.)

I was able to easily export my Adobe Illustrator file into Photoshop and then use its Animation feature. It’s actually a bit more complicated than that, because you need to rethink how you represent your content when you shift from static to animated, and essentially rethink your layering strategy.


  1. Do you find animations like the above effective?
  2. How would you improve it?
  3. Is animating a map like the above worth the effort, or is it better to just do a static map, such as:

    Static Version of Allied-held Territory in Iberia


Tags: , , , ,

9 responses to “Animating Maps”

  1. Gene Hughson says :

    1) Very nice: not too slow (bad) or too fast (worse). Leaving the outline of the lost territory was a nice touch as well.

    2) see 3

    3) both…each serves a different purpose

  2. Wienand Drenth says :

    1. The animation was good. I noted that the text did not change, so everything was 1706. In my opinion such an animation should be a means to a goal, not a goal in itself. I remember the late 1990s, when Powerpoint was new and everybody was playing around with the moving and flying text animation. Like you did, leaving a contour of the previous map is in particular effective!

    2 and 3. I think it depends on the amount and type of information you want to present whether an animation is effective or not. Prior to creation, a good assessment of what you want, how you want it and what the message is you want to tell is important. The level of contrast between two successive images should be high enough, for the audience to get and understand the difference. I mean, on the scale of Spain showing daily troop movements would not be effective. So, sometimes two stand alone maps will do, but sometimes an animated map. Advantage of stand alone maps is that they can be recycled in printed work.

    • jostwald says :

      I actually have a title above the map listing each year as the animation progresses, but for some reason it doesn’t show up. If you save the .gif and open it in a separate browser you’ll see the title text. Must be something to do with how the blog displays the .gif on that black background.

  3. Björn Thegeby says :

    Showing me a map of Spain at that time is dangerously close to propositioning;-)

    But on the more specific issues: Be careful about linking territory to success. I would suggest adding moving icons representing locations of armies-in-being to give a dimension of actual power.

    (Taking Madrid was as futile in 1706 as it was in 1710. You should probably in this case have pinked a swathe of terrain from Badajoz to Salamanca to Avila to Madrid as that is where the 1706 occupation came. However, even in August 1706, the allies saw their conquests unravel.)

    You could probably use animation to good effect if you limited it to the changes in Catalonia/Aragon, where territorial control had real relevance.

    Another issue is the need for mobility for supply purposes. An army in Spain could not remain in place, particularly if it had a large cavalry component. Leaving the 1706 allies in possession of Madrid in the summer (hot, dry, no local food), while the Spanish army withdrew to the slightly cooler and greener Old Castile, was probably the most efficient way of weakening it, particularly when cutting supply routes and harassign foraging parties were added. This is in some way more akin to naval strategy.

  4. Björn Thegeby says :

    PS. I don’t think Gib and Menorca “remained British”. They became British through the agreement 1713 between France and the UK at Utrecht, accepted by Felipe V but not by Carlos III/VI until the Treaty of the Hague in 1720. The early governors of Gibraltar were appointed as representing the King of Spain and the garrison was Anglo-Dutch. Menorca had a subtle distinction beween a military governor (British) and a civil governor (Spanish) reflecting the increasing dependency of Carlos III on British funds.

    • jostwald says :

      Good comments everyone. Future versions for comparison will include small multiples, army movements (arrows)…

      The main theme of the map(s) was to illustrate how far the Allies fell from their (admittedly brief) highpoint. I hadn’t appreciated the confusion it could bring because it is the inverse of the usual strategic map where the narrative is one of advance (from the victor’s side) rather than retreat, and of the new areas indicating gains in that year vs. areas denoting the last year it was held (mentally you need to add a year to see when that area was lost, which is a bit confusing). [I think it’s for this reasons that maps of the Western Front in WW1 are so confusing with the back and forth of the lines – that’s why I chose to start my map in 1706 rather than have to deal with the Allied advances in 1705.] The Spain map is the opposite of the convention, showing retreat, and as a result I have had more conceptual difficulty abandoning the advance conventions. I chose to have the darker colors be the areas held the longest by the Allies (more concentrated in a smaller area if you will), yet for the more-common advance maps lighter colors usually indicate later periods in time rather than earlier (although the same logic of darker colors = longer-held territory still holds). In that sense, I think the animation does a better job of illustrating the retreat than the static map, even though I prefer the static map because you can keep each year in mind, and not just the 1706 high-water mark and whichever year you’re currently viewing. With the animation, by the time you’re at 1712, you’ve likely forgotten that 1707 was the big year of Allied reversal (Almansa and all that), although the area that indicates this is labelled 1706. I could reverse the map – showing Bourbon advances in blue instead of Allied retreats in red – but then that would be a story about the Bourbons, whereas this map was created to help visualize the Allied retreat. In other words, this map was a lot more complicated than I had first realized.

      Regarding territory and success, Björn’s point is well taken, and in earlier versions I didn’t include any of the ‘finger’ territory from Aragon to Madrid (and therefore neither from Badajoz to Madrid). In general, anyone trying to create such maps for the early modern period will quickly discover the imprecision involved. When I made my Low Countries map illustrating Allied gains by year for the Vauban book, I simply plotted the winter quarter garrisons on each side and then drew a line (usually equidistant) between the two. In theaters without clear borders (or lines of fortifications), it’s much more difficult. I suppose you’d probably have to look at town by town to see who occupies/runs it. And that’s a lot of work and inherently imprecise. As Björn suggests, a claim to territorial control/sovereignty is not the same as actual occupation is not the same as where armies marched (James Wood in The King’s Army refers to it as spoor). That would be an interesting map to make for comparison, but very hard to find the info I’d think. It’d also be interesting to include partisan activities behind the ‘front’ (I might try to do this for Flanders).

      The decision to sample the area at the end of the campaign is a simplifying strategy, but it also hides the back-and-forth that happens during a campaign (I tried to finesse that for 1706 with the distinction between peak-1706 and end-1706). I think giving a sense of that ebb-and-flow is useful if you are trying to illustrate the swing of emotions contemporaries must have felt, e.g. in 1706: “The Bourbons are going to capture Barcelona – Charles is finished! No wait, the siege was lifted, whew. Our forces are converging on Madrid! We’ve captured Madrid – Spain is ours! WTF, we’ve abandoned Madrid and are marching back to Catalonia?!?”

      As usual, my attempts to use simple language (re: Gibraltar and Minorca) have been contested! I was thinking of “Remains British” in terms of “British troops (the majority of the garrisons) were still occupying it, regardless of its legal status.” So the question is, what one word synonym should be used in those cases? In my Vauban book, I was proud to figure out a concise way to indicate more than one criteria for the Dutch barrier fortresses after the treaty of Rijswijk 1697: who legally owns it (the Spanish), who garrisons it (the Dutch), in addition to indicating that it had been French during the war but was now Spanish.
      Barrier Fortress

  5. Cliff Rogers says :

    Jamel- Nice maps. I do think the animation is helpful and would be improved by adding positions and movements of armies-in-being. It would also help to add the dates onto the animation similar to how they are on the static map, to do with your light shading- e.g. put a 1707 in the region lost during 1707 and keep it there as the further maps progress. Another thing that will really help is a slider bar to allow the reader to control the speed of advance and to go backwards and forwards, which we will be able to add for you.

    • jostwald says :

      Thanks Cliff. Your suggestions are indeed in the planning phase. Regarding controlling the speed, animated gif’s don’t have that type of interactivity – you need something like Flash for that (which I have, but haven’t had time to play around with much). Apple prefers HTML 5 (and Javascript I think, but such discussions are a bit too tech-y for my tastes).

      I did create the Spain map myself – in fact, I made it back in grad school (with AutoCAD originally), when my diss intended to focus on all four theaters of the Spanish Succession. I have one of Italy too, but dropped the non-Flanders theaters idea before I got around to doing Germany. I put up an earlier post on my personal journey that talks about it.

  6. Cliff Rogers says :

    By the way, did you create the base map of Spain yourself?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: