GPX Editor JS

track

waypoint

export

import

enter location or address

fit

name

extensions

color
width & opacity
px %

trackpoint range

distance: N/A meters.

# - # /0

trackpoint order

# /0 pan

insert trkpt on

self
click & move end
click

lat

lon

~~extensions~~

extensions

extensions encode

Google Maps API key

map height

page title

map controllers

GSmallMapControl
GLargeMapControl
GSmallZoomControl
GScaleControl
GMapTypeControl
GOverviewMapControl

map type of initial view
map satellite hybrid
site menu

text contents

created by ...

track waypoint

selected

unselected

pin number pin size

Templates

GPX Viewer JS Template:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="ja" lang="ja"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<title><TMPL_VAR NAME=title></title>
<style type="text/css">
v\:* { behavior:url(#default#VML); }
html, body { width:100%; height:100%; }
html { overflow: hidden; }
body {
    margin: 0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    background-color:#ffffff;
    }
#contents {
    margin: 0px 0px 0px 0px;
    padding: 0px 1em 0px 2em;
    margin-right: 220px;
    height: 100%;
    overflow: auto;
    position: relative;
}
    #header {
        padding: 0.5em 0px 0.5em 0px;
        font-weight: bold;
        font-size: x-large;
    }
    #map {
        margin: 0px 0px 0px 0px;
        padding: 0px;
        height: <TMPL_VAR NAME=height>;
        position: relative;
        top: 0px;
        left: 0px;
    }
    #text {
        padding: 1em 0px 1em 0px;
    }
