Interactive US state map

Hello -

I'm looking for a map of the US that I can manipulate the "states" of each state. Does anyone have a map of the US that is a bunch of state graphics all grouped together appropriately?

I have one in PPT but its cumbersome when bringing into Storyline. Figuring someone has invented this wheel already.

Thanks in advance!

Linda

13 Replies
Ashley Terwilliger

Hi Linda, 

Great question and I don't know of many within Storyline right now, but there is a template within Articulate 360 that has just that! You didn't mention which version of Storyline you're using, but if you're a Storyline 360 subscribed it's a part of the  Velocity template:

As you can see in this second image, each state is it's own icon/object: 

If you're using another earlier version of Storyline, let us know and perhaps some folks in the community have some additional examples to share! 

Kevin Thorn

Hi Linda,

Ashley makes a good point about the new map template in SL3.

If you're using SL1 or SL2, I created a map using a vector map and then saving out each state as its own PNG file. For each state's "object state" color (hover, selected, etc.) I saved out an additional set of PNG files. For instance, for Normal, Hover, and Selected for each US state you'd have 150 image files.

The user experience however is not quite precise with PNG files because the active area is within the four corners of the overall shape. So you may hover over one US state yet a neighboring US state will change.

To overcome, place all the individual image files together to form the map. Then using the freeform hotspot, trace over each US state. The downside is needing  trigger to physically change the object to hover or other object state when clicking on or hovering over the hotspot. The upside is a precise mouse control.  

Here's one I did in SL1 a few years back. It was built using image files and not the hotspot technique I mentioned above. If you mouse over some edges of states, neighboring states will change.

US Capitol's Quiz: http://articulate.demos.s3.amazonaws.com/us_capitols/story.html

I've rebuilt this in SL2 with hotspots but haven't quite finished. I'll probably finish at some point and then upgrade to SL3.

Back to the actual artwork. There are many sites like Creative Market that have various US Map graphics among other graphic resources if you want to build one from scratch. The challenge is finding the right map with the right colors. If you have Adobe Illustrator, the attached zip file has the vector map of the image below. Hope this all helps!

Kevin Thorn

Hi Linda,

The map image above should work and then just add freeform hotspots on top of the graphic. That's a quick solution if you need to build it now.

Be happy to package on up for you, but it may be a few days as I'm up against a tight deadline this week. 

Few questions:

  • What color does your map need to be?
  • Do you need hover object states or just selected object states?
  • What color do you want the selected state to be?

 

linda vetter

Hi there, Kevin,

That map is exactly what I need/want. The color is even right. I just want to be able to put a "state" on each of the states - so I can have some of them a different color (darker green) and then put a hotspot on them (so I can open a layer when the user clicks).

However, I don't have illustrator. If that map could be put in SL2 (as a bunch of different images), I could do the rest in SL.

Linda