Interactive maps

I want to make an interaction which consists of a map of my city, marked with pins of certain businesses. People click on the pins to see the name and contact details of the businesses. (Like you get in Google maps, except that we want it to show the businesses who have done our training, so our customers know who they can rely on to be knowledgeable). Now obviously the pins bit is easy. The map could go in a scrolling panel. You could zoom in on sections by jumping to a layer which immediately started a zoom.

Has anyone done this before? Did it work well?

The main problem I foresee is how do I get a map for which I own the rights to use it?

10 Replies
Allan Dunlop

That's a fantastic example of what I'm looking to create.

Does anyone have the scoop on how to build something like this? I've spent eons researching interactive map-making software, trying to find appropriate graphics, etc.

I'm wondering if there's some way to avoid having to outline every state...

Thanks in advance for any help you can provide.

Allan

Michael Hinze

Allan Dunlop said:

That's a fantastic example of what I'm looking to create.

Does anyone have the scoop on how to build something like this? I've spent eons researching interactive map-making software, trying to find appropriate graphics, etc.

I'm wondering if there's some way to avoid having to outline every state...

Thanks in advance for any help you can provide.

Allan

Mike Taylor just posted this link to free vector maps: https://www.freevectormaps.com/?utm_content=buffer3395e&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer
Kevin Thorn

Hey Allan,

I actually built that for my then step-daughter who was in middle school struggling with memorizing all the states and their capitols.

The heavy lifting in this design is not so much Storyline as it is all of the irregular shapes of the U.S. States, hotspots, plus the normal, hover & selected states. Thats a LOT of PNGs at 150 (normal, hover, visited) for the whole project. Not counting the main map and any additional graphics.

The conditional triggering and variable programming is a bit complex to keep track of all 50 states and the scoring. One could strip out the scoring component and just use it as an interactive informational map.

(I received your message and will reply there)

Kevin Thorn

Also, to Flora's question, Michael's shared link along with various other graphic sites offer free vectors of maps. Microsoft Clipart library even has a nice selection of U.S States, and most countries. 

If you're needing something more specific to your city (streets and buildings) you may have a hard time finding exactly what you need. Depending on if you have a budget you could hire a graphic artist from places like oDesk or Behance for minimal cost.

Or create the shapes in PPT and export. Not fully understanding the scope of your design you may only need a conceptual map of your city which basic shapes could suffice.

Allan Dunlop

oNotRelyOnCSS />

Normal 0 false false false oNotPromoteQF /> EN-US X-NONE X-NONE ontGrowAutofit /> ontFlipMirrorIndents /> MicrosoftInternetExplorer4

It's really a clever interactive, Kevin. Very nice. Your step-daughter must have been impressed!

Right now I'm using the USA map from this site: http://www.presentationmagazine.com/editable-maps/page/2.

I've created a base image of the whole map, and am creating a separate layer for each state tied to a trigger. The challenge is that the individual state graphic needs to be sized and positioned to match the equivalent on the base image. It's a tedious process, and if I change the size of the base, I'll need to resize the images in every layer. (Is there a better way to do this?)

I'm working on the hotspots now, and should be done sometime in early 2016.

Fiona, your request was made a long time ago, so I'm sure you've found something in the interim. Maps of a country and state level can be found, but open-source (or even purchasable) city-level maps are hard to come by.

Allan

P.S. Please excuse the excess characters. That's what I get for saving a draft in Outlook.

Kevin Thorn

Believe it or not, my step-daughter is the voice for the "how to" narration before I had a decent mic. 

Early 2016 seems about right. Graphics alone on a project like this is more than half the effort. I used freeform hotspots over ever state due to the bounding boxes of U.S. States as object shapes. It's a lot of fiddling here, meddling there, and a pinch of nudging to get all the pieces to fit just right let alone get their hover states to behave.

Only advice I can share from a Storyline perspective is "focus on function first." Get one state working from a user's A-Z path forward and backward. Once that's in place, use that as your model. The rest is busy work.

Good luck!

Anthony Hearns

Kevin,

I could really use your help regarding the US map the you designed for your daughter.  So I have a US map that allows me group/ungroup each state. Well, that is as long as I'm using PowerPoint. Which begins my challenge.  When I import the map, it converts to an image, being that they are not common shapes to Storyline.  However, I noticed you were able to have each of your shapes function as individual shapes.  PLEASE don't tell me you imported each one at a time?  So, my ASK: Will you please share with me how you did it?  An easier WIN-WIN, I can just pay you to use the file that you have already created. COULD REALLY USE THE HELP