#menu {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
    height: 99%;
    padding: 0px 5px 0px 10px;
    overflow: auto;
    background-color:#ffffff;
}
.InfoWindow-title {
    font-weight: bold;
    font-size: large;
    border-bottom: solid thin #cccccc;
    margin-bottom: 0.5em;
}
.InfoWindow-body {
    font-size: medium;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<TMPL_VAR NAME=key>">
</script>
<script type="text/javascript">
var DEFAULT_LAT = 35.6841306;
var DEFAULT_LON = 139.774103;
var DEFAULT_ZOOM = 8;
/* following parameters are for Encoded Polyline
   if it has to be generated from point array */
var DFLT_ZOOMFACTOR = 2;
var DFLT_NUMLEBELS = 18;
var DFLT_BASEDISTANCE = 500000;

var MAP2 = null;
var GPX = <TMPL_VAR NAME=json>;

// create checkbox for item of waypoint
        var tag_input = document.createElement('input');
        tag_input.setAttribute('type','checkbox');
        tag_input.setAttribute('value','1');
        tag_input.checked = true;
        tag_input.defaultChecked = tag_input.checked; /* defaultChecked is for ie */
        tag_input._marker = createMarker(
                GPX.wpt[i].lat,
                GPX.wpt[i].lon,
                GPX.wpt[i].name,
                GPX.wpt[i].desc );
        GEvent.addDomListener(tag_input, 'click', function (){
                this.blur(); /* click and blur to firing onchange event asap on ie */
            } );
        GEvent.addDomListener(tag_input, 'change', function (){
                if( this.checked ){
                    MAP2.removeOverlay( this._marker );
                    MAP2.addOverlay( this._marker );
                }else{
                    MAP2.closeInfoWindow();
                    MAP2.removeOverlay( this._marker );
                }
            } );
        if( tag_input.checked ){
            MAP2.addOverlay( tag_input._marker );
        }

// create clickable text label for item of waypoint
        var tag_a = document.createElement('a');
        tag_a.appendChild(document.createTextNode(' '+ GPX.wpt[i].name));
        tag_a.style.cursor = 'pointer';
        tag_a._checkbox = tag_input;
        GEvent.addDomListener(tag_a, 'click', function (){
                this._checkbox.checked = true;
                GEvent.trigger( this._checkbox, 'change' );
                GEvent.trigger( this._checkbox._marker, 'click' );
            } );

// put on menu
        wpts.appendChild(tag_input);
        wpts.appendChild(tag_a);
        wpts.appendChild(document.createElement('br'));

++i;
        setTimeout( "__appendWaypoint("+i+");", 0 );
    }
}
/* Tracks */
function createTracks(){
    if( GPX.trk.length < 1 ){
        var forms = document.getElementsByTagName('form');
        for( var i = 0; i < forms.length; ++i ){
            if( forms[i].getAttribute('id') == 'trks' ){
                forms[i].parentNode.removeChild(forms[i]);
                break;
            }
        }
    }else{
        setTimeout('__appendTrack(0)',0);
    }
}
function __appendTrack(i){
    if( i < GPX.trk.length ){
        var trks = document.getElementById('trks');

// create checkbox wrapped span tag for item of track
        var tag_input = document.createElement('input');
        tag_input.setAttribute('type','checkbox');
        tag_input.setAttribute('value','1');
        tag_input.checked = true;
        tag_input.defaultChecked = tag_input.checked; /* defaultChecked is for ie */
        var tag_span = document.createElement('span');
        tag_span.style.border = 'solid 2px '+ GPX.trk[i].extensions.color;
        tag_span.style.backgroundColor = GPX.trk[i].extensions.color;
        tag_input._index = i;
        tag_input._encodedPolyline = createEncodedPolyline(
                ( GPX.trk[i].extensions.gpolyline ? GPX.trk[i].extensions.gpolyline : GPX.trk[i].trkseg.trkpt ),
                GPX.trk[i].extensions.color,
                GPX.trk[i].extensions.width,
                GPX.trk[i].extensions.opacity );
        tag_span.appendChild(tag_input);
        GEvent.addDomListener(tag_input, 'click', function (){
                this.blur(); /* click and blur to firing onchange event asap on ie */
            } );
        GEvent.addDomListener(tag_input, 'change', function (){
                if( this.checked ){
                    MAP2.removeOverlay( this._encodedPolyline );
                    MAP2.addOverlay( this._encodedPolyline );
                }else{
                    MAP2.removeOverlay( this._encodedPolyline );
                }
            } );
        if( tag_input.checked ){
            try{
                MAP2.addOverlay( tag_input._encodedPolyline );
            }catch(e){
                tag_input.checked = false;
                tag_input.disabled = true;
            }
        }

// create clickable text label for item of track
        var tag_a = document.createElement('a');
        tag_a.appendChild(document.createTextNode(' '+ GPX.trk[i].name));
        tag_a.innerHTML 
        tag_a.style.cursor = 'pointer';
        tag_a._bounds = GPX.trk[i].extensions.bounds
                      ? getGLatLngBounds(GPX.trk[i].extensions.bounds)
                      : getGLatLngBounds(GPX.trk[i].trkseg.trkpt);
        tag_a._checkbox = tag_input;
        GEvent.addDomListener(tag_a, 'click', function (){
                    try{
                        var c = this._bounds.getCenter();
                        MAP2.setCenter( new GLatLng( c.lat(), c.lng() ), MAP2.getBoundsZoomLevel(this._bounds) );
                        this._checkbox.checked = true;
                        GEvent.trigger(this._checkbox, 'change');
                    }catch(e){
                        true;
                    }
                } );

// put on menu
        trks.appendChild(tag_span);
        trks.appendChild(tag_a);
        trks.appendChild(document.createElement('br'));

++i;
        setTimeout('__appendTrack('+i+');',0);
    }
}
// Create the GPolyline from encoded points and levels strings.
function createEncodedPolyline(/* pts array or boundsType */trkpts,c,w,t){
    var encoded = trkpts;
    if( trkpts instanceof Array ){
        encoded = _createEncodedPointsAndLevels(trkpts,{"zoomFactor":DFLT_ZOOMFACTOR,"numLevels":DFLT_NUMLEBELS,"baseDistance":DFLT_BASEDISTANCE});
    }
    return GPolyline.fromEncoded( {
        "color": c,
        "weight": w,
        "opacity": (t/100),
        "points": encoded.points,
        "levels": encoded.levels,
        "zoomFactor": encoded.zoomFactor,
        "numLevels": encoded.numLevels
        } );    
}
function _createEncodedPointsAndLevels(/* pts array */trkpts,opts){
    // parse arguments
    var zoomFactor   = DFLT_ZOOMFACTOR;
    var numLevels    = DFLT_NUMLEBELS;
    var baseDistance = DFLT_BASEDISTANCE;
    if( opts ){
        if( opts.zoomFactor && opts.numLevels ){
            zoomFactor = opts.zoomFactor;
            numLevels  = opts.numLevels;
        }
        if( opts.baseDistance ){
            baseDistance = opts.baseDistance;
        }
    }

// 2. construct map
    MAP2 = new GMap2( document.getElementById('map') );
    MAP2.clearOverlays();
<TMPL_IF NAME=GSmallMap>    MAP2.addControl( new GSmallMapControl() );
</TMPL_IF><TMPL_IF NAME=GLargeMap>    MAP2.addControl( new GLargeMapControl() );
</TMPL_IF><TMPL_IF NAME=GSmallZoom>    MAP2.addControl( new GSmallZoomControl() );
</TMPL_IF><TMPL_IF NAME=GScale>    MAP2.addControl( new GScaleControl() );
</TMPL_IF><TMPL_IF NAME=GMapType>    MAP2.addControl( new GMapTypeControl() );
</TMPL_IF><TMPL_IF NAME=GOverviewMap>    MAP2.addControl( new GOverviewMapControl() );
</TMPL_IF>

// 3. set center and zoom
    var bounds;
    if( GPX.metadata && GPX.metadata.bounds ){
        bounds = getGLatLngBounds(GPX.metadata.bounds);
    }else{
        var pts = [];
        for( var i=0; i < GPX.wpt.length; ++i ){
            pts.push( GPX.wpt[i] );
        }
        for( var i=0; i < GPX.trk.length; ++i ){
            if( GPX.trk[i].extensions.bounds ){
                var b = GPX.trk[i].extensions.bounds;
                pts.push({"lat":b.minlat,"lon":b.minlon});
                pts.push({"lat":b.maxlat,"lon":b.maxlon});
            }else{
                for( var k=0; k < GPX.trk[i].trkseg.trkpt.length; ++k ){
                    pts.push( GPX.trk[i].trkseg.trkpt[k] );
                }
            }
        }
        bounds = getGLatLngBounds(pts);
    }
    var cntrlat = DEFAULT_LAT;
    var cntrlon = DEFAULT_LON;
    var zoomlvl = DEFAULT_ZOOM;
    if( bounds != null ){
        cntrlat = bounds.getCenter().lat();
        cntrlon = bounds.getCenter().lng();
        zoomlvl = MAP2.getBoundsZoomLevel(bounds);
    }
    MAP2.setCenter( new GLatLng(cntrlat, cntrlon), zoomlvl );

// 4. set map type
<TMPL_IF NAME=isSatelliteMap>    MAP2.setMapType(G_SATELLITE_MAP);
<TMPL_ELSE><TMPL_IF NAME=isHybridMap>    MAP2.setMapType(G_HYBRID_MAP);
<TMPL_ELSE>    MAP2.setMapType(G_NORMAL_MAP);
</TMPL_IF></TMPL_IF>

// 5. create menu for track and waypoint
    var steps = [];
    steps.push(createTracks);
    steps.push(createWaypoints);
    serialProcedureManager();
    self.serialProcedure = function (i){
        (steps[i])();
        ++i;
        if( i < steps.length ){
            setTimeout("self.serialProcedure("+i+")",0);
        }
    }
    function serialProcedureManager(){
        if( 0 < steps.length ){
            setTimeout("self.serialProcedure(0)",0);
        }
    }
}
</script>
</head><body onload="initGPXViewerJS();" onunload="GUnload();">

