Wednesday, April 8, 2009

How to Create a course map with MyTopo background

Ok, After making the map I need to get down the steps that I took to make the map with the mytopo overlay so that next time I don't have to figure out how to do everything again (I was up pretty late last night).

  1. Make the map in Google Earth. Create a folder in myplaces.kml add the checkpoints, then add the routes as paths. Remember you can hold down L. mouse button to just draw a path instead of clicking point to point.
  2. To get the lengths of the paths (you can't just get it from the properties of the track or anywhere in GE) use the super duper length getting tool at E.M.A GE Tools . To use it; in GE highlight the track, right click, select copy, then go to the length tool thingy and paste in the box. click calculate and whammo you get the length. It is in km so convert it to miles.
  3. Edit the descriptions of the tracks to show mileage in GE.
  4. Save the folder as a .kml file on the hard drive.
  5. Go to www.GPSVisualizer.com, set the parameters for the map (Choose Full Screen Mode and initial map type as MyTopo.com). Then in the input file boxes browse to and upload the saved .kml file, then draw the map
  6. Now is where it gets a bit dicey. After it draws the map, use the link to save a copy to the hard drive (just the html, not complete web page or anything). Name it something better then the default random number file name assigned
  7. Now you have to edit the html code to insert your Google Maps API key, so open the html file in notepad or wordpad. Scroll down to where the GPSVisualizer guy says to insert your API key and place it between the quotes. The API for my web space is ABQIAAAA8oz96BYc9hjnVqzo6ONlsBQSWU31P9IJypDiPbpk_Swiys_4VRRNXJ5MZHj7MxOyFORb973D1c6a0w I know no one cares what my API key is but like I said it is so I can find it
  8. While you are altering the html file you can change things like the zoom level and the center of the map by altering some of the values under // basic map parameters:
  9. Upload the altered html file to the web server
  10. Log into Blogger and create a post. go to Edit Html and insert code for an iframe. Not like I really know what an iframe is, so I just copied the code that google maps uses when you embed a map into a website. You can also google iframe and copy some code or the guy at GPSVisualizer.com has put something in his FAQ on it. Important thing about the iframe code is to insert the URL where you put map between the quotes in the src="http://". Here is a copy of the code I use
<iframe marginheight="0" marginwidth="0" src="http://YourURLHere.com" frameborder="0" height="480" scrolling="no" width="640"></iframe><small><a href="http://YourURLHere.com" style="color: rgb(255, 255, 0); text-align: left;">View Larger Map</a></small>


11. Post the blog and you are done. Now I know that if anyone other than me tries to use my tutorial it probably won't work. In fact in a month or so when I need to do another one I probably won't be able to follow my own work but oh well.

No comments:

Post a Comment