iMaps

This set of procedures augments those I wrote for the AppleWorks User Group (AWUG) journal in an article entitled: How to Create Customized Maps with AppleWorks.

Perhaps you have scouted out a new route--a new running route. After you have established it as part of your training repertoire, you might want to share it with others.

Description: How to create a Website route map (i.e. running, biking, hiking...) with photos and downloadable PDF .

Estimated time: 4 hours/route

Applications and tools recommended:

· Light camera (no flash needed)· Internet connection· Drawing application (AppleWorks’ drawing application is what I use)· Website design application (DreamWeaver, PageMill, etc. You can also hand code if you know HTML, however this will prove tedious)· Web storage space (at least 10 Mb, but preferably more. I use Apple’s iDisk that allows up to 100 Mb storage)

1. Take a light camera along with you. I use a flashless re-useable Walgreens special that takes 27 shots. Don’t worry about the quality too much, you will only be using thumbnail photos. Request the CD-ROM output when you get your photos developed.

2. As you retrace your route, take shots of conspicuous landmarks or problem spots where a photo might clarify the direction you propose.

3. Get map squares from MapQuest, YahooMaps, USGS, etc. and download these to folder with name of run. If you click on the map while holding down the apple key you can save the map file to your new desktop folder. To get the next map, navigate to the adjacent map square and repeat. You will assemble these map squares into a cogent map next.

Preparing map squares

4. Open drawing application ( i.e. AppleWorks drawing document)

5. Adjust document size to accommodate maps: Format/Document/Size (for example, 4-pages across; 4-pages down)

6. Turn Autogrid option off (so you can nudge your map squares to the exact position using mouse click-and-drag and arrow keys): Options/Turn Autogrid off

7. Import maps: There’s two ways to go: 1) File/Insert.... Then set the import file type drop-down list to “all files” so that AppleWorks will recognize your map GIF files. Unfortunately, if you go this route, you’ll have to reset the file-recognition settings with each map file you import. 2) A faster option: AppleWorks allows you to drop-n-drag photo files into your map document for positioning.

8. Use reference points on map to overlap adjacent maps so streets line up as you join the maps together. For example, spot a prominent cross street on your target map, then place your pointer over similar cross street on the map you wish to place and drag this piece until your pointer lies over the point spotted. (See Map Placing figure)

9. Check to be sure all map squares are placed so that there are no skewed roads at the borders. (see Maps Alignment figure)

10. If your map squares show an unwanted frame, you will have to select each one and apply the following process: select the “boarder” tool (2nd from bottom of the drawing toolbar) and select the checkered box and the two interlocked rectangles from the pop-up menu pad.

11. Now would be a good time to ‘select all’ your map squares as laid out, so they hang together and don’t budge as you proceed to add another layer of features.

Drawing route and adding information features

12. Draw trail route using line tools. Set the line thickness so you can see it easily. In AppleWorks, I make a 3 pt.-width line. I recommend breaking up your path into multiple, short contiguous lines.

13. If you wish, you can select path segments and change the line color. I prefer to make roadside paths black; trail paths I prefer dark green. Be sure to include this information in a map legend.

14. Add text box comments about important points along your route. For example, you can indicate land-mark features to look out for to gain access to a trailhead (See Map Comments figure)

15. If you are doing a running route, be sure to show the mileage along the route. You can achieve pretty good accuracy by building a line along one of the maps original 1000 ft. scale markers and expanding this line using the ‘Arrange/Scale by Percent feature’ to produce a mile scale marker (hint: 400% of 1000ft + 123% of 1000 ft = 5230ft ). Now get a piece of string or thread and mark the scale mile distance on it so you have a flexible measure that you can overlay along your route contour to determine the milestone placements.

16. Make a route title and legend for your title page (See Title Page figure).

17. Now is the time to draw page-size rectangular frames over your map that serve to dictate the area your Web user will see in the detailed, linked maps. The rectangle shape tool must be set up for line mode; not surface mode, so you can see the maps within (see step 11). Some overlapping of the boundary areas of your rectangles is good. Make the rectangle frames the same size as a standard 8”X11.5” page (if you wish you can make them bigger or smaller, but always maintain the decimal ratio is about 0.77). If your map runs side-ways, use landscape rectangles (See Zoom Rectangles figure)

Saving map files as page-size elements

