Author Topic: Google Maps and Topofusion  (Read 7152 times)

jimbowilly

  • Jr. Member
  • **
  • Posts: 24
    • View Profile
Google Maps and Topofusion
« on: December 26, 2010, 09:03:11 AM »
Here is a step by step demo of how to use Topofusion to create a interactive Google map with the GPX track for displaying on the web.

This assumes:
1) You know how to use Topofusion.
2) You know how to create websites using HTML and how to send the files to a web server.
3) You recognize JavaScript. You don't need to know JavaScript, but just the ability to know what it is within the HTML. You also will be making changes within the JavaScript.

We'll be doing this in Google Maps V3. For reference, the complete rundown can be found here. http://code.google.com/apis/maps/documentation/javascript/basics.html but you don't need this just yet.

Let's get started with the Google maps version of "Hello World" from the Google site. Open this link: http://code.google.com/apis/maps/documentation/javascript/tutorial.html#HelloWorld

Now create a new web page in you favorite html editor. I use Notepad.

1) Copy and paste the sample code (from below or the google link) into blank website.  
2) On line 11, change where it says sensor=set_to_true_or_false to sensor=false. (This isn't necessary if you used the code from below).
3) Save this file as mapv3.html
4) Upload it to you web server.
5) Open in a browser. It should show a map of Sydney Australia, like it does here. http://code.google.com/apis/maps/documentation/javascript/examples/map-simple.html

If it doesn't work, check your code. It should look like this:

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>


To know what's going on here, read through the Google website where we grabbed this code. But we'll just keep making changes to what we have.

Instead of Sydney, let's make a map of an area we want to see. In the website we're creating, change the latitude and longitude (line 15) to an area with which you're familiar or follow me. I'm changing it to 33.5782 and -112.0389, which will show the Phoenix Mountain Preserve in Arizona.
I also want to have it zoomed in some more, so I will change the zoom level on line 17 from 8 to 14. Smaller numbers zoom out, larger numbers zoom in.

Make these changes, and upload to the web server. Your map should now look similar to the first attachment below which is showing the lat/long I used. This is using Firefox and the image below has the buttons on the right cropped off.

So now let's shrink the map up some, add a heading and change the map to a terrain view.

1) on line 19, change ROADMAP to TERRAIN
2) on or around line 29 that reads id="map_canvas" style="width:100%; height:100%">, change both percentages to 50%
3) right after the body tag, add a descriptive H1 heading.

My code now looks like this:

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(33.5782, -112.0389);
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
    
  }

</script>
</head>
<body onload="initialize()">
<h1>Map of Phoenix Mountain Preserve</h1>
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>

And your map web page should look something the second attachment.

Now lets add a track. This is easily done using a KML file.

Open Topofusion and load a gpx track you want to display. Right click on it in the active maps window and Save As a KML file. Take this KML file and upload it to your web server.

Now, within your HTML add the following two lines on or about line 24. They should be right after the line that reads   myOptions); in my example above:

Code: [Select]
var kmlfile = new google.maps.KmlLayer('http://(your domain)/(your kml file)');
   kmlfile.setMap(map);

You need to replace (your domain) with your domain, and (your kmlfile) with your full kml file name. The file names on some web servers are case sensitive. If you're not sure, make the file names match exactly.


Save the file and upload it. You should see your gpx track mapped in the google map. Mine looks like the third attachment

