Thursday, December 20, 2012

Create an Interactive Map in iBooks

Along with our Director of Admissions I have been working on an iBook guide for our school. One thing she asked me to do was incorporate a virtual tour of the campus.  I told her that I didn't know how to do that, I thought it was beyond my ability level (after all, I'm no programmer, those people are like wizards to me). She wouldn't let it go so I spent some time trying to figure it out.

"Some time" became days and then almost a whole week.

Here's what I managed to do:

Here's how to do it:  

Step 1 - Use the 360 Panorama app to create your panoramic photos. You will create an account and you need to upload your photos within the app so that they can be viewed online. (Tip: I "mounted" my iPhone with the app onto a tripod to take my photos.  They turned out a lot better than when I just held my iPhone and turned in a circle.) You will need to retrieve the URL of the panoramic photo you just uploaded.

Step 2 - Go to and look for the 360 Panorama widget.  (Bookry is so awesome, I can't say enough about the amazing tools available for creating your iBooks.) You will fill out some info including the URL of your uploaded panorama. You will also need to upload the image for your widget.  This is where I added our "Don" logo that you could see all over the map.   

Don logos on map
After this you will be able to export a widget. If you are going to use multiple panoramas you'll have to do this multiple times.

Step 3 - Add your widget to your iBook.  Using iBooks Author I made a page and added a map of our campus. I then dragged and dropped the widgets onto the map.  One thing important to know during this process is that you can use ctrl-click (right-click, two-finger-click) to bring up the options "Send to Back" and "Bring to Front."  I had to play with this a little to make sure my widgets were on top of the map and not underneath it.

Step 4 - Adjust your widgets.  Its easy enough to put the widget on the map where you want them.  However, I struggled with making the logos as small as I wanted them to be.  There seems to be a limit to how small you can make the widget on the page. You can select the widget and drag the white boxes and make it as small as possible.  But I wanted it smaller so I used the Inspector to turn off the Title, Caption, and Background.  Then I increased the margin.  Increasing the margin shrunk the logo even more. 

Inspector widget settings

This finally made the logo look that way I wanted it to.

Step 5 - Publish and enjoy! 

That's it.  I think I included all of the steps. If you have a problem or questions or a suggestion I'd love to hear it.

I hope this is helpful.  If you use this process to make something I'd love to see it.  Please share!

No comments:

Post a Comment