Skip to content

Besides the colour, opacity could also be useful #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FleXoft wants to merge 1 commit into
base: next
Choose a base branch
from
Open

Besides the colour, opacity could also be useful #7

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 28 additions & 27 deletions loadgpx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@
// 5/28/2010 - Upgraded to Google Maps API v3 and refactored the file a bit.
// (Chris Peplin)
//
// 10/17/2018 - Added opacity functionality
// (_flex, Fleischmann György)
//
// Author: Kaz Okuda
// URI: http://notions.okuda.ca/geotagging/projects-im-working-on/gpx-viewer/
//
Expand All @@ -50,8 +53,9 @@
function GPXParser(xmlDoc, map) {
this.xmlDoc = xmlDoc;
this.map = map;
this.trackcolour = "#ff00ff"; // red
this.trackcolour = "#ff0000"; // red
this.trackwidth = 5;
this.trackopacity = 1;
this.mintrackpointdelta = 0.0001
}

Expand All @@ -60,6 +64,11 @@ GPXParser.prototype.setTrackColour = function(colour) {
this.trackcolour = colour;
}

// Set the opacity of the track line segements.
GPXParser.prototype.setTrackOpacity = function( opacity ) {
this.trackopacity = opacity;
}

// Set the width of the track line segements
GPXParser.prototype.setTrackWidth = function(width) {
this.trackwidth = width;
Expand All @@ -83,7 +92,6 @@ GPXParser.prototype.translateName = function(name) {
}
}


GPXParser.prototype.createMarker = function(point) {
var lon = parseFloat(point.getAttribute("lon"));
var lat = parseFloat(point.getAttribute("lat"));
Expand All @@ -101,8 +109,7 @@ GPXParser.prototype.createMarker = function(point) {
var attributes = point.attributes;
var attrlen = attributes.length;
for(i = 0; i < attrlen; i++) {
html += attributes.item(i).name + " = " +
attributes.item(i).nodeValue + "<br>";
html += attributes.item(i).name + " = " + attributes.item(i).nodeValue + "<br>";
}

if(point.hasChildNodes) {
Expand All @@ -112,8 +119,7 @@ GPXParser.prototype.createMarker = function(point) {
// Ignore empty nodes
if(children[i].nodeType != 1) continue;
if(children[i].firstChild == null) continue;
html += children[i].nodeName + " = " +
children[i].firstChild.nodeValue + "<br>";
html += children[i].nodeName + " = " + children[i].firstChild.nodeValue + "<br>";
}
}
}
Expand All @@ -133,8 +139,7 @@ GPXParser.prototype.createMarker = function(point) {
});
}

GPXParser.prototype.addTrackSegmentToMap = function(trackSegment, colour,
width) {
GPXParser.prototype.addTrackSegmentToMap = function(trackSegment, colour, width, opacity) {
var trackpoints = trackSegment.getElementsByTagName("trkpt");
if(trackpoints.length == 0) {
return;
Expand Down Expand Up @@ -169,19 +174,19 @@ GPXParser.prototype.addTrackSegmentToMap = function(trackSegment, colour,
path: pointarray,
strokeColor: colour,
strokeWeight: width,
strokeOpacity: opacity,
map: this.map
});
}

GPXParser.prototype.addTrackToMap = function(track, colour, width) {
GPXParser.prototype.addTrackToMap = function(track, colour, width, opacity) {
var segments = track.getElementsByTagName("trkseg");
for(var i = 0; i < segments.length; i++) {
var segmentlatlngbounds = this.addTrackSegmentToMap(segments[i], colour,
width);
var segmentlatlngbounds = this.addTrackSegmentToMap(segments[i], colour, width, opacity);
}
}

GPXParser.prototype.addRouteToMap = function(route, colour, width) {
GPXParser.prototype.addRouteToMap = function(route, colour, width, opacity) {
var routepoints = route.getElementsByTagName("rtept");
if(routepoints.length == 0) {
return;
Expand All @@ -192,7 +197,7 @@ GPXParser.prototype.addRouteToMap = function(route, colour, width) {
// process first point
var lastlon = parseFloat(routepoints[0].getAttribute("lon"));
var lastlat = parseFloat(routepoints[0].getAttribute("lat"));
var latlng = new google.maps.LatLng(lastlat,lastlon);
var latlng = new google.maps.LatLng(lastlat,lastlon);
pointarray.push(latlng);

for(var i = 1; i < routepoints.length; i++) {
Expand All @@ -202,11 +207,10 @@ GPXParser.prototype.addRouteToMap = function(route, colour, width) {
// 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) {
if(Math.sqrt(latdiff*latdiff + londiff*londiff) > this.mintrackpointdelta) {
lastlon = lon;
lastlat = lat;
latlng = new google.maps.LatLng(lat,lon);
latlng = new google.maps.LatLng(lat,lon);
pointarray.push(latlng);
}

Expand All @@ -231,8 +235,7 @@ GPXParser.prototype.centerAndZoom = function(trackSegment) {
for(var pointtype = 0; pointtype < pointlist.length; pointtype++) {

// Center the map and zoom on the given segment.
var trackpoints = trackSegment.getElementsByTagName(
pointlist[pointtype]);
var trackpoints = trackSegment.getElementsByTagName(pointlist[pointtype]);

// If the min and max are uninitialized then initialize them.
if((trackpoints.length > 0) && (minlat == maxlat) && (minlat == 0)) {
Expand Down Expand Up @@ -263,8 +266,8 @@ GPXParser.prototype.centerAndZoom = function(trackSegment) {
var centerlat = (maxlat + minlat) / 2;

var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(minlat, minlon),
new google.maps.LatLng(maxlat, maxlon));
new google.maps.LatLng(minlat, minlon),
new google.maps.LatLng(maxlat, maxlon));
this.map.setCenter(new google.maps.LatLng(centerlat, centerlon));
this.map.fitBounds(bounds);
}
Expand All @@ -278,18 +281,16 @@ GPXParser.prototype.centerAndZoomToLatLngBounds = function(latlngboundsarray) {
}
}

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

GPXParser.prototype.addTrackpointsToMap = function() {
var tracks = this.xmlDoc.documentElement.getElementsByTagName("trk");
for(var i = 0; i < tracks.length; i++) {
this.addTrackToMap(tracks[i], this.trackcolour, this.trackwidth);
this.addTrackToMap(tracks[i], this.trackcolour, this.trackwidth, this.trackopacity);
}
}

Expand All @@ -303,6 +304,6 @@ GPXParser.prototype.addWaypointsToMap = function() {
GPXParser.prototype.addRoutepointsToMap = function() {
var routes = this.xmlDoc.documentElement.getElementsByTagName("rte");
for(var i = 0; i < routes.length; i++) {
this.addRouteToMap(routes[i], this.trackcolour, this.trackwidth);
this.addRouteToMap(routes[i], this.trackcolour, this.trackwidth, this.trackopacity);
}
}
}