<TMPL_VAR NAME=menu>

<form name="trks" id="trks" action="void(0);" onsubmit="return false;">
        <p>Tracks</p>
    </form>

<form name="wpts" id="wpts" action="void(0);" onsubmit="return false;">
        <p>Waypoints</p>
    </form>

<TMPL_IF NAME=minibanner>
    <p style="text-align: center; margin-right: 1em; margin-top: 2em;">
        <span style="font-size: x-small; padding: 0.5em; background-color: #ffffff; color: #333333; border: 1px solid #999999;">
            created by <a href="<TMPL_VAR NAME=url>" target="hwat"><TMPL_VAR NAME=creator></a> - <TMPL_VAR NAME=version>
        </span>
    </p>
<TMPL_ELSE>

</TMPL_IF>
</div>

</body></html>

KML Template:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
<Document xmlns:xlink="http://www.w3/org/1999/xlink">
    <name><TMPL_VAR NAME=creator></name>
<open>1</open>
<Style id="track">
<IconStyle>
<Icon xlink:href="root://icons/bitmap-4.png?x=128&amp;y=0&amp;w=32&amp;h=32">
<href>root://icons/palette-4.png</href>
<x>128</x>
<w>32</w>
<h>32</h>
</Icon>
</IconStyle>
</Style>
<Style id="waypoint">
<IconStyle>
<Icon xlink:href="root://icons/bitmap-4.png?x=160&amp;y=0&amp;w=32&amp;h=32">
<href>root://icons/palette-4.png</href>
<x>160</x>
<w>32</w>
<h>32</h>
</Icon>
</IconStyle>
</Style>
<Style id="lineStyle">
<LineStyle>
<color>64eeee17</color>
<width>6</width>
</LineStyle>
</Style>
<Style id="route">
<IconStyle>
<Icon xlink:href="root://icons/bitmap-4.png?x=160&amp;y=0&amp;w=32&amp;h=32">
<href>root://icons/palette-4.png</href>
<x>160</x>
<w>32</w>
<h>32</h>
</Icon>
</IconStyle>
</Style>
<Folder>
    <name>Waypoints</name>
