Add track name
This commit is contained in:
Gautier Pelloux-Prayer
parent
fc5723953a
commit
3aba471c0a
7 changed files with 284 additions and 77 deletions
|
|
@ -6,4 +6,5 @@ yarn.lock
|
||||||
.gitignore
|
.gitignore
|
||||||
.prettierignore
|
.prettierignore
|
||||||
.tx/
|
.tx/
|
||||||
layers/
|
layers/
|
||||||
|
locales/*.json
|
||||||
186
index.html
186
index.html
|
|
@ -89,9 +89,10 @@
|
||||||
</form>
|
</form>
|
||||||
<div class="nav-item dropdown">
|
<div class="nav-item dropdown">
|
||||||
<a
|
<a
|
||||||
class="nav-link dropdown-toggle"
|
class="nav-link"
|
||||||
href=""
|
data-toggle="modal"
|
||||||
data-toggle="dropdown"
|
data-target="#export"
|
||||||
|
id="exportButton"
|
||||||
href="#"
|
href="#"
|
||||||
role="button"
|
role="button"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
|
|
@ -102,44 +103,8 @@
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
>
|
>
|
||||||
</span>
|
</span>
|
||||||
<span data-i18n="navbar.download.title"
|
<span data-i18n="navbar.export">Export</span>
|
||||||
>Download</span
|
|
||||||
>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="dropdown-menu">
|
|
||||||
<a
|
|
||||||
class="dropdown-item"
|
|
||||||
data-i18n="navbar.download.gpx"
|
|
||||||
id="dl-gpx"
|
|
||||||
href="#"
|
|
||||||
disabled
|
|
||||||
>GPX</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="dropdown-item"
|
|
||||||
data-i18n="navbar.download.kml"
|
|
||||||
id="dl-kml"
|
|
||||||
href="#"
|
|
||||||
disabled
|
|
||||||
>KML</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="dropdown-item"
|
|
||||||
data-i18n="navbar.download.geojson"
|
|
||||||
id="dl-geojson"
|
|
||||||
href="#"
|
|
||||||
disabled
|
|
||||||
>GeoJSON</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="dropdown-item"
|
|
||||||
data-i18n="navbar.download.csv"
|
|
||||||
id="dl-csv"
|
|
||||||
href="#"
|
|
||||||
disabled
|
|
||||||
>data CSV</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-item dropdown">
|
<div class="nav-item dropdown">
|
||||||
<a
|
<a
|
||||||
|
|
@ -569,6 +534,147 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Export modal window -->
|
||||||
|
<div
|
||||||
|
class="modal fade"
|
||||||
|
id="export"
|
||||||
|
tabindex="-1"
|
||||||
|
role="dialog"
|
||||||
|
aria-labelledby="Export route window"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<div class="modal-dialog" role="document">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="close"
|
||||||
|
data-dismiss="modal"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
<h4 class="modal-title" data-i18n="export.title">
|
||||||
|
Export route
|
||||||
|
</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form name="export">
|
||||||
|
<div class="form-group row">
|
||||||
|
<label
|
||||||
|
class="col-form-label col-sm-2"
|
||||||
|
data-i18n="export.trackname"
|
||||||
|
>Name</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="trackname"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<fieldset class="form-group row">
|
||||||
|
<legend
|
||||||
|
class="col-form-legend col-sm-2"
|
||||||
|
data-i18n="export.format"
|
||||||
|
>
|
||||||
|
Format
|
||||||
|
</legend>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<div class="form-check">
|
||||||
|
<label class="form-check-label">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
id="format-gpx"
|
||||||
|
type="radio"
|
||||||
|
name="format"
|
||||||
|
value="gpx"
|
||||||
|
checked
|
||||||
|
/>
|
||||||
|
<span data-i18n="export.format_gpx"
|
||||||
|
>GPX</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<label
|
||||||
|
class="form-check-label"
|
||||||
|
for="format-kml"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
id="format-kml"
|
||||||
|
type="radio"
|
||||||
|
name="format"
|
||||||
|
value="kml"
|
||||||
|
/>
|
||||||
|
<span data-i18n="export.format_kml"
|
||||||
|
>KML</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<label
|
||||||
|
class="form-check-label"
|
||||||
|
for="format-geojson"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
id="format-geojson"
|
||||||
|
type="radio"
|
||||||
|
name="format"
|
||||||
|
value="geojson"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
data-i18n="export.format_geojson"
|
||||||
|
>GeoJSON</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-check">
|
||||||
|
<label
|
||||||
|
class="form-check-label"
|
||||||
|
for="format-csv"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
id="format-csv"
|
||||||
|
type="radio"
|
||||||
|
name="format"
|
||||||
|
value="csv"
|
||||||
|
/>
|
||||||
|
<span data-i18n="export.format_csv"
|
||||||
|
>CSV</span
|
||||||
|
>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
data-i18n="[value]modal.close"
|
||||||
|
data-dismiss="modal"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
data-i18n="[value]export.title"
|
||||||
|
id="submitExport"
|
||||||
|
>
|
||||||
|
Export route
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div id="content" class="flexcolumn flexgrow">
|
<div id="content" class="flexcolumn flexgrow">
|
||||||
<div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
|
<div id="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
|
||||||
<ul role="tablist">
|
<ul role="tablist">
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
BR.Download = L.Class.extend({
|
|
||||||
update: function(urls) {
|
|
||||||
if (urls) {
|
|
||||||
['gpx', 'kml', 'geojson', 'csv'].forEach(function(e, i, a) {
|
|
||||||
var a = L.DomUtil.get('dl-' + e);
|
|
||||||
a.setAttribute('href', urls[e]);
|
|
||||||
a.setAttribute('download', 'brouter.' + e);
|
|
||||||
a.removeAttribute('disabled');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
BR.download = function() {
|
|
||||||
return new BR.Download();
|
|
||||||
};
|
|
||||||
114
js/control/Export.js
Normal file
114
js/control/Export.js
Normal file
|
|
@ -0,0 +1,114 @@
|
||||||
|
BR.Export = L.Class.extend({
|
||||||
|
latLngs: [],
|
||||||
|
|
||||||
|
initialize: function(router) {
|
||||||
|
this.router = router;
|
||||||
|
this.exportButton = $('#exportButton');
|
||||||
|
|
||||||
|
this.exportButton.on('click', L.bind(this._generateTrackname, this));
|
||||||
|
L.DomUtil.get('submitExport').onclick = L.bind(this._export, this);
|
||||||
|
|
||||||
|
this.update([]);
|
||||||
|
},
|
||||||
|
|
||||||
|
update: function(latLngs) {
|
||||||
|
this.latLngs = latLngs;
|
||||||
|
|
||||||
|
if (latLngs.length < 2) {
|
||||||
|
this.exportButton.addClass('disabled');
|
||||||
|
} else {
|
||||||
|
this.exportButton.removeClass('disabled');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
_export: function() {
|
||||||
|
var exportForm = document.forms['export'];
|
||||||
|
var format = exportForm['format'].value;
|
||||||
|
var name = encodeURIComponent(exportForm['trackname'].value);
|
||||||
|
|
||||||
|
var uri = this.router.getUrl(this.latLngs, format, name);
|
||||||
|
|
||||||
|
var evt = document.createEvent('MouseEvents');
|
||||||
|
evt.initMouseEvent(
|
||||||
|
'click',
|
||||||
|
true,
|
||||||
|
true,
|
||||||
|
window,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
0,
|
||||||
|
null
|
||||||
|
);
|
||||||
|
var link = document.createElement('a');
|
||||||
|
link.download = name + '.' + format;
|
||||||
|
link.href = uri;
|
||||||
|
link.dispatchEvent(evt);
|
||||||
|
},
|
||||||
|
|
||||||
|
_generateTrackname: function() {
|
||||||
|
var trackname = document.getElementById('trackname');
|
||||||
|
this._getCityAtPosition(
|
||||||
|
this.latLngs[0],
|
||||||
|
L.bind(function(from) {
|
||||||
|
this._getCityAtPosition(
|
||||||
|
this.latLngs[this.latLngs.length - 1],
|
||||||
|
L.bind(function(to) {
|
||||||
|
var distance = document.getElementById('distance')
|
||||||
|
.innerHTML;
|
||||||
|
if (!from || !to) {
|
||||||
|
trackname.value = null;
|
||||||
|
} else if (from === to) {
|
||||||
|
trackname.value = i18next.t('export.route-loop', {
|
||||||
|
from,
|
||||||
|
distance
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
trackname.value = i18next.t(
|
||||||
|
'export.route-from-to',
|
||||||
|
{ from, to, distance }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, this)
|
||||||
|
);
|
||||||
|
}, this)
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
_getCityAtPosition: function(lonlat, cb) {
|
||||||
|
var url = L.Util.template(
|
||||||
|
'https://nominatim.openstreetmap.org/reverse?lon={lng}&lat={lat}&format=json',
|
||||||
|
lonlat
|
||||||
|
);
|
||||||
|
BR.Util.get(
|
||||||
|
url,
|
||||||
|
L.bind(function(err, response) {
|
||||||
|
try {
|
||||||
|
var addr = JSON.parse(response).address;
|
||||||
|
cb(
|
||||||
|
addr.village ||
|
||||||
|
addr.town ||
|
||||||
|
addr.hamlet ||
|
||||||
|
addr.city_district ||
|
||||||
|
addr.city
|
||||||
|
);
|
||||||
|
} catch (err) {
|
||||||
|
BR.message.showError(
|
||||||
|
'Error getting position city "' + lonlat + '": ' + err
|
||||||
|
);
|
||||||
|
return cb(null);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
BR.export = function() {
|
||||||
|
return new BR.Export();
|
||||||
|
};
|
||||||
16
js/index.js
16
js/index.js
|
|
@ -33,7 +33,7 @@
|
||||||
stats,
|
stats,
|
||||||
itinerary,
|
itinerary,
|
||||||
elevation,
|
elevation,
|
||||||
download,
|
exportRoute,
|
||||||
profile,
|
profile,
|
||||||
trackMessages,
|
trackMessages,
|
||||||
sidebar,
|
sidebar,
|
||||||
|
|
@ -164,7 +164,7 @@
|
||||||
} else {
|
} else {
|
||||||
stats = new BR.TrackStats();
|
stats = new BR.TrackStats();
|
||||||
}
|
}
|
||||||
download = new BR.Download();
|
exportRoute = new BR.Export(router);
|
||||||
elevation = new BR.Elevation();
|
elevation = new BR.Elevation();
|
||||||
|
|
||||||
profile = new BR.Profile();
|
profile = new BR.Profile();
|
||||||
|
|
@ -240,8 +240,7 @@
|
||||||
var track = routing.toPolyline(),
|
var track = routing.toPolyline(),
|
||||||
segments = routing.getSegments(),
|
segments = routing.getSegments(),
|
||||||
latLngs = routing.getWaypoints(),
|
latLngs = routing.getWaypoints(),
|
||||||
segmentsLayer = routing._segments,
|
segmentsLayer = routing._segments;
|
||||||
urls = {};
|
|
||||||
|
|
||||||
elevation.update(track, segmentsLayer);
|
elevation.update(track, segmentsLayer);
|
||||||
if (BR.conf.transit) {
|
if (BR.conf.transit) {
|
||||||
|
|
@ -251,14 +250,7 @@
|
||||||
}
|
}
|
||||||
trackMessages.update(track, segments);
|
trackMessages.update(track, segments);
|
||||||
|
|
||||||
if (latLngs.length > 1) {
|
exportRoute.update(latLngs);
|
||||||
urls.gpx = router.getUrl(latLngs, 'gpx');
|
|
||||||
urls.kml = router.getUrl(latLngs, 'kml');
|
|
||||||
urls.geojson = router.getUrl(latLngs, 'geojson');
|
|
||||||
urls.csv = router.getUrl(latLngs, 'csv');
|
|
||||||
}
|
|
||||||
|
|
||||||
download.update(urls);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
routing.addTo(map);
|
routing.addTo(map);
|
||||||
|
|
|
||||||
|
|
@ -112,7 +112,7 @@ L.BRouter = L.Class.extend({
|
||||||
return opts;
|
return opts;
|
||||||
},
|
},
|
||||||
|
|
||||||
getUrl: function(latLngs, format) {
|
getUrl: function(latLngs, format, trackname) {
|
||||||
var urlParams = this.getUrlParams(latLngs, format);
|
var urlParams = this.getUrlParams(latLngs, format);
|
||||||
|
|
||||||
var args = [];
|
var args = [];
|
||||||
|
|
@ -132,6 +132,8 @@ L.BRouter = L.Class.extend({
|
||||||
);
|
);
|
||||||
if (urlParams.format != null)
|
if (urlParams.format != null)
|
||||||
args.push(L.Util.template('format={format}', urlParams));
|
args.push(L.Util.template('format={format}', urlParams));
|
||||||
|
if (trackname)
|
||||||
|
args.push(L.Util.template('trackname={trackname}', { trackname }));
|
||||||
|
|
||||||
var prepend_host = format != null;
|
var prepend_host = format != null;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -21,6 +21,17 @@
|
||||||
"nominatim": "Search by <a href=\"https://wiki.openstreetmap.org/wiki/Nominatim\" target=\"_blank\" data-i18n=\"credits.nominatim\">Nominatim</a>",
|
"nominatim": "Search by <a href=\"https://wiki.openstreetmap.org/wiki/Nominatim\" target=\"_blank\" data-i18n=\"credits.nominatim\">Nominatim</a>",
|
||||||
"openstreetmap": "© <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\" >OpenStreetMap contributors</a> under <a target=\"_blank\" href=\"https://opendatacommons.org/licenses/odbl/\" >ODbL</a>"
|
"openstreetmap": "© <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\" >OpenStreetMap contributors</a> under <a target=\"_blank\" href=\"https://opendatacommons.org/licenses/odbl/\" >ODbL</a>"
|
||||||
},
|
},
|
||||||
|
"export": {
|
||||||
|
"format": "Format",
|
||||||
|
"format_csv": "CSV",
|
||||||
|
"format_geojson": "GeoJSON",
|
||||||
|
"format_gpx": "GPX",
|
||||||
|
"format_kml": "KML",
|
||||||
|
"route-from-to": "{{from}} -> {{to}} ({{distance}}km)",
|
||||||
|
"route-loop": "{{from}} ({{distance}}km)",
|
||||||
|
"title": "Export route",
|
||||||
|
"trackname": "Name"
|
||||||
|
},
|
||||||
"footer": {
|
"footer": {
|
||||||
"ascend": "Ascend (Plain ascend)",
|
"ascend": "Ascend (Plain ascend)",
|
||||||
"cost": "Cost (Mean cost factor)",
|
"cost": "Cost (Mean cost factor)",
|
||||||
|
|
@ -100,6 +111,9 @@
|
||||||
"zoomInTitle": "Zoom in",
|
"zoomInTitle": "Zoom in",
|
||||||
"zoomOutTitle": "Zoom out"
|
"zoomOutTitle": "Zoom out"
|
||||||
},
|
},
|
||||||
|
"modal": {
|
||||||
|
"close": "Close"
|
||||||
|
},
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"about": "About",
|
"about": "About",
|
||||||
"alternative": {
|
"alternative": {
|
||||||
|
|
@ -108,13 +122,7 @@
|
||||||
"second": "2nd alternative",
|
"second": "2nd alternative",
|
||||||
"third": "3rd alternative"
|
"third": "3rd alternative"
|
||||||
},
|
},
|
||||||
"download": {
|
"export": "Export",
|
||||||
"csv": "data CSV",
|
|
||||||
"geojson": "GeoJSON",
|
|
||||||
"gpx": "GPX",
|
|
||||||
"kml": "KML",
|
|
||||||
"title": "Download"
|
|
||||||
},
|
|
||||||
"load": {
|
"load": {
|
||||||
"nogos": "No-go areas",
|
"nogos": "No-go areas",
|
||||||
"title": "Load"
|
"title": "Load"
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue