View Topic

Any Idea How This Is done?

Anchor
Posts: 51
Joined: April 25th 2015
Anchor
On this site their is a script of some sort http://www.gpsxchange.com/phpBB2/index.php that allows you to view a GPX file on a map that has been uploaded to the gpsxchange.com website.

Go here http://www.gpsxchange.com/phpBB2/viewtopic.php?t=5037 click on View On Map for an example.

So I assume the script is fetching the uploaded attachment (a GPX file) then opening the GPX in Google Maps.

Any ideas how this done? gpsxchange.com is all but dead I tried contacting the site owner but received no reply.

I like the feature of just clicking a link and it taking the user to Google Maps and displaying the GPS track automatically and would like to add it to my website currently users upload GPX files and kmz files that then can be downloaded and opened in Google Earth the above described mod would make life much easier for users.

Thanks in advance.
Dion
Posts: 123
Joined: December 29th 2014
AVATAR
Dion
Your link doesn't work because it appears that one must be logged in to see it. However, this is the script used by the site to do what you want:

Select allCode
///////////////////////////////////////////////////////////////////////////////
// loadgpx.x.js
//
// Javascript object to load GPX-format GPS data into Google Maps.
//
// History:
// revision 1 - Initial implementation
// revision 2 - Removed LoadGPXFileIntoGoogleMap and made it the callers
// responsibility. Added more options (colour, width, delta).
// revision 3 - Waypoint parsing now compatible with Firefox.
// revision 4 - Upgraded to Google Maps API version 2. Tried changing the way
// that the map calculated the way the center and zoom level, but
// GMAP API 2 requires that you center and zoom the map first.
// I have left the bounding box calculations commented out in case
// they might come in handy in the future.
//
// Author: Kaz Okuda
// URI: http://notions.okuda.ca/geotagging/projects-im-working-on/gpx-viewer/
//
///////////////////////////////////////////////////////////////////////////////

function GPXParser(xmlDoc, map)
{
this.xmlDoc = xmlDoc;
this.map = map;
this.trackcolour = "#ff00ff"; // red
this.trackwidth = 5;
this.mintrackpointdelta = 0.0001
}

// Set the colour of the track line segements.
GPXParser.prototype.SetTrackColour = function(colour)
{
this.trackcolour = colour;
}

// Set the width of the track line segements
GPXParser.prototype.SetTrackWidth = function(width)
{
this.trackwidth = width;
}

// Set the minimum distance between trackpoints.
// Used to cull unneeded trackpoints from map.
GPXParser.prototype.SetMinTrackPointDelta = function(delta)
{
this.mintrackpointdelta = delta;
}

GPXParser.prototype.TranslateName = function(name)
{
if (name == "wpt")
{
return "Waypoint";
}
else if (name == "trkpt")
{
return "Track Point";
}
}


GPXParser.prototype.CreateMarker = function(point)
{
var lon = parseFloat(point.getAttribute("lon"));
var lat = parseFloat(point.getAttribute("lat"));
var html = "";

if (point.getElementsByTagName("html").length > 0)
{
for (i=0; i<point.getElementsByTagName("html").item(0).childNodes.length; i++)
{
html += point.getElementsByTagName("html").item(0).childNodes[i].nodeValue;
}
}
else
{
// Create the html if it does not exist in the point.
html = "<b>" + this.TranslateName(point.nodeName) + "</b><br>";
var attributes = point.attributes;
var attrlen = attributes.length;
for (i=0; i<attrlen; i++)
{
html += attributes.item(i).name + " = " + attributes.item(i).nodeValue + "<br>";
}

if (point.hasChildNodes)
{
var children = point.childNodes;
var childrenlen = children.length;
for (i=0; i<childrenlen; i++)
{
// Ignore empty nodes
if (children[i].nodeType != 1) continue;
html += children[i].nodeName + " = " + children[i].firstChild.nodeValue + "<br>";
}
}
}

var marker = new GMarker(new GLatLng(lat,lon));
GEvent.addListener(marker, "click",
function()
{
marker.openInfoWindowHtml(html);
}
);

this.map.addOverlay(marker);


// All methods that add items to the map return the bounding box of what they added.
//var latlng = new GLatLng(lat,lon);
//return new GLatLngBounds(latlng,latlng);
}


