Integrating Tracks in Your Web Using BT747's HTML

In an earlier article I explained how BT747's HTML output allows you to share tracks without uploading them to the web.

The Basic Steps

Of course, you can upload the html files generated by BT747 directly to the web, but Google Maps will complain that the key is invalid for that web site. In fact, by default BT747 does not integrate a key in the HTML file. You can 'instruct' BT747 to do so by creating a file called gmapkey.txt. The first line of that file must hold the Google Map key that is specific for the site that you will upload to. So the steps that you need to do are:

  1. Get a Google Maps key following instructions (also see forum entry .
  2. Put this key in the first line of a file called gmapkey.txt. In the second line you could write what the key is for. Personally I have several keys in my gmapkey.txt and I edit it according to my needs. You'll need to put gmapkey.txt in one of the following locations (searched in the same order):
    1. The directory where the output files are created.
    2. The output root directory. This is generally the same as the directory where the output files are created except when the output file prefix specifies a subdirectory
    3. The source directory. This is the directory where the source file (e.g., '.bin', '.csv') is located.
  3. Create the 'HTML' file or files
  4. Upload the files to your web space
  5. Enjoy!

The Benefits of This Method over Other Methods

It is true that a lot of other methods are already available to you. Google Map can reference uploaded KML and KMZ files directly, or you can upload them to Google Maps. Why should you bother using BT747's HTML output? Here is a list of benefits:

  • No special code insertion is needed. Usually you need to reference the Google Maps API in your HTML page which requires copying the code and setting it up correctly. While in itself that is not complicated, this does represent extra operations.
  • The BT747 html code is optimized and fast. First of all, the positions are encoded in a way that is interpreted very quickly by the Google API. This encoding is also quite effective. Secondly, the positions are 'labeled' in a way that will speed up showing the tracks at low zooms. For example, if your track holds 10000 points, and you are looking at the world, not more than a few hundred points will be used to show the track. These points were selected before hand by BT747. Other methods will use all points to show the track. That will take a lot of computing time and therefore be quite slow.
  • The generated HTML provides immediate access to the Google Map (of course), to the 'terrain map', the Open Street Map and the Cycle Map. The Open Street Map provides data in places where Google Map does not, and showing the track on OSM gives you an idea of what tracks still need to be mapped.
  • BT747 automaticly provides the search functionality (enter a lat/lon position, or a place name like a city), click functionality (a click on the map shows the current position), track enabling functionalilty (the end user can disable tracks).
  • All data is in the HTML file. The tracks are not shared with a server - they are used on the client computer only (to the best of my knowledge).

Way Points

Way points will be shown on the map too. Clicking on them will popup the GPS information related to the Way point. The way points can also be 'special way points' that you logged with the help of the mobile phone version of BT747 for example. It is also possible to show pictures in these popups - more about that in a future article. Currently manual editing of a CSV file is needed, but I'll automate this progressively in the future. Very shortly put, you need to export to CSV first, add a column called 'VOX', any non-empty entry in that column ending in jpg or png will be shown as a clickable image in the popup.

Embedding the Map in a Page

Referencing the HTML in a page on your site is very easy - just reference it with an 'iframe'. I did it on this site using the following code: <iframe src="/x/s.html" scrolling="no" width="100%" frameborder="0" height="400"></iframe> That will take up the available width (100%) and a height of 400 pixels. "/x/s.html" refers to the HTML file generated by BT747 and where it is located on this site. You can see that code in action here.



Thank you for this excellent walk through it was very easy to follow :) nathan