<visibility>1</visibility>
<TMPL_LOOP NAME=Waypoints><Placemark>
<name><![CDATA[<TMPL_VAR NAME=name>]]></name>
<description><![CDATA[<TMPL_VAR NAME=desc>]]></description>
<styleUrl>#waypoint</styleUrl>
<Point>
<coordinates><TMPL_VAR NAME=lon>,<TMPL_VAR NAME=lat>,0</coordinates>
</Point>
</Placemark>
</TMPL_LOOP></Folder>
<Folder>
    <name>Tracks</name>
<open>1</open>
<TMPL_LOOP NAME=Track><Folder>
<name><![CDATA[<TMPL_VAR NAME=name>]]></name>
<open>1</open>
<Folder>
<TMPL_LOOP NAME=TrackPoints><name>Points</name>
<Placemark>
<styleUrl>#track</styleUrl>
<Point>
<coordinates><TMPL_VAR NAME=lon>,<TMPL_VAR NAME=lat>,<TMPL_VAR NAME=ele></coordinates>
</Point>
<TimeInstant>
<timePosition><TMPL_VAR NAME=time></timePosition>
</TimeInstant>
</Placemark>
</TMPL_LOOP></Folder>
<Placemark>
<styleUrl>#lineStyle</styleUrl>
    <name>Path</name>
<TMPL_IF NAME=hasExtensions><Style>
<LineStyle>
<color><TMPL_VAR NAME=color></color>
<width><TMPL_VAR NAME=width></width>
</LineStyle>
</Style>
</TMPL_IF><MultiGeometry>
<LineString>
<coordinates><TMPL_VAR NAME=coordinates></coordinates>
</LineString>
</MultiGeometry>
</Placemark>
</Folder>
</TMPL_LOOP></Folder>
<Folder>
    <name>Routes</name>
</Folder>
</Document>
</kml>

GPX Template:

<?xml version="1.0" encoding="UTF-8"?>
<gpx
 version="1.1"
 creator="<TMPL_VAR NAME=creator>"
 xmlns="http://www.topografix.com/GPX/1/1"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd">
<metadata>
 <time><TMPL_VAR NAME=time></time>
<TMPL_IF NAME=bounds> <bounds minlat="<TMPL_VAR NAME=minlat>" minlon="<TMPL_VAR NAME=minlon>" maxlat="<TMPL_VAR NAME=maxlat>" maxlon="<TMPL_VAR NAME=maxlon>" />
</TMPL_IF></metadata>
<TMPL_LOOP NAME=wpt><wpt lat="<TMPL_VAR NAME=lat>" lon="<TMPL_VAR NAME=lon>">
<name><![CDATA[<TMPL_VAR NAME=name>]]></name>
<desc><![CDATA[<TMPL_VAR NAME=desc>]]></desc>
</wpt>
</TMPL_LOOP><TMPL_LOOP NAME=trk><trk>
<name><![CDATA[<TMPL_VAR NAME=name>]]></name>
<number><TMPL_VAR NAME=number></number>
<trkseg>
<TMPL_LOOP NAME=trkpt><trkpt lat="<TMPL_VAR NAME=lat>" lon="<TMPL_VAR NAME=lon>">
<ele><TMPL_VAR NAME=ele></ele>
<time><TMPL_VAR NAME=time></time>
</trkpt>
</TMPL_LOOP></trkseg>
</trk>
</TMPL_LOOP></gpx>

AppleScript Template:

-- This is source text of AppleScript
-- was generated by <TMPL_VAR NAME=creator>
-- at <TMPL_VAR NAME=time>

try
	choose folder with prompt "<TMPL_VAR NAME=prompt>"
	set output_folder to result
on error
	return
end try