GPXParser.prototype.AddTrackSegmentToMap = function(trackSegment, colour, width)
{
//var latlngbounds = new GLatLngBounds();

var trackpoints = trackSegment.getElementsByTagName("trkpt");
if (trackpoints.length == 0)
{
return; //latlngbounds;
}

var pointarray = [];

// process first point
var lastlon = parseFloat(trackpoints[0].getAttribute("lon"));
var lastlat = parseFloat(trackpoints[0].getAttribute("lat"));
var latlng = new GLatLng(lastlat,lastlon);
pointarray.push(latlng);
//latlngbounds.extend(latlng);

// Create a marker at the begining of each track segment
//this.CreateMarker(trackpoints[0]);

for (var i=1; i < trackpoints.length; i++)
{
var lon = parseFloat(trackpoints[i].getAttribute("lon"));
var lat = parseFloat(trackpoints[i].getAttribute("lat"));

// Verify that this is far enough away from the last point to be used.
var latdiff = lat - lastlat;
var londiff = lon - lastlon;
if ( Math.sqrt(latdiff*latdiff + londiff*londiff) > this.mintrackpointdelta )
{
lastlon = lon;
lastlat = lat;
latlng = new GLatLng(lat,lon);
pointarray.push(latlng);
//latlngbounds.extend(latlng);
}

}

var polyline = new GPolyline(pointarray, colour, width);

this.map.addOverlay(polyline);

// All methods that add items to the map return the bounding box of what they added.
//return latlngbounds;
}

GPXParser.prototype.AddTrackToMap = function(track, colour, width)
{
var segments = track.getElementsByTagName("trkseg");
//var latlngbounds = new GLatLngBounds();
for (var i=0; i < segments.length; i++)
{
var segmentlatlngbounds = this.AddTrackSegmentToMap(segments[i], colour, width);
//this.AddTrackSegmentToMap(segments[i], colour, width);
//latlngbounds.extend(segmentlatlngbounds.getSouthWest());
//latlngbounds.extend(segmentlatlngbounds.getNorthEast());
}

// All methods that add items to the map return the bounding box of what they added.
//return latlngbounds;
}

GPXParser.prototype.CenterAndZoom = function (trackSegment, maptype)
{

var pointlist = new Array("trkpt", "wpt");
var minlat = 0;
var maxlat = 0;
var minlon = 0;
var maxlon = 0;

for (var pointtype=0; pointtype < pointlist.length; pointtype++)
{
// Center the map and zoom on the given segment.
var trackpoints = trackSegment.getElementsByTagName(pointlist[pointtype]);

// If the min and max are uninitialized then initialize them.
if ( (trackpoints.length > 0) && (minlat == maxlat) && (minlat == 0) )
{
var lon1 = parseFloat(trackpoints[0].getAttribute("lon"));
var lat1 = parseFloat(trackpoints[0].getAttribute("lat"));


if (!((lat1 == 38.855550 && lon1 == -94.799017)
|| (lat1 == 38.855548 && lon1 == -94.799018)
|| (lat1 == 50.982883 && lon1 == -1.463900)
|| (lat1 == 25.061783 && lon1 == 121.640267)))
{
minlat = lat1;
maxlat = lat1;
minlon = lon1;
maxlon = lon1;
}
}

for (var i=0; i < trackpoints.length; i++)
{
var lon = parseFloat(trackpoints[i].getAttribute("lon"));
var lat = parseFloat(trackpoints[i].getAttribute("lat"));

if (!((lat == 38.855550 && lon == -94.799017)
|| (lat == 38.855548 && lon == -94.799018)
|| (lat == 50.982883 && lon == -1.463900)
|| (lat == 25.061783 && lon == 121.640267)))
{
if (lon < minlon) minlon = lon;
if (lon > maxlon) maxlon = lon;
if (lat < minlat) minlat = lat;
if (lat > maxlat) maxlat = lat;
}
}
}

if ( (minlat == maxlat) && (minlat = 0) )
{
this.map.setCenter(new GLatLng(49.327667, -122.942333), 14);
return;
}

// Center around the middle of the points
var centerlon = (maxlon + minlon) / 2;
var centerlat = (maxlat + minlat) / 2;

var bounds = new GLatLngBounds(new GLatLng(minlat, minlon), new GLatLng(maxlat, maxlon));

this.map.setCenter(new GLatLng(centerlat, centerlon), this.map.getBoundsZoomLevel(bounds), maptype);
}

