Using iPhone GPS and Preview to Make Maps • Tutorial

Yesterday, I shared with you my recent mapping project showing all the trails we have blazed for hiking and cross-country skiing.

Pin It

What is especially unique about this map is the technique I used to create it. It might give you some ideas on news ways to create maps using your own equipment and software. I did use a lot of Apple products in creating this. I am working on Mac 10.6.8. David has 10.7 and these features are available on both. I expect similar solutions are available in the Windows world as well. I don't have a Windows computer so can't explore the possibilities. If you are a Windows user I have tried to provide enough information that you can research online for similar solutions in your world. If you find solutions, send them to me and I'll add an update here.

My map - which was a gift to David - was started by David without his knowledge. He was trying to locate the boundaries of our property. He knew his iPhone has a GPS and a camera so he experimented with that combination. He learned that photos taken with a smartphone with built in GPS (or a digital camera with GPS) have their location information attached to them and that can be used in Google Maps.

Here are the steps.

• Take a photo at a specific location you want on your map using your iPhone. David took photos at each corner of our property plus at all the major features, the bridge, the dam, trail intersections.
• Download them to your computer. We use iPhoto although these pictures were to get the location specifics, not to get a beautiful photo.
• Export the photos to your desktop.
• Open one in Preview (a Mac utility that comes free with a Mac). To do so, right click on the file icon and choose Open With, and then select Preview.
• In Preview go to the Tools Menu and down to Show Inspector (or press command-I)

• In the Inspector window click on the i tab (1) and the the GPS tab option (2). Note if your photo was taken on either a camera or phone without a GPS, that option will not appear.
• You will see the longitude and latitude coordinates displayed.
• Click on the Locate button (3). 

• Clicking on the Locate button will automatically open Google Maps in your browser.
• The coordinates of your photo location will be pasted in (1) and a green arrow will appear on the map at the location of the photograph. This all happens automatically!
• Copy the coordinates as shown in the field (1).
• Click on My Places button (2).

• Once in the My Places window, click on create map button (below).  
• You lose the coordinates at this point.(Which is why you copied them above.)

To Relocate the coordinates:

• Click in the coordinates field (1) and paste the coordinates you had copied previously.
• Click on the blue magnifying glass (2) and a green arrow will again show the location of your photo. (3)

• Place a permanent marker at the location of the green arrow.
• To do this click on the Marker Tool (1).
• Click on the green arrow to place a marker there. (2)

• A details box will appear and you can choose to add details or not.  If you have a lot of important marker points, it might help to define them.

• You have now placed the first mark.

Repeat, adding additional markers:

• Leave this file open, go back to Preview, open a second photo, go to its Inspector screen, click on locate and copy its coordinates.
• Click back in this first map and paste the coordinates into the field, click the magnify glass, get a new green arrow and place a blue marker pin on it.
• Continue to repeat until you have marked all the major points you need for your mapping project.
• Below is my map covered with meaningful blue markers.

Connect the dots:

• Select the line tool shown below.
• The Line Tool is tricky. It creates a line by your clicking in a variety of places.  It does not operate by click and drag. Click, move, click, move, etc. Also, you can't click right on your marker but you can click near it. You can adjust them after completing your line. If your curser is the pointing finger, you will not be able be able to click there. Just slide until it because the crosshair curser, then you can click. 
• It is better to add extra clicks because that gives you more freedom in adjustment.
• I outlined our property line first. Depends on the subject of your map if that will be your choice.
• Once your line is complete, you can click on it and white boxes appear.  You can slide these to more accurately place them.

• You can change the attributes of your lines as well.  Click on a line and the Line Box appears. Internet speed may affect how quickly you see this.
• The line square in the upper right corner connects to the line options.

• You can edit the color, width and opacity.  
• These lines are not the final lines of your map but will be used as guidelines in a page layout program.

• Continue adding lines and markers in the Google map until you reach the point where all important things have been located.
• Size your map to be as large as allowed on your screen and take a screen shot of the map.
• How you take a screen shot depends on your operating system and how you have set your keyboard shortcuts. On a Mac look in your System Preference under Keyboard and Keyboard Shortcuts.
• Mine is set for command-control-shift-4 key combination to provide cross hairs so I can take a photo of a portion of the screen I define. 
• Open your drawing program of choice and paste this image into it.  I use Pages from iWork.

• This photo of the Google Map will provide the accurate scale for my actual map. In the end, it will be deleted but for now serves as a guide.
• Using the line tools in Pages, I traced the bounderies and created the trails connecting major identified locations.

• I used the free-form line tool under Shapes to create my map lines.
• By clicking on the Inspector button, I brought up the Inspector palette which allowed me to alter the line attributes. It was here I could make lines dotted for trails.
• After I had traced all the important information from the Google map, I clicked on the map and deleted it. I was left with just the bones of my finished map.

Add details:

• Working in a separate Pages document I created details to add to the map.
• Using shapes I made simplified drawings of our home, garage and studio.  These are built out of shapes and have little detail because the final version will be small.
• I grouped the various parts of each image together.
• I copied these from the separate document and pasted them into the map.

• I added details including streams, roads, buildings, and a few trees.
• I worked a balance to try and keep the map full of detail yet still clear and easy to understand. Originally each trail was a different color. I thought it would be easier to follow but it was so confusing visually that it failed to work as a map.
• I added labels to the trails.
• At this point I played a lot with color combinations working for a balance between clarity and attractiveness.

When I was satisfied with the map, I sized it to fit, framed it, added a title and a legend.

Pin It

It was a fun project and the finished results have been enjoyed by many. I used to create maps by hand-sketching them. I much prefer using technology to help! If you try to create your own map send me a photo. I'd love to see it!

There are blogs dedicated to making maps.  If this type of DIY project is to your liking check out this blog as well: Making Maps: DIY Cartography

Previous Posts of Interest

• Handmade Maps - iPhone Assistance
• Map Origami
• Wallpapering With Maps
• Maps and Decoupage
• Do You Love Maps?
• Global Designs
• Map Pillows

This post has been shared at:

• DIY Showoff

©2012Ashbee Design, Marji Roy