Save your map as a Photoshop file so that you can open it in a photo application such as Adobe Elements where you will resize and save your ‘overview’ map as a JPEG file:

18. Open your complete map file in photo application (such as Photoshop Elements for this example).

19. Resize the map image to about 12 inches in width (while maintaining the length proportion): ‘Image/Resize/Image Size’

20. Save for Web by choosing a medium quality jpeg output.

21. Name this new file as your overview file (See Overview figure).

Set photo-shot Icons on your map

Return to your original map project in AppleWorks. Its time to label the spots where your photos were taken.

22. Get hold of a 72 dpi icon that looks like a camera. You will use it to mark the places along your route where you provide a link to a photo (the one I use may look familiar to you as that used by eBay).

23. Resave your AppleWorks overview-map with photo icons as a PhotoShop file so you can work on it in that photo application or something similar (See Overview with Photos figure).

Prepare cropped JPEG images

Create cropped JPEG images of your latest overview map with photo icons so that you have a series of page-sized panoramas of your overview map:

24. Crop your map according to the rectangular frames you drew on your overview map.

25. Apply navigation arrows: using the ‘Custom Shapes’ tool (it’s the 3rd item down on the left side of my Adobe Elements toolbar), select the arrow shape. Place an arrow at the extremities of your document that will serve as navigation links to the adjacent page.

26. Apply another icon from among those available in your ‘Custom Shapes’ menu that will serve as a link marker so the user can download a PDF of the page. (I used a figure that looks like a stack of papers because when you print out a PDF, you get a stack of papers.)

Now save this piece of your overview document as a page-size JPEG of medium quality.

27. Repeat steps 1 through 4 for each rectangular section of your overview map.

Prepare thumbnail photos

28. Now is the time to install your photo CD-ROM and save the thumbnail shots to a desktop folder.

29. You may want to reduce the size of your digital photos to about 400 pixels in length, keeping the height proportional. Although this is small, it will decrease the load time for your online viewers with dial-up modems. Moreover, you will need to use these small photos on your final PDF documents because they won’t take up too much real estate your route map.

30. Save these photo files for the web as medium quality jpegs of. Name your photos by number from the first to last so you can easily determine the sequence of your photos along the route.

Prepare PDFs

31. Reopen your original AppleWorks overview map document. Place the thumbnail photos along the route where they belong. Make sure they are within the boundaries of superimposed page-sized rectangles: these are going to be the PDF boundaries. You may want to draw a line from the photo to the route spot so the viewers will know exactly where each photo belongs (See PDF Map with Photos figure).

32. Save this latest document again as a PhotoShop file.

33. Open this file in your photo application.

34. Once again, crop each rectangular section of your route overview document (with photos). This time use the ‘Save As’ option to save these sections as PDFs (you won’t need to provide navigation icons on these PDFs) using a simple numbering scheme to name each one.

Assemble files into a Web site document

35. Gather together all your graphic files, excluding any AppleWorks files, into a new file named for your project.

36. Open a new HTML file with your application. Place your page-size JPEG sections of your route into separate HTML files and save them with a logical name within the folder you just created.

37. Use your application’s link-making tools to super-impose link “hot spots” over each of the navigation arrows and link them to the appropriate HTML page you created in step 2, so when the user clicks on them, they are presented the adjacent map section. Be sure to make the link open in a separate window--not within the original window. Do this for each of the route section JPEGs.

38. Make a hot spot on page one’s PDF icon and link this to page one of the PDFs you created. If you happen to own a copy of Acrobat, you might want to insert the subsequent PDF pages into the first PDF. This allows the user to download the entire set of PDF map sections with one click. Otherwise, you will have to place a PDF icon in each page and link them separately.

39. Begin to place ‘hot spots’ over each photo icon and link to corresponding photo (See Hot Spots figure).

40. Make ‘hot spots’ over each of the rectangular areas of the over-view master page and link them to each of the section HTML document. Save this HTML document outside the folder--it will serve as the home page.

41. Congratulations! You have assembled a killer map resource for you and your peers. Of course, you will want to check your results by dragging the home page HTML document into your browser icon and testing your links. (For an online sample of my completed iMap, entitled “Antony’s San Jose Runs,” visit web URL: http://homepage.mac.com/awnispel3/SanJoseRuns.html)