set WPTS to {}
<TMPL_LOOP NAME=wpt>set end of WPTS to {LAT:"<TMPL_VAR NAME=lat>", LON:"<TMPL_VAR NAME=lon>", NAMAE:"<TMPL_VAR NAME=name>", DESC:"<TMPL_VAR NAME=desc>"}
</TMPL_LOOP>
set TRKS to {}
<TMPL_LOOP NAME=trk>-- trk #<TMPL_VAR NAME=number>
set end of TRKS to {TRKPT:{}, NAMAE:"<TMPL_VAR NAME=name>"}
set CURRENT_TRK to <TMPL_VAR NAME=number>
<TMPL_LOOP NAME=trkpt>set end of TRKPT of (item CURRENT_TRK of TRKS) to {LAT:"<TMPL_VAR NAME=lat>", LON:"<TMPL_VAR NAME=lon>"}
</TMPL_LOOP>
</TMPL_LOOP>
set TRKS_LENGTH to length of TRKS

tell application "ProAtlasX"
	set scale to "<TMPL_VAR NAME=scale>"
	
	-- make Waypoints
	repeat with w from 1 to length of WPTS
		set LAT_WGS84 to my asValidNumberOfString(LAT of (item w of WPTS))
		set LON_WGS84 to my asValidNumberOfString(LON of (item w of WPTS))
		set LAT_LON_TOKYO to my CONVERT_WGS84_TO_TOKYO(LAT_WGS84, LON_WGS84)
		set A to LAT of LAT_LON_TOKYO
		set B to LON of LAT_LON_TOKYO
		locate to (A as string) & ", " & (B as string)
		
		set MEMO_NAME to NAMAE of (item w of WPTS)
		set MEMOOBJCT to (make new memo with properties {name:MEMO_NAME})
		tell memo MEMO_NAME
			set use filename to no
			set user text to NAMAE of (item w of WPTS)
			set text contents of it to (DESC of item w of WPTS)
			set pin number to <TMPL_VAR NAME=pin_number>
			set pin size to <TMPL_VAR NAME=pin_size>
			set object display to yes
			set title display to yes
		end tell
		set targetFile to ((output_folder as string) & MEMO_NAME & ".mpd")
		close MEMOOBJCT saving in file targetFile with replace
	end repeat
	
	-- make Tracks
	repeat with t from 1 to TRKS_LENGTH
		set TRKPT to TRKPT of item t of TRKS
		set TRKPT_LEN to length of TRKPT
		begin trace upto TRKPT_LEN
		repeat with i from 1 to TRKPT_LEN
			set LAT_WGS84 to my asValidNumberOfString(LAT of (item i of TRKPT))
			set LON_WGS84 to my asValidNumberOfString(LON of (item i of TRKPT))
			set LAT_LON_TOKYO to my CONVERT_WGS84_TO_TOKYO(LAT_WGS84, LON_WGS84)
			set A to LAT of LAT_LON_TOKYO
			set B to LON of LAT_LON_TOKYO
			trace to (A as string) & ", " & (B as string)
		end repeat
		finish trace save track as (NAMAE of item t of TRKS & ".mpd")
	end repeat
end tell

on asValidNumberOfString(strNum)
	set tmp to text item delimiters
	set strNum to (strNum as string) & ".0"
	set text item delimiters to "."
	set {theUpper, theDowner} to text items of strNum
	set text item delimiters to tmp
	
	set theDowner to text 1 thru 13 of (theDowner & "0000000000000")
	return (theUpper & "." & theDowner) as number
end asValidNumberOfString

on CONVERT_WGS84_TO_TOKYO(LAT_WGS84, LON_WGS84)
	set LAT_TOKYO to (LAT_WGS84 + 1.0696E-4 * LAT_WGS84 - 1.7467E-5 * LON_WGS84 - 0.004602)
	set LON_TOKYO to (LON_WGS84 + 4.6047E-5 * LAT_WGS84 + 8.3049E-5 * LON_WGS84 - 0.010041)
	return {LAT:LAT_TOKYO, LON:LON_TOKYO}
end CONVERT_WGS84_TO_TOKYO

on CONVERT_TOKYO_TO_WGS84(LAT_TOKYO, LON_TOKYO)
	set LAT_WGS84 to (LAT_TOKYO - 1.0695E-4 * LAT_TOKYO + 1.7464E-5 * LON_TOKYO + 0.0046017)
	set LON_WGS84 to (LON_TOKYO - 4.6038E-5 * LAT_TOKYO - 8.3043E-5 * LON_TOKYO + 0.01004)
	return {LAT:LAT_WGS84, LON:LON_WGS84}
end CONVERT_TOKYO_TO_WGS84