This week’s E-Learning Challenge was to create an interactive map for eLearning. Many of the responses demonstrated how to use a map as a map, to show key points of interest or navigation. See the recap for lots of good examples. 

When I work with clients, I’ve found that I most often use a map as a way to present material that I want learners to connect with on a personal basis. I give them a map that they can identify with, perhaps as their own neighborhood (even though it obviously won’t match), and so they can connect what they are learning to a schema they already possess. 

To complete this challenge, I started with an illustrated map graphic from eLearning Brothers. I downloaded the EPS version so that I could open it in Adobe Illustrator and then save different pieces of the graphic as individual items. So, the original one-piece map became a map background that I could easily resize to fill my background, and five differently colored markers that I could add to the file through separate animation effects. Once I had these markers isolated in Illustrator I could easily have made more if I needed them, but in this case I only needed four.

I put a number on each marker to suggest the chronological order of the events, and then put a hotspot on each marker that would show a layer with the content for that marker appearing. For the sake of reinforcing connections, the text box for each marker was given a matching color border.

If you click through to see the sample, you can also take a look at the animated street view that appears in a lightbox (pop-up) on top of the map image. In this case that’s just for fun, but I’ve also used this change in perspective to add additional details, as needed. Click the thumbnail below to see the full sample.