The code looks like this (after wiping out my domain name, too much non-working stuff there I would rather not share at this point   ;D  ":

Code: [Select]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {
    var latlng = new google.maps.LatLng(33.5782, -112.0389);
    var myOptions = {
      zoom: 14,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  
  var kmlfile = new google.maps.KmlLayer('http://www.xxxxxxxxxxxxxxxxx.org/2010-12-12T100map.kml');
   kmlfile.setMap(map);
    
}

</script>
</head>
<body onload="initialize()">
<h1>Map of Phoenix Mountain Preserve</h1>
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>


That's all for now. Later I will show how to add a topo option to the map selector. I did my original work with Google maps V2. They have made some significant changes in v3, so I have to do some more research.  
« Last Edit: December 28, 2010, 06:18:42 AM by jimbowilly »

jimbowilly

  • Jr. Member
  • **
  • Posts: 24
    • View Profile
Adding topo capability
« Reply #1 on: December 28, 2010, 07:22:58 AM »
Adding to the web page from the original post, I'll now include the ability to have an option for topo maps.

First, the four basic Google map types do not include an option for topo, so you need to create a new map type. This is done with the following code snippet:

Code: [Select]
var mytopo_var = new google.maps.ImageMapType({
      getTileUrl: function(ll, z) {
        return "http://maps.mytopo.com/mytopoK55Zc3L/tilecache.py/1.0.0/topoG/" + z + "/" + ll.x + "/" + ll.y + ".jpg";
      },
     tileSize: new google.maps.Size(256, 256),
     isPng: true,
     maxZoom: 15,
minZoom: 9,
     name: "MyTopo",
     alt: "Detailed topographic maps"
    });

This is inserted just below the line that says   function initialize() { . I found this at mytopo.com here http://www.mytopo.com/google/index.cfm and I pulled it from the example.

Next, you need to set the new map type, as the default map type. Insert this piece of code
Code: [Select]
map.mapTypes.set('mytopo_id', mytopo_var); just above the line that reads var kmlfile = new google.maps.KmlLayer .......



The last thing needed is to add the button to select topo as an option. This is done with the following code snippet inserted in the code replacing the current line  mapTypeId: google.maps.MapTypeId.TERRAIN

Code: [Select]
mapTypeId: 'mytopo_id',
      mapTypeControlOptions: {
      mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, 'mytopo_id'] }

 
The entire html file now should look like this:


Code: [Select]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
  function initialize() {

var mytopo_var = new google.maps.ImageMapType({
      getTileUrl: function(ll, z) {
        return "http://maps.mytopo.com/mytopoK55Zc3L/tilecache.py/1.0.0/topoG/" + z + "/" + ll.x + "/" + ll.y + ".jpg";
      },
     tileSize: new google.maps.Size(256, 256),
     isPng: true,
     maxZoom: 15,
minZoom: 9,
     name: "MyTopo",
     alt: "Detailed topographic maps"
    });

    var latlng = new google.maps.LatLng(33.5782, -112.0389);
    var myOptions = {
      zoom: 14,
      center: latlng,
mapTypeId: 'mytopo_id',
      mapTypeControlOptions: {
      mapTypeIds: [ google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, 'mytopo_id'] }
    };


    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
   
map.mapTypes.set('mytopo_id', mytopo_var);


  var kmlfile = new google.maps.KmlLayer('http://www.xxxxxxxxxxxxxxxxx.org/2010-12-12T100map.kml');
   kmlfile.setMap(map);
   
}

</script>
</head>
<body onload="initialize()">
<h1>Map of Phoenix Mountain Preserve</h1>
<div id="map_canvas" style="width:50%; height:50%"></div>
</body>
</html>


The map page now looks like the image below.

Any questions or anything that's unclear, please post.

derelict

  • Full Member
  • ***
  • Posts: 31
    • View Profile
Re: Google Maps and Topofusion
« Reply #2 on: January 21, 2011, 11:01:53 AM »
Wow... this is a *really* cool tutorial!!!  I'm looking forward to trying on my website.
Thank you very much...

ScottMorris

  • Administrator
  • Sr. Member
  • *****
  • Posts: 2704
  • TopoFusion Author
    • View Profile
    • http://www.topofusion.com/diary
Re: Google Maps and Topofusion
« Reply #3 on: January 21, 2011, 09:25:28 PM »
Yes, I want to thank you for putting together this very handy tutorial.  I have sent a few people this way already.

Good work.
Scott Morris - founder and co-author of TopoFusion
email: smorris@topofusion.com

jimbowilly

  • Jr. Member
  • **
  • Posts: 24
    • View Profile
Re: Google Maps and Topofusion
« Reply #4 on: January 22, 2011, 03:43:43 PM »
Cool. Glad you guys find it useful. Please let me know if anything is unclear or if you have any questions.