-
+
@@ -80,6 +97,11 @@
+
+
+
+
+
+
+
diff --git a/js/control/Profile.js b/js/control/Profile.js
index 888b6ba..e0e7be1 100644
--- a/js/control/Profile.js
+++ b/js/control/Profile.js
@@ -1,31 +1,33 @@
-BR.Profile = BR.Control.extend({
- options: {
- heading: 'Profile',
- divId: 'profile_div'
- },
-
- onAdd: function (map) {
- L.DomUtil.get('profile_upload').onsubmit = L.bind(this._submit, this);
+BR.Profile = L.Class.extend({
+ initialize: function () {
+ L.DomUtil.get('upload').onclick = L.bind(this._upload, this);
L.DomUtil.get('clear').onclick = L.bind(this.clear, this);
-
-
- return BR.Control.prototype.onAdd.call(this, map);
},
clear: function(evt) {
+ var button = evt.target || evt.srcElement;
+
evt.preventDefault();
document.profile_upload.profile.value = null;
this.fire('clear');
+ button.blur();
},
- _submit: function(evt) {
- var form = evt.target || evt.srcElement,
+ _upload: function(evt) {
+ var button = evt.target || evt.srcElement,
profile = document.profile_upload.profile.value;
+ $(button).button('uploading');
evt.preventDefault();
- this.fire('update', { profileText: profile });
+ this.fire('update', {
+ profileText: profile,
+ callback: function () {
+ $(button).button('reset');
+ $(button).blur();
+ }
+ });
}
});
diff --git a/js/control/Tabs.js b/js/control/Tabs.js
new file mode 100644
index 0000000..60258c2
--- /dev/null
+++ b/js/control/Tabs.js
@@ -0,0 +1,42 @@
+BR.Tabs = BR.Control.extend({
+ options: {
+ divId: 'tabs_div',
+ // tab a.hash > instance
+ tabs: {}
+ },
+
+ initialize: function (options) {
+ L.setOptions(this, options);
+ },
+
+ onAdd: function (map) {
+ var tabs = this.options.tabs;
+
+ for (var key in tabs) {
+ if (tabs[key].onAdd) {
+ tabs[key].onAdd(map);
+ }
+ }
+
+ $('#tab a').click(function (e) {
+ e.preventDefault();
+ $(this).tab('show');
+ });
+
+ // e.target = activated tab
+ // e.relatedTarget = previous tab
+ $('#tab a').on('shown.bs.tab', L.bind(function (e) {
+ var tab = this.options.tabs[e.target.hash],
+ prevTab = this.options.tabs[e.relatedTarget.hash];
+
+ if (tab && tab.show) {
+ tab.show();
+ }
+ if (prevTab && prevTab.hide) {
+ prevTab.hide();
+ }
+ }, this));
+
+ return BR.Control.prototype.onAdd.call(this, map);
+ }
+});
diff --git a/js/control/TrackMessages.js b/js/control/TrackMessages.js
new file mode 100644
index 0000000..9dc4c8f
--- /dev/null
+++ b/js/control/TrackMessages.js
@@ -0,0 +1,201 @@
+BR.TrackMessages = L.Class.extend({
+
+ options: {
+ edgeStyle: {
+ color: 'yellow',
+ weight: 8
+ }
+ },
+
+ // true when tab is shown, false when hidden
+ active: false,
+
+ columnOptions: {
+ 'Longitude': { visible: false },
+ 'Latitude': { visible: false },
+ 'Elevation': { title: 'elev.', className: 'dt-body-right' },
+ 'Distance': { title: 'dist.', className: 'dt-body-right' },
+ 'CostPerKm': { title: '$/km', className: 'dt-body-right' },
+ 'ElevCost': { title: 'elev$', className: 'dt-body-right' },
+ 'TurnCost': { title: 'turn$', className: 'dt-body-right' },
+ 'NodeCost': { title: 'node$', className: 'dt-body-right' },
+ 'InitialCost': { title: 'initial$', className: 'dt-body-right' },
+ 'OsmTags': { title: 'tags'}
+ },
+
+ initialize: function (options) {
+ L.setOptions(this, options);
+
+ var table = document.getElementById('datatable');
+ this.tableClassName = table.className;
+ this.tableParent = table.parentElement;
+ },
+
+ onAdd: function (map) {
+ this._map = map;
+ },
+
+ update: function (polyline, segments) {
+ var i, messages, columns, headings,
+ data = [];
+
+ if (!this.active) {
+ return;
+ }
+
+ for (i = 0; segments && i < segments.length; i++) {
+ messages = segments[i].feature.properties.messages;
+ if (messages) {
+ data = data.concat(messages.slice(1));
+ }
+ }
+
+ this._destroyTable();
+
+ if (data.length === 0) {
+ return;
+ }
+
+ headings = messages[0];
+ columns = this._getColumns(headings, data);
+
+ console.time('datatable');
+ this._table = $('#datatable').DataTable({
+ destroy: true,
+ data: data,
+ columns: columns,
+ paging: false,
+ searching: false,
+ info: false,
+ scrollY: 330,
+ scrollX: 370,
+ scrollCollapse: true,
+ order: []
+ });
+
+ // highlight track segment (graph edge) on row hover
+ this._setEdges(polyline, segments);
+ $('#datatable tbody tr').hover(L.bind(this._handleHover, this), L.bind(this._handleHoverOut, this));
+
+ console.timeEnd('datatable');
+ },
+
+ show: function() {
+ this.active = true;
+ this.options.requestUpdate(this);
+ },
+
+ hide: function() {
+ this.active = false;
+ },
+
+ _destroyTable: function() {
+ var ele;
+
+ if ($.fn.DataTable.isDataTable('#datatable') ) {
+ // destroy option too slow on update, really remove elements with destroy method
+ $('#datatable').DataTable().destroy(true);
+
+ // recreate original table element, destroy removes all
+ ele = document.createElement('table');
+ ele.id = 'datatable';
+ ele.className = this.tableClassName;
+ this.tableParent.appendChild(ele);
+ }
+
+ return ele || document.getElementById('datatable');
+ },
+
+ _getColumns: function(headings, data) {
+ var columns = [],
+ defaultOptions,
+ options,
+ emptyColumns = this._getEmptyColumns(data);
+
+ for (k = 0; k < headings.length; k++) {
+ defaultOptions = {
+ title: headings[k],
+ visible: !emptyColumns[k]
+ };
+ options = L.extend(defaultOptions, this.columnOptions[headings[k]]);
+ columns.push(options);
+ }
+ return columns;
+ },
+
+ _getEmptyColumns: function(data) {
+ var empty = new Array(data[0].length),
+ i;
+
+ for (i = 0; i < empty.length; i++) {
+ empty[i] = true;
+ }
+
+ data.forEach(function(row) {
+ row.forEach(function(val, i) {
+ empty[i] = empty[i] && !val;
+ });
+ });
+
+ return empty;
+ },
+
+ _getMessageLatLng: function(message) {
+ var lon = message[0] / 1000000,
+ lat = message[1] / 1000000;
+
+ return L.latLng(lat, lon);
+ },
+
+ _setEdges: function(polyline, segments) {
+ var messages, segLatLngs, length, si, mi, latLng, i, segIndex,
+ baseIndex = 0;
+
+ // track latLngs index for end node of edge
+ this._edges = [];
+ this._track = polyline;
+
+ for (si = 0; si < segments.length; si++) {
+ messages = segments[si].feature.properties.messages;
+ segLatLngs = segments[si].getLatLngs();
+ length = segLatLngs.length;
+ segIndex = 0;
+
+ for (mi = 1; mi < messages.length; mi++) {
+ latLng = this._getMessageLatLng(messages[mi]);
+
+ for (i = segIndex; i < length; i++) {
+ if (latLng.equals(segLatLngs[i])) {
+ break;
+ }
+ }
+ if (i === length) {
+ i = length - 1;
+ if (mi !== messages.length - 1) debugger;
+ }
+
+ segIndex = i + 1;
+ this._edges.push(baseIndex + i);
+ }
+ baseIndex += length;
+ }
+ },
+
+ _handleHover: function(evt) {
+ var tr = $(evt.currentTarget),
+ row = this._table.row(tr),
+ trackLatLngs = this._track.getLatLngs(),
+ startIndex = row.index() > 0 ? this._edges[row.index() - 1] : 0,
+ endIndex = this._edges[row.index()],
+ edgeLatLngs = trackLatLngs.slice(startIndex, endIndex + 1);
+
+ this._selectedEdge = L.polyline(edgeLatLngs, this.options.edgeStyle).addTo(this._map);
+ },
+
+ _handleHoverOut: function(evt) {
+ this._map.removeLayer(this._selectedEdge);
+ this._selectedEdge = null;
+ }
+});
+
+BR.TrackMessages.include(L.Mixin.Events);
diff --git a/js/index.js b/js/index.js
index ceed328..e471340 100644
--- a/js/index.js
+++ b/js/index.js
@@ -76,6 +76,10 @@
}).addTo(map);
map.addControl(new BR.Search());
+
+ // expose map instance for console debugging
+ BR.debug = BR.debug || {};
+ BR.debug.map = map;
}
function initApp() {
@@ -88,6 +92,7 @@
elevation,
download,
profile,
+ trackMessages,
leftPaneId = 'leftpane',
saveWarningShown = false;
@@ -106,6 +111,13 @@
routing.rerouteAllSegments(onUpdate);
}
+ function requestUpdate(updatable) {
+ var track = routing.toPolyline(),
+ segments = routing.getSegments();
+
+ updatable.update(track, segments);
+ }
+
routingOptions = new BR.RoutingOptions();
routingOptions.on('update', updateRoute);
@@ -134,12 +146,19 @@
router.setOptions(routingOptions.getOptions());
}
}
+
+ if (evt.callback) {
+ evt.callback();
+ }
});
});
profile.on('clear', function(evt) {
BR.message.hideError();
routingOptions.setCustomProfile(null);
});
+ trackMessages = new BR.TrackMessages({
+ requestUpdate: requestUpdate
+ });
routing = new BR.Routing({
routing: {
@@ -177,6 +196,7 @@
elevation.update(track);
stats.update(track, segments);
+ trackMessages.update(track, segments);
if (latLngs.length > 1) {
urls.gpx = router.getUrl(latLngs, 'gpx');
@@ -196,7 +216,12 @@
stats.addTo(map);
download.addTo(map);
elevation.addTo(map);
- profile.addTo(map);
+ map.addControl(new BR.Tabs({
+ tabs: {
+ '#tab_profile': profile,
+ '#tab_data': trackMessages
+ }
+ }));
nogos.addTo(map);
routing.addTo(map);
diff --git a/js/plugin/Routing.js b/js/plugin/Routing.js
index 23b2e82..5bdcb51 100644
--- a/js/plugin/Routing.js
+++ b/js/plugin/Routing.js
@@ -33,7 +33,7 @@ BR.Routing = L.Routing.extend({
this._edit._mouseMarker.setIcon(L.divIcon({
className: 'line-mouse-marker'
,iconAnchor: [8, 8] // size/2 + border/2
- ,iconSize: [8, 8]
+ ,iconSize: [16, 16]
}));
this._draw.on('enabled', function() {