How are Designers Using Interactive Maps in Online Training? #314

Interactive Maps in E-Learning #314: Challenge | Recap

Interactive maps are a great way to showcase specific points of interest. Similar to virtual tours, interactive maps let users explore diagrams, floor plans, 3D renderings, and geographic locations.

Unlike virtual tours, interactive maps don’t include guided tours or walkthroughs. Interactive maps put users in control so they can visit the locations they’re most interested in. 

And that's what this week's challenge is all about! Below are some recent examples to help you get started.

Bravehearts Interactive Map

There's a lot of e-learning goodness going on in this interactive map by Samuel Apata. The map features looping animations, sliders, animated tooltips, and gorgeous graphics.

Bravehearts Interactive Map

View the example | Samuel Apata

Where in the World is Carmen Articulato

Identifying an e-learning character's breakout role isn't always easy. Character icons like Atsumi are so ubiquitous, even experts debate when she shot to fame. For more recent celebrities like Carmen Articulato, their origin story is easier to track down. Check out Carmen's breakout role in this engaging, character-driven example from Jonathan Hill.

Where in the World is Carmen Articulato

View the example | Download | Jonathan Hill

Challenge of the Week

This week, your challenge is to build and share an interactive map to show how they can be used in e-learning.

Share Your E-Learning Work

  • Comments: Use the comments section below to share a link to your published example and blog post.
  • Forums: Start  your own thread and share a link to your published example..
  • Personal blog:  If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
  • Social Media: If you share your demos on Twitter or LinkedIn, try using #ELHChallenge so your tweeps can track your e-learning coolness.

Last Week’s Challenge:

Before you map out this week's challenge, check out the e-learning icebreaker games your fellow challengers shared over the past week:

29 Interactive Icebreaker Games for E-Learning #313

E-Learning Icebreaker Games RECAP #313: Challenge | Recap

New to the E-Learning Challenges?

The weekly e-learning challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.

194 Comments
Jen Edgerton
Jonathan Hill
Jeffrey Riley
Ron Katz
Nick Russell
Jodi Sansone
Nick Russell

I have always liked those hover and click interactions that highlight discrete countries/ states on a map. To make these you need a vector file with all the separate components. I already have one of a World map, but didn't have one for the states of USA. But I had a bit of luck. I downloaded a nice png file displaying the empty states of the USA in pastel shades. I then copied it into Photoshop and using the magic wand tool was able to erase the black boundary lines between the states. I then saved the file and loaded it into Illustrator where I was able to convert the image into a vector containing each state as a separate image. It took a little over 5 minutes. I've made a start on my challenge and you can click on Texas and the adjoining states. Very simple concept - but this map can h... Expand

Gunjan Bhattacharjee
Amy Palian
Tracy Carroll