Add support for nights in GPX tracks
This commit is contained in:
parent
ed244c6380
commit
8ed2ab1f1f
|
@ -35,7 +35,7 @@
|
||||||
// IGN URL to the IGN layer
|
// IGN URL to the IGN layer
|
||||||
var KeyIGN = "ataevimogohmg1wxpg1jo2wh" // professionels.ign.fr
|
var KeyIGN = "ataevimogohmg1wxpg1jo2wh" // professionels.ign.fr
|
||||||
|
|
||||||
var url_wmts_ign = "http://wxs.ign.fr/"+
|
var url_wmts_ign = "//wxs.ign.fr/"+
|
||||||
KeyIGN +
|
KeyIGN +
|
||||||
"/geoportail/wmts?LAYER="+
|
"/geoportail/wmts?LAYER="+
|
||||||
"GEOGRAPHICALGRIDSYSTEMS.MAPS"+
|
"GEOGRAPHICALGRIDSYSTEMS.MAPS"+
|
||||||
|
@ -46,10 +46,10 @@ var url_wmts_ign = "http://wxs.ign.fr/"+
|
||||||
"&TILEMATRIXSET=PM&&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}"; // Correct tile
|
"&TILEMATRIXSET=PM&&TILEMATRIX={z}&TILECOL={x}&TILEROW={y}"; // Correct tile
|
||||||
|
|
||||||
// Differents layers for the map
|
// Differents layers for the map
|
||||||
var osmfr = L.tileLayer('http://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {maxZoom: 20, attribution: 'Maps © <a href="http://www.openstreetmap.fr">OpenSreetMap France</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'});
|
var osmfr = L.tileLayer('//{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {maxZoom: 20, attribution: 'Maps © <a href="http://www.openstreetmap.fr">OpenSreetMap France</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'});
|
||||||
outdoor = L.tileLayer('http://{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Maps © <a href="http://www.thunderforest.com">Thunderforest</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
|
outdoor = L.tileLayer('//{s}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Maps © <a href="http://www.thunderforest.com">Thunderforest</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
|
||||||
outdoora = L.tileLayer('http://s1.outdooractive.com/osm/OSMSummer/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Maps © <a href="http://www.outdooractive.com">Outdoor Active</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
|
outdoora = L.tileLayer('//s1.outdooractive.com/osm/OSMSummer/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Maps © <a href="http://www.outdooractive.com">Outdoor Active</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
|
||||||
ostopo = L.tileLayer('http://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 16, attribution: 'Maps © <a href="http://opentopomap.org">OpenTopoMap</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
|
ostopo = L.tileLayer('//{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {maxZoom: 16, attribution: 'Maps © <a href="http://opentopomap.org">OpenTopoMap</a>, Data © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'}),
|
||||||
ign = L.tileLayer(url_wmts_ign, {maxZoom: 18, attribution: 'Maps & Data © <a href="http://www.ign.fr/">IGN</a>'});
|
ign = L.tileLayer(url_wmts_ign, {maxZoom: 18, attribution: 'Maps & Data © <a href="http://www.ign.fr/">IGN</a>'});
|
||||||
|
|
||||||
// Creation of the map
|
// Creation of the map
|
||||||
|
@ -147,7 +147,13 @@ var g = new L.GPX(gpx, {
|
||||||
marker_options: {
|
marker_options: {
|
||||||
startIconUrl: './leaflet-gpx/start.png',
|
startIconUrl: './leaflet-gpx/start.png',
|
||||||
endIconUrl: './leaflet-gpx/finish.png',
|
endIconUrl: './leaflet-gpx/finish.png',
|
||||||
shadowUrl: ''
|
wptIconUrls : {
|
||||||
|
'night': './leaflet-gpx/night.png',
|
||||||
|
},
|
||||||
|
shadowUrl: '',
|
||||||
|
iconSize: [32, 37],
|
||||||
|
iconAnchor: [16, 37],
|
||||||
|
clickable: false
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
g.on('loaded', function(e) {
|
g.on('loaded', function(e) {
|
||||||
|
|
|
@ -36,20 +36,30 @@
|
||||||
* rendered on the Leaflet map.
|
* rendered on the Leaflet map.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
var L = L || require('leaflet');
|
||||||
|
|
||||||
var _MAX_POINT_INTERVAL_MS = 15000;
|
var _MAX_POINT_INTERVAL_MS = 15000;
|
||||||
var _SECOND_IN_MILLIS = 1000;
|
var _SECOND_IN_MILLIS = 1000;
|
||||||
var _MINUTE_IN_MILLIS = 60 * _SECOND_IN_MILLIS;
|
var _MINUTE_IN_MILLIS = 60 * _SECOND_IN_MILLIS;
|
||||||
var _HOUR_IN_MILLIS = 60 * _MINUTE_IN_MILLIS;
|
var _HOUR_IN_MILLIS = 60 * _MINUTE_IN_MILLIS;
|
||||||
|
var _DAY_IN_MILLIS = 24 * _HOUR_IN_MILLIS;
|
||||||
|
|
||||||
var _DEFAULT_MARKER_OPTS = {
|
var _DEFAULT_MARKER_OPTS = {
|
||||||
startIconUrl: './leaflet-gpx/start.png',
|
startIconUrl: 'pin-icon-start.png',
|
||||||
endIconUrl: './leaflet-gpx/finish.png',
|
endIconUrl: 'pin-icon-end.png',
|
||||||
|
shadowUrl: '',
|
||||||
|
wptIconUrls : {
|
||||||
|
},
|
||||||
iconSize: [32, 37],
|
iconSize: [32, 37],
|
||||||
iconAnchor: [16, 37]
|
iconAnchor: [16, 37],
|
||||||
|
clickable: false
|
||||||
};
|
};
|
||||||
var _DEFAULT_POLYLINE_OPTS = {
|
var _DEFAULT_POLYLINE_OPTS = {
|
||||||
color:'blue'
|
color:'blue'
|
||||||
};
|
};
|
||||||
|
var _DEFAULT_GPX_OPTS = {
|
||||||
|
parseElements: ['track', 'route', 'waypoint']
|
||||||
|
};
|
||||||
L.GPX = L.FeatureGroup.extend({
|
L.GPX = L.FeatureGroup.extend({
|
||||||
initialize: function(gpx, options) {
|
initialize: function(gpx, options) {
|
||||||
options.max_point_interval = options.max_point_interval || _MAX_POINT_INTERVAL_MS;
|
options.max_point_interval = options.max_point_interval || _MAX_POINT_INTERVAL_MS;
|
||||||
|
@ -59,6 +69,9 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
options.polyline_options = this._merge_objs(
|
options.polyline_options = this._merge_objs(
|
||||||
_DEFAULT_POLYLINE_OPTS,
|
_DEFAULT_POLYLINE_OPTS,
|
||||||
options.polyline_options || {});
|
options.polyline_options || {});
|
||||||
|
options.gpx_options = this._merge_objs(
|
||||||
|
_DEFAULT_GPX_OPTS,
|
||||||
|
options.gpx_options || {});
|
||||||
|
|
||||||
L.Util.setOptions(this, options);
|
L.Util.setOptions(this, options);
|
||||||
|
|
||||||
|
@ -70,9 +83,9 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
this._info = {
|
this._info = {
|
||||||
name: null,
|
name: null,
|
||||||
length: 0.0,
|
length: 0.0,
|
||||||
elevation: {gain: 0.0, loss: 0.0, _points: []},
|
elevation: {gain: 0.0, loss: 0.0, max: 0.0, min: Infinity, _points: []},
|
||||||
hr: {avg: 0, _total: 0, _points: []},
|
hr: {avg: 0, _total: 0, _points: []},
|
||||||
duration: {start: null, end: null, moving: 0, total: 0},
|
duration: {start: null, end: null, moving: 0, total: 0}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (gpx) {
|
if (gpx) {
|
||||||
|
@ -83,6 +96,11 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
get_duration_string: function(duration, hidems) {
|
get_duration_string: function(duration, hidems) {
|
||||||
var s = '';
|
var s = '';
|
||||||
|
|
||||||
|
if (duration >= _DAY_IN_MILLIS) {
|
||||||
|
s += Math.floor(duration / _DAY_IN_MILLIS) + 'd ';
|
||||||
|
duration = duration % _DAY_IN_MILLIS;
|
||||||
|
}
|
||||||
|
|
||||||
if (duration >= _HOUR_IN_MILLIS) {
|
if (duration >= _HOUR_IN_MILLIS) {
|
||||||
s += Math.floor(duration / _HOUR_IN_MILLIS) + ':';
|
s += Math.floor(duration / _HOUR_IN_MILLIS) + ':';
|
||||||
duration = duration % _HOUR_IN_MILLIS;
|
duration = duration % _HOUR_IN_MILLIS;
|
||||||
|
@ -114,7 +132,6 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
get_desc: function() { return this._info.desc; },
|
get_desc: function() { return this._info.desc; },
|
||||||
get_author: function() { return this._info.author; },
|
get_author: function() { return this._info.author; },
|
||||||
get_copyright: function() { return this._info.copyright; },
|
get_copyright: function() { return this._info.copyright; },
|
||||||
get_desc: function() { return this._info.desc; },
|
|
||||||
get_distance: function() { return this._info.length; },
|
get_distance: function() { return this._info.length; },
|
||||||
get_distance_imp: function() { return this.to_miles(this.m_to_km(this.get_distance())); },
|
get_distance_imp: function() { return this.to_miles(this.m_to_km(this.get_distance())); },
|
||||||
|
|
||||||
|
@ -125,12 +142,17 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
|
|
||||||
get_moving_pace: function() { return this.get_moving_time() / this.m_to_km(this.get_distance()); },
|
get_moving_pace: function() { return this.get_moving_time() / this.m_to_km(this.get_distance()); },
|
||||||
get_moving_pace_imp: function() { return this.get_moving_time() / this.get_distance_imp(); },
|
get_moving_pace_imp: function() { return this.get_moving_time() / this.get_distance_imp(); },
|
||||||
|
|
||||||
get_moving_speed: function() { return this.m_to_km(this.get_distance()) / (this.get_moving_time() / (3600 * 1000)) ; },
|
get_moving_speed: function() { return this.m_to_km(this.get_distance()) / (this.get_moving_time() / (3600 * 1000)) ; },
|
||||||
get_moving_speed_imp:function() { return this.to_miles(this.m_to_km(this.get_distance())) / (this.get_moving_time() / (3600 * 1000)) ; },
|
get_moving_speed_imp:function() { return this.to_miles(this.m_to_km(this.get_distance())) / (this.get_moving_time() / (3600 * 1000)) ; },
|
||||||
|
|
||||||
|
get_total_speed: function() { return this.m_to_km(this.get_distance()) / (this.get_total_time() / (3600 * 1000)); },
|
||||||
|
get_total_speed_imp: function() { return this.to_miles(this.m_to_km(this.get_distance())) / (this.get_total_time() / (3600 * 1000)); },
|
||||||
|
|
||||||
get_elevation_gain: function() { return this._info.elevation.gain; },
|
get_elevation_gain: function() { return this._info.elevation.gain; },
|
||||||
get_elevation_loss: function() { return this._info.elevation.loss; },
|
get_elevation_loss: function() { return this._info.elevation.loss; },
|
||||||
|
get_elevation_gain_imp: function() { return this.to_ft(this.get_elevation_gain()); },
|
||||||
|
get_elevation_loss_imp: function() { return this.to_ft(this.get_elevation_loss()); },
|
||||||
get_elevation_data: function() {
|
get_elevation_data: function() {
|
||||||
var _this = this;
|
var _this = this;
|
||||||
return this._info.elevation._points.map(
|
return this._info.elevation._points.map(
|
||||||
|
@ -145,6 +167,10 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
function(a, b) { return a.toFixed(2) + ' mi, ' + b.toFixed(0) + ' ft'; });
|
function(a, b) { return a.toFixed(2) + ' mi, ' + b.toFixed(0) + ' ft'; });
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
get_elevation_max: function() { return this._info.elevation.max; },
|
||||||
|
get_elevation_min: function() { return this._info.elevation.min; },
|
||||||
|
get_elevation_max_imp: function() { return this.to_ft(this.get_elevation_max()); },
|
||||||
|
get_elevation_min_imp: function() { return this.to_ft(this.get_elevation_min()); },
|
||||||
|
|
||||||
get_average_hr: function() { return this._info.hr.avg; },
|
get_average_hr: function() { return this._info.hr.avg; },
|
||||||
get_heartrate_data: function() {
|
get_heartrate_data: function() {
|
||||||
|
@ -217,7 +243,15 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
|
|
||||||
_parse_gpx_data: function(xml, options) {
|
_parse_gpx_data: function(xml, options) {
|
||||||
var j, i, el, layers = [];
|
var j, i, el, layers = [];
|
||||||
var tags = [['rte','rtept'], ['trkseg','trkpt']];
|
var tags = [];
|
||||||
|
|
||||||
|
var parseElements = options.gpx_options.parseElements;
|
||||||
|
if (parseElements.indexOf('route') > -1) {
|
||||||
|
tags.push(['rte','rtept']);
|
||||||
|
}
|
||||||
|
if (parseElements.indexOf('track') > -1) {
|
||||||
|
tags.push(['trkseg','trkpt']);
|
||||||
|
}
|
||||||
|
|
||||||
var name = xml.getElementsByTagName('name');
|
var name = xml.getElementsByTagName('name');
|
||||||
if (name.length > 0) {
|
if (name.length > 0) {
|
||||||
|
@ -250,20 +284,20 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
if (options.marker_options.startIconUrl) {
|
if (options.marker_options.startIconUrl) {
|
||||||
// add start pin
|
// add start pin
|
||||||
var p = new L.Marker(coords[0], {
|
var p = new L.Marker(coords[0], {
|
||||||
clickable: false,
|
clickable: options.marker_options.clickable,
|
||||||
icon: new L.GPXTrackIcon({iconUrl: options.marker_options.startIconUrl})
|
icon: new L.GPXTrackIcon({iconUrl: options.marker_options.startIconUrl})
|
||||||
});
|
});
|
||||||
this.fire('addpoint', { point: p });
|
this.fire('addpoint', { point: p, point_type: 'start' });
|
||||||
layers.push(p);
|
layers.push(p);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.marker_options.endIconUrl) {
|
if (options.marker_options.endIconUrl) {
|
||||||
// add end pin
|
// add end pin
|
||||||
p = new L.Marker(coords[coords.length-1], {
|
p = new L.Marker(coords[coords.length-1], {
|
||||||
clickable: false,
|
clickable: options.marker_options.clickable,
|
||||||
icon: new L.GPXTrackIcon({iconUrl: options.marker_options.endIconUrl})
|
icon: new L.GPXTrackIcon({iconUrl: options.marker_options.endIconUrl})
|
||||||
});
|
});
|
||||||
this.fire('addpoint', { point: p });
|
this.fire('addpoint', { point: p, point_type: 'end' });
|
||||||
layers.push(p);
|
layers.push(p);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -271,11 +305,48 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
|
|
||||||
this._info.hr.avg = Math.round(this._info.hr._total / this._info.hr._points.length);
|
this._info.hr.avg = Math.round(this._info.hr._total / this._info.hr._points.length);
|
||||||
|
|
||||||
if (!layers.length) return;
|
// parse waypoints and add markers for each of them
|
||||||
var layer = layers[0];
|
if (parseElements.indexOf('waypoint') > -1) {
|
||||||
if (layers.length > 1)
|
el = xml.getElementsByTagName('wpt');
|
||||||
layer = new L.FeatureGroup(layers);
|
for (i = 0; i < el.length; i++) {
|
||||||
return layer;
|
var ll = new L.LatLng(
|
||||||
|
el[i].getAttribute('lat'),
|
||||||
|
el[i].getAttribute('lon'));
|
||||||
|
|
||||||
|
var nameEl = el[i].getElementsByTagName('name');
|
||||||
|
var name = '';
|
||||||
|
if (nameEl.length > 0) {
|
||||||
|
name = nameEl[0].textContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
var descEl = el[i].getElementsByTagName('desc');
|
||||||
|
var desc = '';
|
||||||
|
if (descEl.length > 0) {
|
||||||
|
desc = descEl[0].textContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
var symEl = el[i].getElementsByTagName('sym');
|
||||||
|
var symKey = '';
|
||||||
|
if (symEl.length > 0) {
|
||||||
|
symKey = symEl[0].textContent;
|
||||||
|
}
|
||||||
|
|
||||||
|
// add WayPointMarker, based on "sym" element if avail and icon is configured
|
||||||
|
var symIcon = options.marker_options.wptIconUrls[name];
|
||||||
|
var marker = new L.Marker(ll, {
|
||||||
|
clickable: false,
|
||||||
|
icon: symIcon ? new L.GPXTrackIcon({iconUrl: symIcon}) : new L.Icon.Default()
|
||||||
|
});
|
||||||
|
this.fire('addpoint', { point: marker, point_type: 'waypoint' });
|
||||||
|
layers.push(marker);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (layers.length > 1) {
|
||||||
|
return new L.FeatureGroup(layers);
|
||||||
|
} else if (layers.length == 1) {
|
||||||
|
return layers[0];
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
_parse_trkseg: function(line, xml, options, tag) {
|
_parse_trkseg: function(line, xml, options, tag) {
|
||||||
|
@ -307,6 +378,12 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
this._info.hr._total += ll.meta.hr;
|
this._info.hr._total += ll.meta.hr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(ll.meta.ele > this._info.elevation.max)
|
||||||
|
this._info.elevation.max = ll.meta.ele;
|
||||||
|
|
||||||
|
if(ll.meta.ele < this._info.elevation.min)
|
||||||
|
this._info.elevation.min = ll.meta.ele;
|
||||||
|
|
||||||
this._info.elevation._points.push([this._info.length, ll.meta.ele]);
|
this._info.elevation._points.push([this._info.length, ll.meta.ele]);
|
||||||
this._info.duration.end = ll.meta.time;
|
this._info.duration.end = ll.meta.time;
|
||||||
|
|
||||||
|
@ -356,3 +433,9 @@ L.GPX = L.FeatureGroup.extend({
|
||||||
return deg * Math.PI / 180;
|
return deg * Math.PI / 180;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (typeof module === 'object' && typeof module.exports === 'object') {
|
||||||
|
module.exports = L;
|
||||||
|
} else if (typeof define === 'function' && define.amd) {
|
||||||
|
define(L);
|
||||||
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 603 B |
Loading…
Reference in New Issue