GPXParser.prototype.CenterAndZoomToLatLngBounds = function (latlngboundsarray)
{
var boundingbox = new GLatLngBounds();
for (var i=0; i<latlngboundsarray.length; i++)
{
if (!latlngboundsarray[i].isEmpty())
{
boundingbox.extend(latlngboundsarray[i].getSouthWest());
boundingbox.extend(latlngboundsarray[i].getNorthEast());
}
}

var centerlat = (boundingbox.getNorthEast().lat() + boundingbox.getSouthWest().lat()) / 2;
var centerlng = (boundingbox.getNorthEast().lng() + boundingbox.getSouthWest().lng()) / 2;
this.map.setCenter(new GLatLng(centerlat, centerlng), this.map.getBoundsZoomLevel(boundingbox));
}


GPXParser.prototype.AddTrackpointsToMap = function ()
{
var tracks = this.xmlDoc.documentElement.getElementsByTagName("trk");
//var latlngbounds = new GLatLngBounds();

for (var i=0; i < tracks.length; i++)
{
this.AddTrackToMap(tracks[i], this.trackcolour, this.trackwidth);
//var tracklatlngbounds = this.AddTrackToMap(tracks[i], this.trackcolour, this.trackwidth);
//latlngbounds.extend(tracklatlngbounds.getSouthWest());
//latlngbounds.extend(tracklatlngbounds.getNorthEast());
}

// All methods that add items to the map return the bounding box of what they added.
//return latlngbounds;
}

GPXParser.prototype.AddWaypointsToMap = function ()
{
var waypoints = this.xmlDoc.documentElement.getElementsByTagName("wpt");
//var latlngbounds = new GLatLngBounds();

for (var i=0; i < waypoints.length; i++)
{
this.CreateMarker(waypoints[i]);
//var waypointlatlngbounds = this.CreateMarker(waypoints[i]);
//latlngbounds.extend(waypointlatlngbounds.getSouthWest());
//latlngbounds.extend(waypointlatlngbounds.getNorthEast());
}

// All methods that add items to the map return the bounding box of what they added.
//return latlngbounds;
}
Anchor
Posts: 51
Joined: April 25th 2015
Anchor
What the?How the?
You script guys cease to amaze me, care to share how you found the script?

So I did some searching on the web for 'phpbb loadgpx.x.js' trying to figure out how to make it work on my current site that is currently running phpbb 3.0.12 but had no luck so now you know I gotta ask how do I install this on my site.

Sorry to bother you guys I know your busy as hell already and I know how this feels I have got incredibly busy in my personal life all the sudden and have a tough time trying to enjoy my hobbies and projects.

Thanks again.

haha genius...
Anchor
Posts: 51
Joined: April 25th 2015
Anchor
Anybody know how to turn this into a Extension or how to install in PHPBB? I would really like to implement this feature in my website.

Thanks in advance.
Leinad4Mind
Posts: 25
Joined: June 2nd 2015
Leinad4Mind
Anchor
Posts: 51
Joined: April 25th 2015
Anchor
Leinad4Mind said:

Hi
I was looking for specific instructions on how to install the above code into PHPBB an Extension would be great.

Go here http://www.gpsxchange.com/phpBB2/viewtopic.php?t=5037 click on "View On Map" for an example, also see my attached picture (Red Arrow) where to click once you get to the page, how it works is it adds an option below the Download link for attached .GPX files in a post.

This allows users to view the file before they download without having to download the file and open in a GPX file viewer.

Thanks again.
You do not have the required permissions to view the files attached to this post.
Leinad4Mind
Posts: 25
Joined: June 2nd 2015
Leinad4Mind
I can't see that. I don't have an account.
Dion
Posts: 123
Joined: December 29th 2014
AVATAR
Dion
Anchor said:
Leinad4Mind said:

Hi
I was looking for specific instructions on how to install the above code into PHPBB an Extension would be great.

The installation instructions are on the GitHub page. You'll probably need to customize the installation code to match your site's needs.
Anchor
Posts: 51
Joined: April 25th 2015
Anchor
Dion said:
Anchor said:
Leinad4Mind said:

Hi
I was looking for specific instructions on how to install the above code into PHPBB an Extension would be great.

The installation instructions are on the GitHub page. You'll probably need to customize the installation code to match your site's needs.


Thats why I was asking if someone could make an extension if there is installation instructions on the Github page I missed them I have no idea how to do any of this I will need detailed instructions Open this file go to line xxx insert this code here save the file close, create this new file insert this code save to xxx xxx directory....