CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>GPS Visualizer: Freehand Drawing Utility: Draw on a map and save GPX data</title> <base target="_top"></base> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="robots" content="noindex,nofollow" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="/gpsv.css" type="text/css"></link> <meta name="theme-color" content="#0D4E0D" /> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-64724077-1"></script> <script>window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-64724077-1');</script> <script type="text/javascript" src="/gpsv.js"></script> <meta property="og:image" content="https://www.gpsvisualizer.com/draw/images/draw_thumbnail.jpg" /> <link rel="image_src" href="https://www.gpsvisualizer.com/draw/images/draw_thumbnail.jpg" /> <link rel="icon" sizes="144x144" href="/images/g-144x144.png"> <script type="text/javascript"> MOBILE = false; </script> </head> <body style="margin:0px;"> <link rel="stylesheet" href="../leaflet/leaflet.css" /> <script type="text/javascript" src="../leaflet/leaflet.js"></script> <style type="text/css"> td.toolbar_button { font:9px Verdana; line-height:9px; text-align:center; min-width:29px; height:29px; padding:0px 0px 0px 0px; margin:0px; } td.toolbar_button img { cursor:pointer; width:25px; height:25px; padding:0px; border:1px solid #999999; margin:1px; } td.toolbar_label { font:9px Verdana; line-height:9px; text-align:center; padding:0px; } .gv_color_picker_cell { width:9px; height:9px; border:1px solid transparent; } .gv_color_picker_cell:hover { border:1px solid white; } .gv_color_picker_cell2 { width:8px; height:6px; border:1px solid transparent; } .gv_color_picker_cell2:hover { border:1px solid white; } .gv_save_button { cursor:pointer; padding:3px; margin:0px 4px 0px 0px; background-color:#dddddd; border:2px solid #dddddd; border-color:#eeeeee #cccccc #bbbbbb #dddddd; border-radius:4px; } .gv_save_button:hover { background-color:#eeeeee; } .green_gradient { background-color:#ccffbb; background:-webkit-linear-gradient(top,rgba(224,232,224,0),rgba(224,232,224,1)); /*Safari 5.1-6*/ background:-o-linear-gradient(bottom,rgba(224,232,224,0),rgba(224,232,224,1)); /*Opera 11.1-12*/ background:-moz-linear-gradient(bottom,rgba(224,232,224,0),rgba(224,232,224,1)); /*Fx 3.6-15*/ background:linear-gradient(to bottom,rgba(224,232,224,0),rgba(224,232,224,1)); } </style> <div style="margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;"> <div id="gmap_div" style="width:100%; height:100%; margin:0px; background-color:#F0F0F0; overflow:hidden;"> <p align="center" style="font:10px Arial;">This map was created using <a target="_blank" href="http://www.gpsvisualizer.com/">GPS Visualizer</a>'s do-it-yourself geographic utilities.<br /><br />Please wait while the map loads...</p> </div> <div id="gv_infobox" class="gv_infobox" style="font:11px Arial; border:solid #666666 1px; background:#ffffff; padding:4px; overflow:auto; max-width:400px; display:none;">  </div> <div id="gv_searchbox" align="left" style="font:10px Verdana; border:solid #666666 1px; background:#eeffe8; padding:6px 4px 2px 4px; width:220px; overflow:auto; display:none;"> <a href="http://www.gpsvisualizer.com/" id="gpsvisualizer_home_link"><img src="/images/gpsvisualizer_200x32.png" alt="GPS Visualizer" border="0" /></a> <h4 style="margin:2px 0px 0px 0px;" id="sandbox_title">Freehand Drawing Utility</h4> <h5 style="margin:0px 0px 4px 0px;" id="sandbox_subtitle">("The Sandbox")</h5> <p style="margin:0px 0px 8px 0px; font-size:10px; line-height:12px;"> <a href="./?api=g" onclick="if(gmap.getZoom()>3){this.href=Sandbox_Other_API_URL();}">[Click here for the Google Maps version]</a> </p> <p style="margin:0px 0px 8px 0px; font-size:10px; line-height:12px;" id="sandbox_description">Use the toolbar on the right to add waypoint markers and tracks, then click one of the "save data" buttons to download as plain text, GPX, or Google Earth KML.</p> <p style="margin:0px 0px 2px 0px; font-size:10px; line-height:12px;">Center the map on a location:</p> <p style="margin:0px 0px 0px 0px;"><input id="gv_searchbox_input" type="text" size="20" /><input id="gv_searchbox_button" type="button" value="Go" style="font:10px Verdana;" onclick="GV_Center_On_Address({input_box:'gv_searchbox_input',button:'gv_searchbox_button',message_box:'gv_searchbox_message',found_template:'',unfound_template:'',zoom:true,save_position:false,log_image:'sandbox-geocode-log.png'});" /></p> <div style="margin:4px 0px 0px 0px; font-size:9px;"><span style="font:10px Arial;" id="gv_searchbox_message"></span></div> </div> </div> <div id="gv_elements" align="left" style="width:200px; overflow:hidden; z-index:9997; border:solid #666666 1px; background:white; padding:4px; display:none;"> <p style="margin:0px 0px 4px 0px; font-size:10px;"><b>Drawing tools:</b></p> <table cellspacing="0" cellpadding="0" border="0" width="100%" id="gv_drawing_toolbar"> <tr valign="top"> <td align="center" class="toolbar_button"><img id="gv_button_pan" src="images/button_pan.png" title="Return to pan/zoom mode" /></td> <td align="center" rowspan="2" style="width:6px; padding:0px;"></td> <td align="center" class="toolbar_button"><img id="gv_button_add_wpt" src="images/button_add_wpt.png" title="Add a marker to the map" /></td> <td align="center" class="toolbar_button"><img id="gv_button_add_trk" src="images/button_add_trk.png" title="Add a track or area to the map" /></td> <td align="center" rowspan="2" style="width:6px; padding:0px;"></td> <td align="center" class="toolbar_button"><img id="gv_button_save_txt" src="images/button_save_txt.png" title="Save the current data as a plain-text file" /></td> <td align="center" class="toolbar_button"><img id="gv_button_save_gpx" src="images/button_save_gpx.png" title="Save the current data as a GPX file" /></td> <td align="center" class="toolbar_button"><img id="gv_button_save_kml" src="images/button_save_kml.png" title="Save the current data as a KML file" /></td> </tr> <tr valign="top"> <td align="center" class="toolbar_label">pan</td> <td align="center" class="toolbar_label">wpt</td> <td align="center" class="toolbar_label"><a href="javascript:void(0)" id="polygon_toggle_link" onclick="GVS.Return_To_Idle_State(); GVS.Toggle_Polygon_Button('gv_button_add_trk','polygon_toggle_link')" title="switch between track and area/polygon">trk</a></td> <td align="center" class="toolbar_label" colspan="3"> <table cellspacing="0" cellpadding="0" border="0" width="100%"><tr valign="top"> <td width="1%" class="toolbar_label" style="width:11px; min-width:11px;"></td> <td width="98%" class="toolbar_label">save data</td> <td width="1%" class="toolbar_label" style="width:11px; min-width:11px;"><a style="" href="javascript:void(0)" onclick="GVS.Toggle('save_data_options');" title="Set options for saving data"><img src="images/gear_10x9.png" width="10" height="9" border="0" style="margin-right:1px;" /></a></td> </tr></table> </td> </tr> </table> <div id="save_data_options" class="green_gradient" style="display:none; margin:6px 0px 0px 0px; font-size:10px; padding:3px;"> Add timestamps (for OSM): <select class="normal" id="add_timestamps" size="1"><option value="">No</option><option value="0.5">0.5 m/s = 1 mph</option><option value="1">1.0 m/s = 2 mph</option><option value="3">3.0 m/s = 7 mph</option><option value="5">5.0 m/s = 11 mph</option><option value="20">20 m/s = 45 mph</option></select> </div> <iframe id="download_iframe" style="background:none; width:208px; height:0px; margin:8px 0px 0px 0px; padding:0px;" marginwidth="0" marginheight="0" scrolling="auto" frameborder="0"></iframe> <p style="margin:4px 0px 4px 0px; font-size:10px;"><b>Your map elements:</b> <a href="javascript:void(0)" onclick="GVS.Autozoom();"><img src="images/tracklist_goto.png" width="9" height="9" border="0" style="vertical-align:-1px;" title="Zoom to your tracks & waypoints"></a></p> <div id="gv_elements_list" style="padding:2px; min-height:20px; max-height:240px; overflow:auto;">  </div> <div style="margin:6px 0px 0px 0px; font-size:10px; background-color:#eeffe8;"><table cellspacing="0" cellpadding="0" border="0" width="100%"><tr valign="top"><td align="left"><a href="javascript:void(0)" style="cursor:pointer; font:10px Verdana;" onclick="if($('import_iframe').style.display=='block'&&$('import_iframe').src.match(/import.html$/)){$('import_iframe').style.display='none';}else{$('import_iframe').src='import.html';$('import_iframe').style.display='block';}">Import a GPS file</a></td><td align="right"><a href="javascript:void(0)" style="cursor:pointer; font:10px Verdana;" onclick="if($('import_iframe').style.display=='block'&&$('import_iframe').src.match(/url=1$/)){$('import_iframe').style.display='none';}else{$('import_iframe').src='import.html?url=1';$('import_iframe').style.display='block';}">Import a URL</a></td></tr></table> <iframe id="import_iframe" style="display:none; background:none; width:208px; height:50px; max-height:75px; overflow:auto; margin:8px 0px 0px 0px; padding:0px;" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0"></iframe> </div> </div> <div id="gv_sandbox_link" style="display:none; font:10px Verdana,sans-serif; padding:1px; background-color:#ffffff; filter:alpha(opacity=80); -moz-opacity:0.80; opacity:0.80; display:none;"> <a href="javascript:void(0)" onclick="Sandbox_Show_Link();">Link to this view</a> </div> </div>  <script type="text/javascript"> mobile_browser = (navigator.userAgent.match(/\b(Android|Blackberry|IEMobile|iPhone|iPad|iPod|Opera Mini|webOS)\b/i) || screen.width < 480 || screen.height < 480) ? true : false; /* Global variables used by the GPS Visualizer functions: */ gv_options = {}; // basic map parameters: gv_options.center = [53.403507,-2.888893]; // [latitude,longitude] - be sure to keep the square brackets gv_options.zoom = 7; // higher number means closer view; can also be 'auto' gv_options.map_type = 'GV_OSM_RELIEF'; // popular map_type choices are 'G_NORMAL_MAP', 'G_SATELLITE_MAP', 'G_HYBRID_MAP', 'G_PHYSICAL_MAP', 'MYTOPO_TILES' gv_options.map_type_options gv_options.map_opacity = 1; // number from 0 to 1 gv_options.full_screen = true; // true|false: should the map fill the entire page (or frame)? gv_options.width = 700; // width of the map, in pixels gv_options.height = 700; // height of the map, in pixels gv_options.map_div = 'gmap_div'; // the name of the HTML "div" tag containing the map itself; usually 'gmap_div' gv_options.doubleclick_zoom = true; // true|false: zoom in when mouse is double-clicked? gv_options.mousewheel_zoom = true; // true|false; or 'reverse' for down=in and up=out gv_options.autozoom_adjustment = 0; gv_options.centering_options = { 'open_info_window':true, 'partial_match':true, 'center_key':'center', 'default_zoom':null } // URL-based centering (e.g., ?center=name_of_marker&zoom=14) gv_options.tilt = false; // true|false: allow Google to show 45-degree tilted aerial imagery? gv_options.street_view = (mobile_browser?false:true); // true|false: allow Google Street View on the map gv_options.animated_zoom = true; // true|false: may or may not work properly // widgets on the map: gv_options.zoom_control = 'large'; // 'large'|'small'|'none' gv_options.recenter_button = (mobile_browser?false:true); // true|false: is there a 'double-click to recenter' option in the zoom control? gv_options.scale_control = (mobile_browser?true:true); // true|false gv_options.geolocation_control = true; gv_options.center_coordinates = true; // true|false: show a "center coordinates" box and crosshair? gv_options.mouse_coordinates = (mobile_browser?false:true); // true|false: show a "mouse coordinates" box? gv_options.crosshair_hidden = (mobile_browser?true:true); // true|false: hide the crosshair initially? gv_options.map_opacity_control = 'both'; // true|false gv_options.utilities_menu = false; // true|false gv_options.map_type_control = {}; // widget to change the background map gv_options.map_type_control.style = 'menu'; // 'menu'|'none' gv_options.map_type_control.filter = false; // true|false: when map loads, are irrelevant maps ignored? gv_options.map_type_control.custom_order = { 'STRAVA_HEATMAP_HYBRID':5.3, 'US_CALTOPO_FIRES_HYBRID':11.82, 'US_GOOGLE_HYBRID_RELIEF':11.71, 'US_NPS_VISITORS':11.65, 'US_VFRMAP':11.81 }; gv_options.map_type_control.top_shortcuts = true; gv_options.map_type_control.help = true; gv_options.disable_google_pois = false; // true|false: if you disable clickable POIs, you also lose the labels on parks, airports, etc. gv_options.measurement_tools = { visible:false, distance_color:'#0000ff', area_color:'#0000ff', position:['BOTTOM_LEFT',4,70] }; gv_options.searchbox_options = {}; // options for a floating address search box gv_options.searchbox_options.enabled = true; // true|false: enable or disable the search box altogether gv_options.searchbox_options.zoom = true; // true|false: zoom in on search result? gv_options.searchbox_options.position = (mobile_browser?['BOTTOM_LEFT',2,48]:['TOP_LEFT',50,4]); // [Google anchor name, relative x, relative y] gv_options.searchbox_options.draggable = true; // true|false: can it be moved around the screen? gv_options.searchbox_options.collapsible = true; // true|false: can it be collapsed by double-clicking its top bar? gv_options.searchbox_options.callback = 'var click = {latlng:L.latLng({lat},{lon})}; var size = {size}; if (size < 100000) { GVS.Point_Query(click,{name},{address}); }'; function GV_Import_Uploaded_Data(file) { GVS.Import_Uploaded_Data(file); } </script> <script type="text/javascript" src="/leaflet/functions.js?"></script> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript" src="draw-l.js?time=1732455031"></script> <style type="text/css"> /* Put any custom style definitions here (e.g., .gv_marker_info_window, .gv_marker_info_window_name, .gv_marker_list_item, .gv_tooltip, .gv_label, etc.) */ .gv_label { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; background:#333333; border:1px solid black; padding:1px; font:9px Verdana,sans-serif; color:white; font-weight:normal; } </style>  <script type="text/javascript"> function GV_Map() { GV_Setup_Map(); GV_Place_Div('gv_sandbox_link',2,40,'BOTTOM_RIGHT'); if (mobile_browser) { GV_Build_And_Place_Draggable_Box({base_id:'gv_elements',class_name:'gv_elements',position:['TOP_RIGHT',2,32],draggable:true,collapsible:true}); $('gv_elements_list').style.maxHeight = '90px'; $('gv_searchbox').style.maxHeight = (document.documentElement.clientHeight < 300) ? (document.documentElement.clientHeight-80)+'px' : '175px'; $('gpsvisualizer_home_link').removeAttribute('href'); // to prevent stray clicks // $('sandbox_subtitle').style.display = 'none'; $('sandbox_description').style.display = 'none'; } else { GV_Build_And_Place_Draggable_Box({base_id:'gv_elements',class_name:'gv_elements',position:['TOP_RIGHT',5,32],draggable:true,collapsible:true}); } GVS.Initialize(); // start up the Sandbox code GV_Finish_Map(); window.setTimeout("Sandbox_Create_Center_Marker()",1); // looks for a "marker" parameter in the URL } GV_Map(); // execute the above code </script> </body> </html>