Geography 426 Lab 5: Interactive Choropleth Mapping

We are now in the second decade of the 21st century, and what does that mean for cartography? Well cartography is advancing just like the rest of the world. More often we look at maps on computer screens than we see them in books or magazines. Because so many maps are now being published on the web, cartographers can add an additional element to their maps: INTERACTIVITY. This means that the maps we now make are interactive and allow our map-reader to not only just read and touch, but to click and mouse over. Today in Geography 426, you will get your first hands on experience at creating an interactive map. We will use the same data from Lab 4, but I have narrowed it down to just the state of Michigan to make it a little more manageable.

1. Download all of the files from the course website for Lab 5 onto your jump drive In ArcMap

2. Open the mi_sea.mxd file in ArcMap. 3. Save three copies of this .mxd 4. Determine 3 classification methods, (it might be best to use the same ones you used for lab 4,

because you understand them the best). Feel free to choose something besides manual for your third choice.

5. Have each .mxd file saved with a different classification scheme 6. Remember to use ColorBrewer.org colors. 7. Add a legend for each map, (follow the same steps as you used in Lab 4)

Open Flash

8. Set your stage to 600 by 600 (Right click in the middle of the page to bring up the document properties)

In ArcMap

9. In your first Michigan map, select everything (map and legend) 10. Copy (ctrl+c)

In Flash

11. Paste your map in center of stage (ctrl+v) 12. You may have to toggle it around with the arrow keys to get it to the right spot on the stage

You will want to ungroup the map

13. Right click on it > “break apart” 14. You can delete the neatline 15. Create a new layer (the little page icon below the timeline)

Now we want to have two of our maps pasted directly on top of each other to do this:

16. Select all (ctrl +a) 17. Copy (ctrl +c) 18. Select the new layer 19. Paste in place onto the new layer (ctrl + shift + v) 20. Call the top layer “invisible buttons” 21. Lock the other layer (same concept as AI)

We want to make each of the enumeration units of our map into buttons, so that when we hover over each enumeration unit, our user can see information about that particular unit.

22. Right click on each of the enumeration units that make up Michigan and select “convert to symbol”.

23. The “Convert to Symbol” dialog box will appear

24. Give your new button a name, and remember select “button” as Type

25. Make sure you have a total of 18 buttons when you finish. You can check this by looking in your library panel (Window> Library)

Now we are going to create little boxes with information that will appear when our user mouses’ over each of these enumeration units In ArcMap

26. Open your attribute table 27. Use the “Selection” tool to

highlight individual units and their corresponding data in the attribute table.

We want the little box that appears in Flash to have information that allows our viewers to understand the underlying data, i.e. the data stored in the attribute table in ArcMap. You will need two things from the attribute table:

-­‐ The name of the unit (here it is Muskegon, MI)

-­‐ The rate of the variable you chose (I chose Breast Cancer, so here it is 27.15) As you are making your pop-ups in Flash you will probably just want to toggle back and forth between Flash and ArcMap to get all of the information you need from the attribute table. In Flash

28. Go to your library (Window > Library), it will now contain all of the new buttons you made 29. Double click on one of them which will take you to the button timeline

It will now allow you to edit that button

30. In the button timeline there are four frames: “up”, “over”, “down”, and “hit” a. Up is the usual button state, when the user

isn’t doing anything to it b. Over is what the button will look like when

the user is hovering over the button c. Down is what the button will look like when

the user is in the action of clicking down on the button

d. Hit allows the developer to designate where the button is clickable. Sometimes you might want your hit area to be a bit larger than your actual button symbol. For instance, if your button is really small. We will come back to “hit” in a little bit

31. In the “over” frame right click and select “insert frame” Let’s add a new layer for our popup information

32. Click the add new layer button: 33. Name the new layer, “pop-up” 34. Name the original layer, “unit” or something like that

Now we want to make our button do something on that over state of our button

35. Right click on the frame beneath the word “over” in our “pop-up” layer and select “insert Keyframe”

Now we will design a little box to appear with the information we want to share with our users

36. Use the drawing tools to create a pop-up for the unit you are working on. They are similar to AI, but in Flash strokes and fills are separate, so often it is easier to just use one or the other. I suggest just using a fill and the type tools, but feel free to go crazy and test out these tools.

Currently, we have two copies of our map; we want the one copy to be just a button layer, with invisible buttons. So how can we make invisible buttons? We have to make all of the frames for the “unit” layer empty except for the “Hit” state.

37. Grab the first frame of the “unit” layer with your mouse and move it over the “hit” frame.

Now we want to test out our movie. We only have one roll over, but that’s okay, let’s just make sure it works. To test our movie, click ctrl+enter. Now roll over the unit for which you just made the button and you should see something like this:

38. Repeat steps 27- 37 so that each of the 18 units behaves the same as the button you just created.

39. To get back to the main timeline where you created the buttons, click on “scene 1”.

Now that you have created all of your invisible buttons, you now have to add your other Michigan maps. We will put these maps on different layers than the map that you have already placed.

40. Add 2 more layers, call them map2 and map3, just to keep it simple In ArcMap

41. Select your second map, legend included and copy (ctrl +c)

In Flash 42. On the layer “map2” select the first frame 43. With that new key frame selected, paste (ctrl +v) 44. You will now have to toggle it around (arrow keys) to match the other map exactly.

To allow your legend to match up as well,

45. Right click on the new map > “break apart” (hint: lock all of your other layers) 46. You can delete the neatline (you wont need a neatline for this assignment) 47. Repeat steps 41-46 to add your final map to Flash

Right now the top layer is now hiding all of the other layers, however, we want each map to show at a different time. Now here comes in the timeline. We want to put each of our maps on different frames within the timeline so that they show at different times. This is really simple:

48. Just like we did for the buttons, click and hold on the keyframe for map3 and drag it to frame 3 on the timeline.

49. Drag map 2 to frame 2 on the timeline. We want our invisible buttons to be on the timeline the entire time so that no matter which map is showing, our pop-ups show up to give our user an idea of the underlying data.

50. Make sure the “invisible buttons” layer is on top (click and drag it to the top if it isn’t there already)

51. Click on frame 3 in the “invisible button” layer 52. Right click and select “insert frame” 53. Now our timeline should look like this:

We scrub the timeline, by grabbing the playhead (the red rectangle above the timeline) and dragging it along the timeline. When we stop on each of the frames, it should show us just one of our maps. Now we have to set it up so that our user can click between these maps. At this point you might want to test your movie again (ctrl+enter) just to see what happens…You will notice just a bunch of flashing maps. We want to be able to stop at each map, to read it and then move on to the next map, when we click a button. First let’s make our buttons. Remember a button can look like anything, so feel free to play with the drawing tools in Flash or go to Illustrator and design your own buttons.

54. Right click on each of them and make them a button, just like you did with the invisible buttons.

55. Feel free to make an over, down, and hit state for your buttons, if you would like.

Now to make these buttons work, we have to give them instance names.

56. Select the button 57. And give it an instance name in the properties panel 58. Give each button a different instance name. Its best to keep them

simple (I used “map1_btn”, “map2_btn” and “map3_btn”) To make it really easy to write our code, lets add frame labels to our frames.

59. Add a new layer called “labels” 60. Select frames, 1-3 in the labels layer 61. Right click and select “convert to keyframes”

62. Individually select each frame in the labels layer and give it a name, perhaps “map1” would be a good choice (hint: it’s in the properties panel)  

Now lets write our code:

63. Create a new layer called “actions” 64. Select the first frame in the “actions” layer 65. Open your actions panel (window> actions) 66. Add this code (I have included a .txt file with this code, copy and paste it from the .txt file or re-

type it, don’t copy and paste from this document, often there is hidden formatting that will come in with your code if you just copy and paste from the PDF):

stop(); map1_btn.addEventListener(MouseEvent.CLICK, map1); function map1(evt:MouseEvent):void { gotoAndStop("map1"); } map2_btn.addEventListener(MouseEvent.CLICK, map2); function map2 (evt:MouseEvent):void { gotoAndStop("map2"); } map3_btn.addEventListener(MouseEvent.CLICK, map3); function map3(evt:MouseEvent):void { gotoAndStop("map3"); } In the code above “map1_btn” refers to the instance name of your button. Following MouseEvent.CLICK, the map1 is the function we are defining to go to the frame called “map1”. The “map1” in quotes is telling the function to go to the frame we called “map1”. If you named your buttons or frames differently than I did, you will have to change this code to match the names of your buttons.

Let’s test our movie just one last time (ctrl+enter). Congrats! You just created your very own interactive map! This week, I am not going to require that you place this on your website. I will give you further directions next week on how to upload your final product to the web. Please send me your .fla file (stevensj2@gmail.com).

Grading Criteria (10 points): 1. There is no flickering or flashing within your animation 2. Everything is labeled correctly and data is correct on mouse-overs 3. Everything is lined up, i.e. the map does not jump when you switch between maps. 4. All buttons work 5. There are three maps, mouse over’s work on all three 6. Legends on all maps 7. All pop-ups show correctly, they fit on the stage, and are not covered by any other map elements 8. Good overall design 9. Everything is on the stage, no pop-ups go off the stage 10. Titles explain what the map is of and the classification scheme used