CINXE.COM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>GPS Visualizer: Tutorial: Building Waypoint Files by Hand</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> <link rel="stylesheet" href="/gpsv.css" type="text/css" /> <script type="text/javascript" src="/gpsv.js"></script> <script type="text/javascript" src="/ads-page-ad.js?adunitid=ad"></script> <script src="https://the.gatekeeperconsent.com/cmp.min.js" data-cfasync="false"></script> <script async src="//www.ezojs.com/ezoic/sa.min.js"></script> <script> ezstandalone = window.ezstandalone || {}; ezstandalone.cmd = ezstandalone.cmd || []; ezstandalone.cmd.push(function(){ ezstandalone.enableConsent(); ezstandalone.define(103,104,105); ezstandalone.enable(); ezstandalone.display(); }); </script> <meta name="ezoic" content="block-npa" /> <script async src="https://www.googletagmanager.com/gtag/js?id=G-ME227XBLB8"></script> <script> /* Google Analytics */ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-ME227XBLB8'); </script> <link rel="shortcut icon" href="/favicon.png" /> <link rel="icon" sizes="144x144" href="/images/g-144x144.png" /> <meta name="theme-color" content="#0D4E0D" /> </head> <body style="margin:0px;" > <div class="nonmobile_masthead" style="width:100%; background-color:#0d4e0d; padding:0px; color:#ffffff;"> <table cellspacing="0" cellpadding="0" border="0" style="background-color:#0d4e0d;"> <tr align="left" valign="middle"> <td style="padding-right:10px;"><a href="/"><img src="/images/gpsvisualizer_465x74.png" alt="GPS Visualizer" width="465" height="74" border="0" /></a></td> <td style="padding-right:15px;"> <table cellspacing="0" cellpadding="0" border="0"> <tr valign="top"> <td class="header_link" style="padding-left:9px; padding-right:6px;" nowrap> <p><a href="/map_input" style="text-transform:uppercase">Make a map</a></p> <p>- <a href="/map_input?form=leaflet">Leaflet</a>/<a href="/map_input?form=google">Google</a></p> <p>- <a href="/map_input?form=googleearth">Google Earth</a></p> <p>- <a href="/map_input?form=jpg">JPG</a>/<a href="/map_input?form=png">PNG</a>/<a href="/map_input?form=svg">SVG</a></p> </td> <td class="header_link" style="padding-left:9px; padding-right:6px;" nowrap> <p><a href="/profile_input" style="text-transform:uppercase">Make a profile</a></p> <p><a href="/convert_input" style="text-transform:uppercase">Convert a file</a></p> <p><a href="/draw/">Draw on a map</a></p> <p><a href="/calculators">Calculators</a></p> </td> <td class="header_link" style="padding-left:9px; padding-right:6px;" nowrap> <p><a href="/geocoding.html">Geocode addresses</a></p> <p><a href="/elevation">Look up elevations</a></p> <p><a href="/atlas.html">Atlas: Share a map</a></p> <p><a href="/gpsbabel/">GPSBabel</a></p> </td> <td class="header_link" style="padding-left:9px; padding-right:6px;" nowrap> <p><a href="/examples/">Examples</a></p> <p><a href="/tutorials/">Help/FAQ</a></p> <p><a href="/about.html">About GPSV</a></p> </td> </tr> </table> </td> <td valign="top" align="right" width="24" style="padding-top:8px;"> <a target="_blank" href="https://www.facebook.com/gpsvisualizer" class=""><img src="/images/facebook-48x48.svg" width="24" height="24" border="0" /></a> </td> </tr> </table> </div> <table cellspacing="0" cellpadding="0" border="0"><tr align="left" valign="top"> <td id="sidebar" style="height:100%; padding:8px;"> <div id="sidebar_strip" style="padding:0px; min-width:160px; transition:min-width 0.5s;"> <div id="ezoic-pub-ad-placeholder-103"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0538542711751001" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-0538542711751001" data-ad-slot="7977873699"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </td> <td class="nonmobile_body" width="99%"> <div id="header_strip" style="padding:3px; height:90px; max-height:90px; xoverflow:hidden !important; transition:min-height 0.5s; text-align:center;"> <div id="ezoic-pub-ad-placeholder-104"> <table id="ez_donation_strip" style="display:none;"><tr><td height="50" valign="middle" nowrap><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PN7SLQGN4BYNE&source=url"><img src="/images/paypal-130x50.png" border="0" align="absmiddle" style="margin-right:4px;" /></a> <b>No ads? No problem!</b> You can support GPS Visualizer by <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PN7SLQGN4BYNE&source=url">making a donation with PayPal</a> instead.</td></tr></table> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0538542711751001" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-0538542711751001" data-ad-slot="6664792025"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <script type="text/javascript"> function ShrinkHeaderAndSidebar() { if (document.getElementById('sidebar_strip')) { //document.getElementById('sidebar_strip').style.minWidth = '80px'; } if (document.getElementById('header_strip')) { document.getElementById('header_strip').style.height = 'none'; document.getElementById('header_strip').style.minHeight = '0px'; } } function CheckForWaldo() { if (!document.getElementById('waldo_donation_strip')) { return false; } var blocked = false; var parent = document.getElementById('waldo_donation_strip').parentNode; var grandparent = (parent && parent.parentNode) ? parent.parentNode : null; if(!document.getElementById('waldo_donation_strip')) { // it's been eliminated blocked = false; } else if (parent && parent.childElementCount == 1) { // nothing was inserted next to the donation message blocked = true; } if (blocked) { ShrinkHeaderAndSidebar(); if (document.getElementById('waldo_donation_strip')) { document.getElementById('waldo_donation_strip').style.display = 'inline-block'; } } } function DonationBanner() { AdBlockerDetected = (self.NoAdBlocker) ? false : true; if (AdBlockerDetected){ // ad blocker IS in use if (document.getElementById('header_strip')) { var msg = '<table id="donation_strip" cellspacing="0" cellpadding="0" border="0" style="height:100%"><tr><td height="50" valign="middle"><a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PN7SLQGN4BYNE&source=url"><img src="/images/paypal-130x50.png" border="0" align="absmiddle" style="margin-right:4px;"><'+'/a><'+'/td><'+'td><b>No ads? No problem.<'+'/b> You can support GPS Visualizer by <a target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PN7SLQGN4BYNE&source=url">making a donation with PayPal<'+'/a> instead.<'+'/td><'+'/tr><'+'/table>'; document.getElementById('header_strip').innerHTML = msg; } // ShrinkHeaderAndSidebar(); } // the following line puts in the donation message even if an ad-blocker wasn't detected, by detecting that the "waldo" tag was NOT replaced with an ad. window.setTimeout("CheckForWaldo()",5000); } window.setTimeout('DonationBanner()',2000); </script> </div> <br> <p><a href="./" style="text-decoration:none;">« GPS Visualizer Tutorials</a></p> <a name="top"><h1>Tutorial: Building Plain-Text Waypoint Files by Hand</h1></a> <h3 class="tutorial" style="margin-bottom:4px;">Contents</h3> <ul style="margin-top:0px;"> <li><a href="#essentials">1: The bare essentials</a></li> <li><a href="#more">2: A little more information</a></li> <li><a href="#desc">3: Building more interesting "desc" fields</a></li> <li><a href="#colors">4: Adding colors</a></li> <li><a href="#symbols">5: Adding symbols in HTML maps & Google Earth</a></li> <li><a href="#labels">6: Adding permanent labels to HTML maps</a></li> <li><a href="#resizing">7: Resizing & colorizing points</a></li> <li><a href="#addresses">8: Adding points without coordinates (e.g., addresses)</a></li> <li><a href="#urls">9: Adding URLs</a></li> <li><a href="#photos">10: Adding thumbnails and photos</a></li> <li><a href="#summary">11: Summary</a></li> </ul> <br/> <p>This document will show you how to build plain-text (tab- or commma-separated) files that can be used to make maps with GPS Visualizer. It's actually very easy to get started, but there are some powerful features that you might not be aware of. After reading this, you should have a better understanding of what GPS Visualizer can do and how you can take advantage of it.</p> <p>For most of the examples on this page, we've created very simple JPEG maps. They're not very fancy, but this document isn't about spectacular maps, it's about massaging data into a mappable format. Unless otherwise noted, all the information here also applies to creating Google Maps, Leaflet maps, Google Earth files, etc. Once you have a nice, clean data file, you can do anything you want with it.</p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="essentials"><h3 class="tutorial">1: The bare essentials</h3></a> <p>All you really need is a collection of coordinates, or even just one pair of coordinates; adding a "name" to each point is not necessary, but very helpful (and it lets GPS Visualizer know that you're uploading waypoints rather than a sequence of trackpoints).</p> <p>For this example, we'll use the tallest Cascade Range volcanoes in southern Washington and Northern Oregon. The easiest way to organize your data is using a spreadsheet, like Microsoft Excel. On the left, below, is a screen shot of an Excel worksheet, and on the right is the same data in simple, comma-separated format.</p> <div style="margin-right:20px; margin-bottom:10px; float:left;"> <img src="waypoints-excel-1.gif"> </div> <div> <textarea class="csv_data" rows="5" cols="40">name,latitude,longitude Rainier,46.8533,-121.7599 Adams,46.2024,-121.4909 Hood,45.3733,-121.6957 Jefferson,44.6743,-121.7996</textarea> </div> <div style="height:0px; clear:both;"></div> <p>To make a map from data like this, just cut and paste the data from Excel or your text editor into the text area on GPS Visualizer's map form. (When you copy data from Excel, it gets pasted with tabs, which will work fine but might look strange.) If you prefer, you can also upload the Excel file to GPS Visualizer.</p> <br/> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px; padding-bottom:10px;"> <img src="waypoints-map-1.jpg"> </td><td> <p>For now, let's use the JPEG/PNG/SVG map form, with the output format set to JPEG and the size set to 300 for simplicity's sake. (Go ahead and <a target="_blank" href="/map_input?format=jpg&bg_map=US_NATIONAL_ATLAS_AERIAL&width=300&margin=50&form:data=name,latitude,longitude%0DRainier,46.8533,-121.7599%0DAdams,46.2024,-121.4909%0DHood,45.3733,-121.6957%0DJefferson,44.6743,-121.7996">try it using the data in the box above</a>.) After clicking the "Draw a map" button, the resulting graphic should look similar to the map on the left.</p> </td></tr></table> <p>Here's the most important thing that can be emphasized about creating plain-text data files for GPS Visualizer: <b>Having a sensible "header row" above your data is VERY important. The order of the fields is NOT important.</b> Spaces between fields and capitalization of the header row aren't important either. So "name,latitude,longitude" is identical to "NAME, latitude , Longitude." These "not important" factors are a big part of what makes this program so powerful: chances are, if a human could read your data and make sense of it, so can GPS Visualizer. Include as many or as few fields as you want; as long as a waypoint contains information that might let you plot it on a map, GPS Visualizer will try.</p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="more"><h3 class="tutorial">2: A little more information</h3></a> <p>Now, let's add a "description" field to each point (usually abbreviated as "desc"). For now, we'll put the full name of the mountain, along with the state it's in. So Rainier's description is "Mount Rainier, Washington."</p> <p>We'll also add a field that contains the height of each mountain. We'll call it "alt" to keep it short, but you could also use "altitude" or "elevation." NOTE: if no units are specified, GPS Visualizer will think your numbers are metric (meters for elevation, km/h for speed, etc.); but, in this example, we have our elevation data in feet, so we need to call the field "alt (feet)" or "alt (ft)".</p> <div style="margin-right:20px; margin-bottom:10px; float:left;"> <img src="waypoints-excel-2.gif"> </div> <div> <textarea class="csv_data" rows="5" cols="60" wrap="off">name,desc,alt(ft),latitude,longitude Rainier,"Mt. Rainier, Washington",14411,46.8533,-121.7599 Adams,"Mt. Adams, Washington",12276,46.2024,-121.4909 Hood,"Mt. Hood, Oregon",11239,45.3733,-121.6957 Jefferson,"Mt. Jefferson, Oregon",10497,44.6743,-121.7996</textarea> </div> <div style="height:0px; clear:both;"></div> <p><a target="_blank" href="/map_input?format=jpg&bg_map=US_NATIONAL_ATLAS_AERIAL&width=300&margin=50&form:data=name,desc,alt%28feet%29,latitude,longitude%0DRainier,%22Mt.+Rainier,+Washington%22,14411,46.8533,-121.7599%0DAdams,%22Mt.+Adams,+Washington%22,12276,46.2024,-121.4909%0DHood,%22Mt.+Hood,+Oregon%22,11239,45.3733,-121.6957%0DJefferson,%22Mt.+Jefferson,+Oregon%22,10497,44.6743,-121.7996">(Click here to pre-fill the map form with this data.)</a></p><p>There's something very important to notice about this comma-separated data: the items in the "desc" column MUST be enclosed in quotes because there is a comma inside each description. Without the quotes, everything would be shifted back one column, and the altitude of the first two points would be listed as "Washington"!</p> <br/> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px;"> <img src="waypoints-map-2.jpg"> </td><td> <p>Voila. </p> </td></tr></table> <hr size="1" noshade color="#004400" class="tutorial"> <a name="desc"><h3 class="tutorial">3: Building more interesting "desc" fields</h3></a> <p>The nice thing about storing your raw data in a spreadsheet like Excel is that you can manipulate the fields as needed. This is especially helpful for the description field. Let's say we want to display the height of each mountain on the map. All we have to do is concoct a simple Excel formula that reads the "alt" field and adds it to the end of the existing "desc" field. Since the column with the formulas in it will need to be called "desc" in order for GPS Visualizer to recognize it, we'll rename the original "desc" column to "full name," which GPS Visualizer will ignore.</p> <p>In the screen shot below, you can see the formula in cell C2 laid bare for the world to see; in cells C3 through C5, the results of the formula are visible.</p> <div style="margin-right:20px; margin-bottom:10px; float:left;"> <img src="waypoints-excel-3.gif"> </div> <div> <textarea class="csv_data" rows="6" cols="40" wrap="off">name,desc,alt(feet),latitude,longitude Rainier,"Mt. Rainier, Washington (14411 ft.)",14411,46.8533,-121.7599 Adams,"Mt. Adams, Washington (12276 ft.)",12276,46.2024,-121.4909 Hood,"Mt. Hood, Oregon (11239 ft.)",11239,45.3733,-121.6957 Jefferson,"Mt. Jefferson, Oregon (10497 ft.)",10497,44.6743,-121.7996</textarea> </div> <div style="height:0px; clear:both;"></div> <p><a target="_blank" href="/map_input?format=jpg&bg_map=US_NATIONAL_ATLAS_AERIAL&width=300&margin=50&form:data=name,desc,alt%28feet%29,latitude,longitude%0DRainier,%22Mt.+Rainier,+Washington+(14411+ft.)%22,14411,46.8533,-121.7599%0DAdams,%22Mt.+Adams,+Washington+(12276+ft.)%22,12276,46.2024,-121.4909%0DHood,%22Mt.+Hood,+Oregon+(11239+ft.)%22,11239,45.3733,-121.6957%0DJefferson,%22Mt.+Jefferson,+Oregon+(10497+ft.)%22,10497,44.6743,-121.7996">(Click here to pre-fill the map form with this data.)</a></p> <br/> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px;"> <img src="waypoints-map-3.jpg"> </td><td> <p>Maybe we should have just put the altitude by itself in the description field; it's getting a little messy. Oh well, there's no harm in experimenting.</p> <p>Note that if your output format supports HTML in waypoint names or descriptions (i.e., you are creating a Leaflet map, a Google Map, or a Google Earth KML file) you can build descriptions that contain HTML formatting, which can be very, very useful. For example, you can include line breaks via the <br/> tag; in fact, you could conceivably include an entire table of information in the description of each point.</p> <p>One more thing: you can give instructions to GPS Visualizer to synthesize a name or description based on your fields (look for <b>synthesize name</b> and <b>synthesize description</b> in the "Advanced waypoint options"). With this feature, you can create interesting names and descriptions <i>without</i> having to use Excel formulas. (<a href="/examples/google_spreadsheet.html">Click here</a> for an example using dynamic data and the "synthesize" variables.)</p> </td></tr></table> <hr size="1" noshade color="#004400" class="tutorial"> <a name="colors"><h3 class="tutorial">4: Adding colors</h3></a> <p>Each of your points can have its own color, defined by a "color" field. In our example data, we'll assign red to peaks over 14,000 feet high, green to peaks that are at least 11,000 feet, and blue to the rest.</p> <div style="margin-right:20px; margin-bottom:10px; float:left;"> <img src="waypoints-excel-4.gif"> </div> <div> <textarea class="csv_data" rows="6" cols="50" wrap="off">name,desc,color,alt(feet),latitude,longitude Rainier,"Mt. Rainier, Washington (14411 ft.)",red,14411,46.8533,-121.7599 Adams,"Mt. Adams, Washington (12276 ft.)",red,12276,46.2024,-121.4909 Hood,"Mt. Hood, Oregon (11239 ft.)",green,11239,45.3733,-121.6957 Jefferson,"Mt. Jefferson, Oregon (10497 ft.)",blue,10497,44.6743,-121.7996</textarea> </div> <div style="height:0px; clear:both;"></div> <p><a target="_blank" href="/map_input?format=jpg&width=300&margin=50&form:data=name,desc,color,alt%28feet%29,latitude,longitude%0DRainier,%22Mt.+Rainier,+Washington+(14411+ft.)%22,red,14411,46.8533,-121.7599%0DAdams,%22Mt.+Adams,+Washington+(12276+ft.)%22,green,12276,46.2024,-121.4909%0DHood,%22Mt.+Hood,+Oregon+(11239+ft.)%22,green,11239,45.3733,-121.6957%0DJefferson,%22Mt.+Jefferson,+Oregon+(10497+ft.)%22,blue,10497,44.6743,-121.7996">(Click here to pre-fill the map form with this data.)</a></p> <br/> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px;"> <img src="waypoints-map-4.jpg"> </td><td> <p>Colors can be either "named" HTML color values (blue, green, red, black, fuchsia, olive, skyblue, papayawhip, etc.) or hex-formatted RGB values (#0000FF, #82B3CE, etc.).</p> <p>And yes, "papayawhip" is really a recognized HTML color.</p> </td></tr></table> <hr size="1" noshade color="#004400" class="tutorial"> <a name="symbols"><h3 class="tutorial">5: Adding symbols in HTML maps & Google Earth</h3></a> <p>Now we're going to turn away from those simple JPEG maps for a moment, because in JPEG, PNG, and SVG maps, you have no control over what kind of marker ("symbol") appears for each waypoint; it's always a circle. In Leaflet, Google Maps, and Google Earth, however, you can use a different marker style, either for all points or each point individually.</p> <table cellspacing="0" cellpadding="4" border="0"><tr valign="top"><td width="50%" style="padding-right:30px;"> <p style="margin-bottom:4px;">Here's GPS Visualizer's list of available pre-defined symbols in Leaflet & Google Maps:</p> <table cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td> <table cellspacing="0" cellpadding="4" border="0" class="allrules"> <tr valign="top"><td align="center"><img src="/google_maps/icons/google/red.png"></td><td>google</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/googleblank/red.png"></td><td>googleblank</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/googlemini/red.png"></td><td>googlemini</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/circle/red.png"></td><td>circle</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/square/red.png"></td><td>square</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/triangle/red.png"></td><td>triangle</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/diamond/red.png"></td><td>diamond</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/star/red.png"></td><td>star</td></tr> </table> </td><td>   </td><td> <table cellspacing="0" cellpadding="4" border="0" class="allrules"> <tr valign="top"><td align="center"><img src="/google_maps/icons/cross/red.png"></td><td>cross</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/pin/red.png"></td><td>pin</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/airport/red.png"></td><td>airport</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/camera/red.png"></td><td>camera</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/arrow/red-r000.png"></td><td>arrow<br /> (can be rotated)</td></tr> <tr valign="top"><td align="center"><img src="/google_maps/icons/wedge/red-r000.png"></td><td>wedge<br /> (can be rotated)</td></tr> <tr valign="top"><td align="center"> </td><td>no_icon<br /> (useful for labels)</td></tr> </table> </td></tr></table> <table cellspacing="0" cellpadding="4" border="0" class="allrules"> </table> </td><td width="50%"> <p style="margin-bottom:4px;">And, for Google Earth:</p> <table cellspacing="0" cellpadding="0" border="0"><tr valign="top"><td> <table cellspacing="0" cellpadding="4" border="0" class="allrules"> <tr valign="middle"><td align="center"><img src="/google_earth/icons/airport.png"></td><td>airport</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/blankcircle.png"></td><td>blankcircle</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/camera.png"></td><td>camera</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/camera_circle.png"></td><td>camera_circle</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/circle.png"></td><td>circle</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/flag.png"></td><td>flag</td></tr> </table> </td><td>   </td><td> <table cellspacing="0" cellpadding="4" border="0" class="allrules"> <tr valign="middle"><td align="center"><img src="/google_earth/icons/square.png"></td><td>square</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/pushpin.png"></td><td>pushpin</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/pushpin_circle.png"></td><td>pushpin_circle</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/star.png"></td><td>star</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/star_gold.png"></td><td>star_gold</td></tr> <tr valign="middle"><td align="center"><img src="/google_earth/icons/triangle.png"></td><td>triangle</td></tr> </table> </td></tr></table> </td></tr></table> <p>So, let's make a map using triangles and squares. We'll say that triangles represent volcanoes that have erupted in historic time (Rainier & Hood), and squares are volcanoes that have been dormant longer (Adams & Jefferson).</p> <div style="margin-right:20px; margin-bottom:10px; float:left;"> <img src="waypoints-excel-5.gif"> </div> <div> <textarea class="csv_data" rows="6" cols="48" wrap="off">name,desc,color,symbol,alt(feet),latitude,longitude Rainier,"Mt. Rainier, Washington (14411 ft.)",red,triangle,14411,46.8533,-121.7599 Adams,"Mt. Adams, Washington (12276 ft.)",green,square,12276,46.2024,-121.4909 Hood,"Mt. Hood, Oregon (11239 ft.)",green,triangle,11239,45.3733,-121.6957 Jefferson,"Mt. Jefferson, Oregon (10497 ft.)",blue,square,10497,44.6743,-121.7996</textarea> </div> <div style="height:0px; clear:both;"></div> <p><a target="_blank" href="/map_input?form=leaflet&form:data=name,desc,color,symbol,alt+%28feet%29,latitude,longitude%0DRainier,%22Mt.+Rainier,+Washington+(14411+ft.)%22,red,triangle,14411,46.8533,-121.7599%0DAdams,%22Mt.+Adams,+Washington+(12276+ft.)%22,green,square,12276,46.2024,-121.4909%0DHood,%22Mt.+Hood,+Oregon+(11239+ft.)%22,green,triangle,11239,45.3733,-121.6957%0DJefferson,%22Mt.+Jefferson,+Oregon+(10497+ft.)%22,blue,square,10497,44.6743,-121.7996">(Click here to pre-fill the map input form with this data.)</a></p> <br/> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px;"> <iframe src="waypoints-map-5.html" width="300" height="300" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="background:#FFFFFF"> </iframe> </td><td> <p>The map on the left is a live, interactive map; note that if you put your mouse pointer over one of the markers, the name shows up. If you click on a marker, an info window pops up with the name of the point in bold at the top, and the description below. (This is where including HTML in a description could come in handy.)</p> </td></tr></table> <h4 class="tutorial">Custom icons in Google & Leaflet Maps</h4> <p>GPS Visualizer accepts absolute URLs in the "symbol" field for Leaflet & Google maps, and it will try its best to make your custom symbols display properly without you doing any extra work. (However: if you also supply an "icon_size" field that contains something like "12x20", you'll make GPS Visualizer's task a little easier.)</p> <p>If you need to, you can also define a whole set of custom markers in various colors, but for each new marker you need to create the main graphic (and an optional "shadow"), and then repeat the process for however many different colors you want available. Then you have to add some JavaScript code to the guts of your map page that defines certain parameters of the new icon. It's powerful, but a pain to set up; send an e-mail if you want to give it a try.</p> <h4 class="tutorial">Custom icons in Google Earth</h4> <p>Google Earth makes it very easy to incorporate custom icons into your maps: all you need to supply is the URL of the icon graphic (even photograph thumbnails will work), and GE will take care of the rest. Google Earth can even colorize them if you supply a "color" field.</p> <p>Google Earth also has hundreds of "standard" icons that you can easily use. To see all of them, <a target="_blank" href="http://econym.org.uk/gmap/geicons.htm">click here</a>; to find the URL of one of the icons on that page, right-click on the graphic and choose the appropriate command to find its URL. (In Firefox, it's "Copy image location.")</p>  <h4 class="tutorial">Invisible icons</h4> <p>When making both Leaflet/Google Maps and Google Earth files, GPS Visualizer lets you create "invisible" waypoints by specifying "no icon" or "none" in the symbol field. This could be useful if you want to put a visible label on a track in Google Earth (something GE does not normally allow), or to put any sort of label on a map without a specific icon attached to it.</p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="labels"><h3 class="tutorial">6: Adding permanent labels to HTML maps</h3></a> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px;"> <iframe src="waypoints-map-6.html" width="300" height="300" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="background:#FFFFFF"> </iframe> </td><td> <p>In the map on the left, the markers will show you their names when you move your mouse over them, but they also have a different piece of text (in this case, their first letter) permanently visible on the map as a "label."</p> <p>The top label ("R") shows the default appearance: the label is on the right side of the marker, roughly centered vertically with respect to the marker's anchor point. The others have customizations applied to them:</p> <ul> <li style="margin-bottom:0.4em;">"A" has a <tt>label_left:true</tt> attribute, so the label appears on the left side. (<tt>label_centered</tt> is also an option; in that case, the label appears below the marker, horizontally centered.)</li> <li style="margin-bottom:0.4em;">"H" has <tt>label_color:green</tt>, so the label's appearance is white with green text instead of the default black with white text. (Another option for customizing the appearance of an individual label's text is the <tt>label_class</tt> attribute, which takes the name of a CSS class that you define.)</li> <li style="margin-bottom:0.4em;">"J" has <tt>label_offset:[8,-6]</tt>, which means the label is offset 8 pixels to the right and 6 pixels up from its default position. If you put an offset in comma-separated data, be sure to put quotes around the pair of numbers so they are treated as a single field ("x,y").</li> </ul> </td></tr></table> <div style="margin-right:20px; margin-bottom:1em; float:left;"> <img src="waypoints-excel-6.png"> </div> <div style="margin-right:20px; margin-bottom:1em; float:left;"> <textarea class="csv_data" rows="6" cols="45" wrap="off">name,latitude,longitude,sym,color,label,label_left,label_color,label_offset Rainier,46.8533,-121.7599,triangle,,R,,, Adams,46.2024,-121.4909,square,green,A,1,, Hood,45.3733,-121.6957,triangle,green,H,,green, Jefferson,44.6743,-121.7996,square,blue,J,,,"8,-6" </textarea> </div> <p style="clear:both;"><a target="_blank" href="/map_input?form=leaflet&form:data=name,latitude,longitude,sym,color,label,label_left,label_color,label_offset%0DRainier,46.8533,-121.7599,triangle,,R,,,%0DAdams,46.2024,-121.4909,square,green,A,1,,%0DHood,45.3733,-121.6957,triangle,green,H,,green,%0DJefferson,44.6743,-121.7996,square,blue,J,,,%228,-6%22">(Click here to pre-fill the map input form with this data.)</a></p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="resizing"><h3 class="tutorial">7: Resizing & colorizing points</h3></a> <p>Using the <a href="/map_input?form=data">"quantitative data" input form</a>, you can have GPS Visualizer resize or colorize your waypoints based on a field (or fields) of your choice. It's not hard to do, but this feature is important enough to warrant <a href="data.html">its own tutorial</a>.</p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="addresses"><h3 class="tutorial">8: Adding points without coordinates (e.g., addresses)</h3></a> <p>It's possible to specify the location of a waypoint using information other than coordinates: city+state, U.S. ZIP code, Canadian postal code, or airport code. <b>(For street addresses, you will need to use GPS Visualizer's <a href="/geocoder/">Batch Geocoder</a> to add coordinates to your points before proceeding.)</b></p> <p>As always, the header row on your data is important, and preserving the structure of the columns is crucial: you can't put an airport code in the "latitude" column or a city name under "airport." In this next example, we've added Seattle and Portland to the file, using two different methods. For Seattle, we've supplied a city and state; for Portland, just its airport code. The unknown fields are left blank. (In the .csv data file, that means multiple commas with nothing between them.)</p> <div style="margin-right:20px; margin-bottom:10px; float:left;"> <img src="waypoints-excel-8.gif"> </div> <div> <textarea class="csv_data" rows="6" cols="40" wrap="off">name,desc,color,symbol,alt(feet),latitude,longitude,city,state,airport Rainier,"Mt. Rainier, Washington (14411 ft.)",red,triangle,14411,46.8533,-121.7599 Adams,"Mt. Adams, Washington (12276 ft.)",red,square,12276,46.2024,-121.4909 Hood,"Mt. Hood, Oregon (11239 ft.)",green,triangle,11239,45.3733,-121.6957 Jefferson,"Mt. Jefferson, Oregon (10497 ft.)",blue,square,10497,44.6743,-121.7996 Seattle,,yellow,pin,,,,Seattle,WA PDX,Portland Airport,yellow,airport,,,,,,PDX</textarea> </div> <div style="height:0px; clear:both;"></div> <p><a target="_blank" href="/map_input?form=leaflet&form:data=name,desc,color,symbol,alt+%28feet%29,latitude,longitude%0DRainier,%22Mt.+Rainier,+Washington+(14411+ft.)%22,red,triangle,14411,46.8533,-121.7599%0DAdams,%22Mt.+Adams,+Washington+(12276+ft.)%22,green,square,12276,46.2024,-121.4909%0DHood,%22Mt.+Hood,+Oregon+(11239+ft.)%22,green,triangle,11239,45.3733,-121.6957%0DJefferson,%22Mt.+Jefferson,+Oregon+(10497+ft.)%22,blue,square,10497,44.6743,-121.7996%0DSeattle,,yellow,pin,,,,Seattle,WA%0DPDX,Portland+Airport,yellow,airport,,,,,,PDX">(Click here to pre-fill the map input form with this data.)</a></p> <br/> <table cellspacing="0" cellpadding="0" border="0" style="margin-bottom:10px;"><tr valign="middle"><td style="padding-right:20px;"> <iframe src="waypoints-map-8.html" width="300" height="300" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" style="background:#FFFFFF"> </iframe> </td><td> <p>The resulting map is just as you'd expect: a yellow pin on Seattle, and a yellow airport icon on Portland (at the location of PDX, Portland's airport).</p> <p>If you want to <i>retrieve the coordinates</i> of points for which you don't know the latitude and longitude, send your data through <a href="/geocoding.html">GPS Visualizer's geocoding utilities</a> rather than the map form.</p> </td></tr></table> <hr size="1" noshade color="#004400" class="tutorial"> <a name="urls"><h3 class="tutorial">9: Adding URLs to waypoints</h3></a> <p>If your input data includes a "url" field, the point's info window will contain a link to that URL. (In SVG maps, the marker itself becomes a link.)</p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="photos"><h3 class="tutorial">10: Adding thumbnails and photos to waypoints</h3></a> <p>If you include the URL of an image in a waypoint's "thumbnail" field when creating a Leaflet or Google Map, it will show up when you mouse-over the waypoint marker, and will also appear in the info window that appears when you click on the marker. The thumbnails will be displayed at their natural size unless you also supply a "thumbnail_width" value (in pixels).</p> <p>If you include an image's URL in the "photo" field, that image will appear full-size in the marker's info window. (If there is also a thumbnail specified, the thumbnail will NOT appear in the info window.) Use two numbers in the "photo_size" field to set the displayed size of the image (e.g., "400x300").</p> <p>You can see an example of a photo map <a href="/examples/google_photo_map.html">here</a>.</p> <hr size="1" noshade color="#004400" class="tutorial"> <a name="summary"><h3 class="tutorial">11: Summary</h3></a> <p>Here's a list of the fields that are important in terms of how GPS Visualizer handles your waypoints. Alternate names are separated by slashes; for example, you can specify latitude with "lat" or "latitude."</p> <p>(For a "live" demonstration of how many of these fields work with HTML maps (Google/Leaflet), <a href="/examples/google_fields.html">click here</a>.)</p> <table class="horizrules" cellspacing="0" cellpadding="2" border="0"> <tr valign="top"><td nowrap><b>name</b></td><td>the name of a point, as displayed on the map; use "-" for no name. In Leaflet/Google Maps and Google Earth, the name is used as the "mouseover" text for the marker.</td></tr> <tr valign="top"><td nowrap><b>desc/description</b></td><td>can contain almost anything, especially if your goal is Leaflet/Google Maps or Google Earth files; use "-" for no description</td></tr> <tr valign="top"><td nowrap><b>longitude/lon/long</b></td><td>ideally should be decimal degrees, but degrees-minutes-seconds format also works as long as the parts are separated (just be sure that western coordinates are either negative numbers or include a "W")</td></tr> <tr valign="top"><td nowrap><b>latitude/lat</b></td><td>see note under "longitude"</td></tr> <tr valign="top"><td nowrap><b>time/date</b></td><td>try to use a non-ambiguous time format, like yyyy-mm-dd hh:mm:ss; if you submit "04/05/06," the computer doesn't know what that means</td></tr> <tr valign="top"><td nowrap><b>alt/altitude/elevation</b></td><td>will be interpreted as meters unless "(ft.)" or "(feet)" is included in the field name</td></tr> <tr valign="top"><td nowrap><b>speed/velocity</b></td><td>will be interpreted as km/h unless "(mph)" or "(m/s)" is included in the field name</td></tr> <tr valign="top"><td nowrap><b>airport</b></td><td>3- or 4-letter airport code; used in place of latitude & longitude</td></tr> <tr valign="top"><td nowrap><b>color</b></td><td>named HTML color or hex value; in Leaflet/Google Maps, you can only colorize GPS Visualizer's built-in icon sets, not remote icons</td></tr> <tr valign="top"><td nowrap><b>hotspot</b></td><td>Google Earth only; two numbers joined by a comma (x & y; y=0 is the <em>bottom</em> of the icon); used for custom placemark icons. (In Leaflet/Google Maps, use icon_anchor, where y=0 is the TOP of the icon)</td></tr> <tr valign="top"><td nowrap><b>sym/symbol/icon</b></td><td>Leaflet/Google Maps or Google Earth only; see <a href="#symbols">"Adding symbols"</a> above</td></tr> <tr valign="top"><td nowrap><b>radius</b></td><td>in pixels</td></tr> <tr valign="top"><td nowrap><b>scale</b></td><td>a ratio (0.5 = half-size, 2.0 = double-sized)</td></tr> <tr valign="top"><td nowrap><b>opacity</b></td><td>from 0 to 1</td></tr> <tr valign="top"><td nowrap><b>rotation</b></td><td>degrees clockwise (same units as a "heading" would be); can be used with <i>any</i> icon in Google Earth, or with the "tickmark" icon in Leaflet/Google Maps</td></tr> <tr valign="top"><td nowrap><b>url</b></td><td>turns your waypoint into a link; see <a href="#url">"Adding URLs"</a> above</td></tr> <tr valign="top"><td nowrap><b>label</b></td><td>Leaflet/Google Maps only; puts a "permanent" label on the map rather than just a tooltip.</td></tr> <tr valign="top"><td nowrap><b>label_color</b></td><td>Leaflet/Google Maps or Google Earth only; sets the color of a marker's permanent label on the map.</td></tr> <tr valign="top"><td nowrap><b>label_scale</b></td><td>Google Earth only; sets the size for a marker's label on the map, as a percentage/proportion of the "normal" size.</td></tr> <tr valign="top"><td nowrap><b>shortdesc</b></td><td>Leaflet/Google Maps or Google Earth only; if you have your Google Map generate a marker list that includes descriptions, the "shortdesc", if it exists, will be used in place of the normal "desc" in the list. In Google Earth, the short description will go in the KML <snippet> tag, which is displayed in GE's sidebar.</td></tr> <tr valign="top"><td nowrap><b>thumbnail</b></td><td>the URL of a graphic; in Leaflet/Google Maps, it becomes part of the mouse-over; in Google Earth, it becomes the icon for that point (see <a href="#9">#9</a> above)</td></tr> <tr valign="top"><td nowrap><b>photo</b></td><td>the URL of a larger photo; in Leaflet/Google Maps & Google Earth, it becomes part of the description of the point</td></tr> <tr valign="top"><td nowrap><b>address</b>, <b>city</b>, <b>state</b>, <b>country/nation</b>   </td><td>used in place of latitude & longitude; does not work with dynamic maps</td></tr> <tr valign="top"><td nowrap><b>zip/zipcode/postcode</b></td><td>used in place of latitude & longitude; does not work with dynamic maps</td></tr> <tr valign="top"><td nowrap><b>folder</b></td><td>Leaflet/Google Maps (with a "marker list") & Google Earth only; you can create collapsible/hideable folders of waypoints and/or tracks if you provide the name of a folder. In Google Earth, you can go one level deeper by separating folders and subfolders by backslashes; for example, you could use "Campgrounds\Public" and "Campgrounds\Private", and a Campgrounds folder would be created, with Public and Private folders inside.</td></tr> <tr valign="top"><td nowrap><b>circle_radius</b></td><td>This is an unusual one. If you supply a distance in the circle_radius field (e.g., "10 km" or "100 mi."), GPS Visualizer will draw a "range ring" of the specified radius around your point. Note that if your waypoint has a color or opacity supplied, those attributes will be applied to the circle. (If you don't supply a unit, the number given will be assumed to be kilometers.) </td></tr> <tr valign="top"><td nowrap><b>Leaflet/Google Maps options</b></td> <td> These are included in a separate section because they're a bit esoteric and ONLY used with Leaflet/Google Maps. <table class="horizrules" cellspacing="0" cellpadding="3" style="margin:6px 0px 6px 0px;"> <tr valign="top"><th>variable</th><th>description</th></tr> <tr valign="top"><td nowrap>icon_size</td><td>The size, in pixels, of a custom (remote) icon in "width,height" format; this will speed up processing of your map because GPS Visualizer doesn't have to go out and "inspect" the icon graphic.</td></tr> <tr valign="top"><td nowrap>icon_offset</td><td>Relative X and Y coordinates of the placement of the icon on the map (e.g., "10,10"). Numbers increase rightward and downward.</td></tr> <tr valign="top"><td nowrap>icon_anchor</td><td>Relative X and Y coordinates of the "anchor" of the marker's icon (e.g., "7,15"). Numbers increase rightward and downward.</td></tr> <tr valign="top"><td nowrap>label_offset</td><td>Relative offset, in X and Y pixels, of a marker's "permanent" label, (e.g., "2,-4). Numbers increase rightward and downward; overrides the global "label_offset" option. Frankly, it's often better to edit this manually after the map is created.</td></tr> <tr valign="top"><td nowrap>label_left</td><td>A value of "true" (or 1) causes a marker's label to appear on the left side of the icon instead of the right.</td></tr> <tr valign="top"><td nowrap>label_centered</td><td>A value of "true" (or 1) causes a marker's label to appear centered below the icon.</td></tr> <tr valign="top"><td nowrap>label_class</td><td>The name of a CSS class to be applied to a marker's permanent label. You can use this to cause certain labels to have a different size, color, or font. (Make sure to include style sheet definitions somewhere on the page. Note that you'll need to define them with "#gmap_div .my_class_name" and put "!important" after any font attributes; otherwise Google's fonts will override everything.)</td></tr> <tr valign="top"><td nowrap>z_index</td><td>By default, more southerly icons will display on top of northerly ones. You can override this with a "z_index" parameter on some or all waypoints.</td></tr> <tr valign="top"><td nowrap>thumbnail_width</td><td>Sets the displayed width, in pixels, of the thumbnail graphic specified in the "thumbnail" field.</td></tr> <tr valign="top"><td nowrap>photo_size</td><td>Sets the displayed width and height, in pixels (e.g., "500x375"), of the image specified in the "photo" field that will be displayed in the info window.</td></tr> <tr valign="top"><td nowrap>window_width</td><td>Width, in pixels, of the info window that pops up when you click a point; overrides the global "info_window_width" option.</td></tr> <tr valign="top"><td nowrap>no_window</td><td>Set to "true" (or 1) you want a marker to <em>not</em> open a pop-up info window when you click on it. If you specify no_window, and your marker has a URL attached to it, clicking on the marker's icon will open that URL immediately.</td></tr> <tr valign="top"><td nowrap>zoom_level</td><td>Sets the Google zoom level (generally 0-19) for this marker when its name or icon is clicked in the marker list; <em>only</em> has an effect if a marker list exists and if gv_options['marker_list_options']['zoom'] is set to true. Overrides the global zoom_level setting in marker_list_options.</td></tr> <tr valign="top"><td nowrap>nolist</td><td>Set to "true" (or 1) you want to exclude a marker from an auto-generated marker list. (nolist:false has no effect on anything).</td></tr> <tr valign="top"><td nowrap>dd</td><td>"true" or "false"; adds or suppresses a "driving directions" form in the marker's info window; overrides the global "dd" option.</td></tr> <tr valign="top"><td nowrap>dd_lon & dd_lat</td><td>Sometimes, you want the driving directions for a point to end up at a slightly different location than the point itself; use dd_lat and dd_lon to supply coordinates for the driving directions form. <em>Both</em> coordinates must be present to have any effect.</td></tr> <tr valign="top"><td nowrap>gv_track_number</td><td>You can make a waypoint "belong" to a track so that when the track is hidden, the waypoint goes with it. Supply the number of a track (1 or greater).</td></tr> <tr valign="top"><td nowrap>gv_marker_options</td><td>Fields that <em>could</em> be included as separate columns in your input data can also be included as a gv_marker_options attribute, which may be easier if there are only a handful of points that need special treatment. Example of a possible entry in a gv_marker_options column: <tt>dd:true,label:'parking',label_offset:[-1,5]</tt> -- but note that if you get the JavaScript syntax wrong, your entire map could fail to display!</td></tr> </table> </td> </tr> </table> <br> <br> <p><a href="#top">[Return to top]</a></p> <p><a href="index.html">[Return to the Tutorials index]</a></p> <br> <br> <br> <hr> <p><a href="/">Return to the main GPS Visualizer page</a></p> <br> <div id="footer" style="width:100%;"> <table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-top:1px solid #006600; padding-top:3px;"><tr valign="top"><td class="footer" align="left"> ©2003-2019 <a href="http://adamschneider.net/">Adam Schneider</a>, <img src="/images/email-11.png" align="absmiddle" alt="adam [at] gpsvisualizer [dot] com" style="padding-right:2px;">. </td><td class="footer" align="right"> <a href="/privacy.html">Privacy Policy</a> </td></tr></table> </div> </td> </tr></table> </body> </html>