Bring Your Points to Life with GIF Symbols

You can easily transform your maps by using a custom image as your point symbol in ArcGIS Online. But did you know that you can create animated point symbols using the same technique?

There are many image formats out there (JGP, PNG, etc), but the one we are interested in for animated symbols is the GIF (Graphics Interchange Format). GIF files support multiple frames, which is why they appear as animated. By spacing out the timing of multiple images, a GIF comes to life, like in the map above showing graffiti incidents in Minneapolis. So how is this done?

Overall, the process is easy:

1)      Find/create the GIF you want

2)      Host the GIF

3)      Use it as your point symbol

For example, the maps used within the Broken Arrows Story Map (seen above) show nuclear weapon accidents by using a point symbol which looks like a detonation. My coworker created this GIF symbol by using Adobe Photoshop. She used the timeline window, where each component of the GIF exists as its own layer. After applying some keyframe manipulations and transformations, the GIF and its loop were created using the save for web option.

Another example, created by yours truly, is this 2017 NFL Wins/Losses map where the football symbol shows the week-by-week wins and losses of each NFL team. Winning teams smile with pride, losing teams cry of shame, and the bye weeks are resting soundly.

Since I don’t have Photoshop, I created these symbols using PowerPoint. I used basic shapes, curves, and ovals to create the little football faces. For each emotion, I created two versions of the facial expression, and saved each one as its own image. I then used the free website ezgif to transform the two images into a moving animation.

The key to creating your own is to make sure the background of each image is transparent, or you end up getting a white box around your final GIF. To avoid this, save each image using the PNG format in order to preserve transparency.

Once you have your GIF, you’re almost there! This blog explains exactly how to use a custom image as a point symbol in your maps, where all you need is the URL of your image. I use imgur to host my GIFs because it is free and easy to use, but there are many others that can also be used, so use your favorite! Some examples include Flickr, Dropbox, Google Photos, TinyPic, and many others.

Once hosted, use the URL of the image as your point symbol in ArcGIS Online. Make sure the URL contains “.gif” at the end!

Have fun with this technique, but be careful not to create too much movement on the map. You don’t want your map audience to become dizzy! Keep it simple, and use animation to emphasize a particular action or event.

Happy Mapping!

This entry was posted in ArcGIS Online, Cartographic Design, Mapping, Web and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

3 Comments

  1. johnmdye says:

    This is a great tip, Lisa. When done well, animated GIFs can really make an otherwise boring map feel much richer. That broken arrows web map is a great example.

    Here are some additional considerations folks should consider before using animated GIFs:
    What clients will be used to view this web map and/or layer?
    Animated GIFs are not 100% portable across the ArcGIS Platform. If your webmap or layer might be accessed from ArcGIS Desktop, using an animated GIF is probably not a great choice because those products will not play the GIF. The same goes for runtime apps like Collector, Explorer and others. Though, Explorer might work now that its been rebuilt using the Quartz Runtime SDK.

    How fast does my map need to load?
    Animated GIFs are prone to having large file sizes, which can make your webmap load slower. If you use them sparingly, your animation is relatively simple and you minimize the number of frames you can manage the size pretty well. There are free tools on the web to help optimize animated GIFs such as ezgif.com and keep those file sizes as small as possible. You can also use visible scale ranges to your advantage here, displaying the layer with the actual animation only when a user has zoomed in, which will prevent too many requests for animated GIF resources from slowing down your map’s load time.

    Play with the image size before creating a GIF
    GIFs are still rasters, which means they don’t scale very well. Before doing a bunch of work to create an animated GIF, play with a sample image first, sizing it and resizing it to determine what the dimensions of your animated GIF need to be because once you’ve created your GIF, you don’t want to have to redo that work because its too big or too small and you can’t resize it without significant distortion.