ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add track name

Browse source
This commit is contained in:
Gautier Pelloux-Prayer 2019-05-09 15:32:09 +02:00
parent fc5723953a
commit 3aba471c0a
7 changed files with 284 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.prettierignore
View file

@ -7,3 +7,4 @@ yarn.lock
.prettierignore
.tx/
layers/
locales/*.json

186
index.html
View file

@ -89,9 +89,10 @@
</form>
<div class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href=""
data-toggle="dropdown"
class="nav-link"
data-toggle="modal"
data-target="#export"
id="exportButton"
href="#"
role="button"
aria-haspopup="true"
@ -102,44 +103,8 @@
aria-hidden="true"
>
</span>
<span data-i18n="navbar.download.title"
>Download</span
>
<span data-i18n="navbar.export">Export</span>
</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 class="nav-item dropdown">
<a
@ -569,6 +534,147 @@
</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">&times;</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="sidebarTabs" class="leaflet-sidebar-tabs collapsed">
<ul role="tablist">

16
js/control/Download.js
View file

@ -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
View 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
View file

@ -33,7 +33,7 @@
stats,
itinerary,
elevation,
download,
exportRoute,
profile,
trackMessages,
sidebar,
@ -164,7 +164,7 @@
} else {
stats = new BR.TrackStats();
}
download = new BR.Download();
exportRoute = new BR.Export(router);
elevation = new BR.Elevation();
profile = new BR.Profile();
@ -240,8 +240,7 @@
var track = routing.toPolyline(),
segments = routing.getSegments(),
latLngs = routing.getWaypoints(),
segmentsLayer = routing._segments,
urls = {};
segmentsLayer = routing._segments;
elevation.update(track, segmentsLayer);
if (BR.conf.transit) {
@ -251,14 +250,7 @@
}
trackMessages.update(track, segments);
if (latLngs.length > 1) {
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);
exportRoute.update(latLngs);
}
routing.addTo(map);

4
js/router/BRouter.js
View file

@ -112,7 +112,7 @@ L.BRouter = L.Class.extend({
return opts;
},
getUrl: function(latLngs, format) {
getUrl: function(latLngs, format, trackname) {
var urlParams = this.getUrlParams(latLngs, format);
var args = [];
@ -132,6 +132,8 @@ L.BRouter = L.Class.extend({
);
if (urlParams.format != null)
args.push(L.Util.template('format={format}', urlParams));
if (trackname)
args.push(L.Util.template('trackname={trackname}', { trackname }));
var prepend_host = format != null;

22
locales/en.json
View file

@ -21,6 +21,17 @@
"nominatim": "Search by <a href=\"https://wiki.openstreetmap.org/wiki/Nominatim\" target=\"_blank\" data-i18n=\"credits.nominatim\">Nominatim</a>",
"openstreetmap": "&copy; <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": {
"ascend": "Ascend (Plain ascend)",
"cost": "Cost (Mean cost factor)",
@ -100,6 +111,9 @@
"zoomInTitle": "Zoom in",
"zoomOutTitle": "Zoom out"
},
"modal": {
"close": "Close"
},
"navbar": {
"about": "About",
"alternative": {
@ -108,13 +122,7 @@
"second": "2nd alternative",
"third": "3rd alternative"
},
"download": {
"csv": "data CSV",
"geojson": "GeoJSON",
"gpx": "GPX",
"kml": "KML",
"title": "Download"
},
"export": "Export",
"load": {
"nogos": "No-go areas",
"title": "Load"