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

Add 20km allowed zone icon (#347)

Browse source 
Co-authored-by: Gautier P <gautier_git@damsy.net>
This commit is contained in:
Gautier P 2020-12-01 20:56:14 +01:00 • committed by GitHub
parent 1958f55f18
commit 779c720b7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 296 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

3
css/style.css
View file

@ -197,6 +197,9 @@ input#trackname:focus:invalid {
.pois-draw-enabled {
cursor: cell;
}
.circlego-draw-enabled {
cursor: pointer;
}
#map {
/* center error message horizontally */

1
index.html
View file

@ -373,6 +373,7 @@
Source
</legend>
<p>
<input type="text" id="nogoJSON" hidden />
<label for="nogoURL" data-i18n="loadNogos.url">URL: </label>
<input type="text" name="nogoURL" id="nogoURL" /><br />
or<br />

2
js/control/Export.js
View file

@ -47,7 +47,7 @@ BR.Export = L.Class.extend({
var name = encodeURIComponent(exportForm['trackname'].value);
var includeWaypoints = exportForm['include-waypoints'].checked;
var uri = this.router.getUrl(this.latLngs, this.pois.getMarkers(), format, name, includeWaypoints);
var uri = this.router.getUrl(this.latLngs, this.pois.getMarkers(), null, format, name, includeWaypoints);
e.preventDefault();

10
js/control/Message.js
View file

@ -40,8 +40,16 @@ BR.Message = L.Class.extend({
},
showError: function(err) {
if (err == 'Error: target island detected for section 0\n') {
if (err && err.message) err = err.message;
if (err == 'target island detected for section 0\n') {
err = i18next.t('warning.no-route-found');
} else if (err == 'no track found at pass=0\n') {
err = i18next.t('warning.no-route-found');
} else if (err == 'to-position not mapped in existing datafile\n') {
err = i18next.t('warning.invalid-route-to');
} else if (err == 'from-position not mapped in existing datafile\n') {
err = i18next.t('warning.invalid-route-from');
}
this._show(err, 'error');
},

64
js/index.js
View file

@ -34,6 +34,7 @@
drawButton,
deleteRouteButton,
pois,
circleGo,
urlHash;
// By default bootstrap-select use glyphicons
@ -74,7 +75,10 @@
routing.draw(true);
control.state('deactivate-draw');
},
title: i18next.t('keyboard.generic-shortcut', { action: '$t(map.draw-route-start)', key: 'D' })
title: i18next.t('keyboard.generic-shortcut', {
action: '$t(map.draw-route-start)',
key: 'D'
})
}
]
});
@ -84,7 +88,10 @@
function() {
routing.reverse();
},
i18next.t('keyboard.generic-shortcut', { action: '$t(map.reverse-route)', key: 'R' })
i18next.t('keyboard.generic-shortcut', {
action: '$t(map.reverse-route)',
key: 'R'
})
);
var deletePointButton = L.easyButton(
@ -92,7 +99,10 @@
function() {
routing.deleteLastPoint();
},
i18next.t('keyboard.generic-shortcut', { action: '$t(map.delete-last-point)', key: 'Z' })
i18next.t('keyboard.generic-shortcut', {
action: '$t(map.delete-last-point)',
key: 'Z'
})
);
deleteRouteButton = L.easyButton(
@ -100,7 +110,10 @@
function() {
clearRoute();
},
i18next.t('keyboard.generic-shortcut', { action: '$t(map.clear-route)', key: '$t(keyboard.backspace)' })
i18next.t('keyboard.generic-shortcut', {
action: '$t(map.clear-route)',
key: '$t(keyboard.backspace)'
})
);
L.DomEvent.addListener(
@ -181,7 +194,10 @@
profile.update(evt.options);
});
BR.NogoAreas.MSG_BUTTON = i18next.t('keyboard.generic-shortcut', { action: '$t(map.nogo.draw)', key: 'N' });
BR.NogoAreas.MSG_BUTTON = i18next.t('keyboard.generic-shortcut', {
action: '$t(map.nogo.draw)',
key: 'N'
});
BR.NogoAreas.MSG_BUTTON_CANCEL = i18next.t('keyboard.generic-shortcut', {
action: '$t(map.nogo.cancel)',
key: '$t(keyboard.escape)'
@ -243,9 +259,9 @@
styles: BR.conf.routingStyles
});
pois = new BR.PoiMarkers({
routing: routing
});
pois = new BR.PoiMarkers(routing);
circleGo = new BR.CircleGoArea(routing, nogos, pois);
pois.circlego = circleGo;
exportRoute = new BR.Export(router, pois);
@ -305,7 +321,22 @@
}
nogos.addTo(map);
L.easyBar([drawButton, reverseRouteButton, nogos.getButton(), deletePointButton, deleteRouteButton]).addTo(map);
var shouldAddCircleGo = false;
var lang = i18next.languages.length && i18next.languages[0];
if (lang.startsWith('fr')) {
circleGo.options.radius = 20000;
shouldAddCircleGo = true;
}
if (shouldAddCircleGo) circleGo.addTo(map);
var buttons = [drawButton, reverseRouteButton, nogos.getButton()];
if (shouldAddCircleGo) buttons.push(circleGo.getButton());
buttons.push(deletePointButton, deleteRouteButton);
L.easyBar(buttons).addTo(map);
nogos.preventRoutePointOnCreate(routing);
if (BR.keys.strava) {
@ -322,7 +353,10 @@
map.addControl(
new BR.OpacitySliderControl({
id: 'route',
title: i18next.t('map.opacity-slider-shortcut', { action: '$t(map.opacity-slider)', key: 'M' }),
title: i18next.t('map.opacity-slider-shortcut', {
action: '$t(map.opacity-slider)',
key: 'M'
}),
muteKeyCode: 77, // m
callback: L.bind(routing.setOpacity, routing)
})
@ -358,6 +392,11 @@
var opts = router.parseUrlParams(url2params(url));
router.setOptions(opts);
routingOptions.setOptions(opts);
if (opts.circlego) {
// must be done before nogos!
circleGo.options.radius = opts.circlego[2];
circleGo.setCircle([opts.circlego[0], opts.circlego[1]]);
}
nogos.setOptions(opts);
profile.update(opts);
@ -366,7 +405,6 @@
routing.clear();
routing.setWaypoints(opts.lonlats);
}
if (opts.pois) {
pois.setMarkers(opts.pois);
}
@ -384,7 +422,9 @@
urlHash = new L.Hash(null, null);
// this callback is used to append anything in URL after L.Hash wrote #map=zoom/lat/lng/layer
urlHash.additionalCb = function() {
var url = router.getUrl(routing.getWaypoints(), pois.getMarkers(), null).substr('brouter?'.length + 1);
var url = router
.getUrl(routing.getWaypoints(), pois.getMarkers(), circleGo.getCircle(), null)
.substr('brouter?'.length + 1);
// by default brouter use | as separator. To make URL more human-readable, we remplace them with ; for users
url = url.replace(/\|/g, ';');

191
js/plugin/CircleGoArea.js Normal file
View file

@ -0,0 +1,191 @@
BR.CircleGoArea = L.Control.extend({
circleLayer: null,
options: {
radius: 1000, // in meters
shortcut: {
draw: {
enable: 73, // char code for 'i'
disable: 27 // char code for 'ESC'
}
}
},
initialize: function(routing, nogos, pois) {
this.routing = routing;
this.nogos = nogos;
this.pois = pois;
},
onAdd: function(map) {
var self = this;
this.map = map;
this.circleLayer = L.layerGroup([]).addTo(map);
var radiusKm = (this.options.radius / 1000).toFixed();
this.drawButton = L.easyButton({
states: [
{
stateName: 'activate-circlego',
icon: 'fa-circle-o',
onClick: function() {
self.draw(true);
},
title: i18next.t('keyboard.generic-shortcut', {
action: i18next.t('map.draw-circlego-start', { radius: radiusKm }),
key: 'I'
})
},
{
stateName: 'deactivate-circlego',
icon: 'fa-circle-o active',
onClick: function() {
self.draw(false);
},
title: i18next.t('keyboard.generic-shortcut', {
action: i18next.t('map.draw-circlego-stop', { radius: radiusKm }),
key: '$t(keyboard.escape)'
})
}
]
});
map.on('routing:draw-start', function() {
self.draw(false);
});
L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
var container = new L.DomUtil.create('div');
return container;
},
draw: function(enable) {
this.drawButton.state(enable ? 'deactivate-circlego' : 'activate-circlego');
if (enable) {
this.routing.draw(false);
this.pois.draw(false);
this.map.on('click', this.onMapClick, this);
L.DomUtil.addClass(this.map.getContainer(), 'circlego-draw-enabled');
} else {
this.map.off('click', this.onMapClick, this);
L.DomUtil.removeClass(this.map.getContainer(), 'circlego-draw-enabled');
}
},
_keydownListener: function(e) {
if (!BR.Util.keyboardShortcutsAllowed(e)) {
return;
}
if (e.keyCode === this.options.shortcut.draw.disable) {
this.draw(false);
} else if (e.keyCode === this.options.shortcut.draw.enable) {
this.draw(true);
}
},
setNogoCircle: function(center) {
if (center) {
var polygon = this.circleToPolygon(center, this.options.radius);
$('#nogoJSON').val(JSON.stringify(polygon));
this.nogos.uploadNogos();
} else {
this.nogos.clear();
}
},
onMapClick: function(e) {
this.setCircle([e.latlng.lng, e.latlng.lat]);
},
setCircle: function(center) {
var self = this;
var icon = L.VectorMarkers.icon({
icon: 'home',
markerColor: BR.conf.markerColors.circlego
});
var marker = L.marker([center[1], center[0]], { icon: icon, draggable: true, name: name })
.on('dragend', function(e) {
self.setNogoCircle([e.target.getLatLng().lng, e.target.getLatLng().lat]);
})
.on('click', function() {
var drawing = self.drawButton.state() == 'deactivate-circlego';
if (drawing) {
self.circleLayer.removeLayer(marker);
self.setNogoCircle(undefined);
}
});
this.clear();
marker.addTo(this.circleLayer);
this.setNogoCircle(center);
this.draw(false);
},
clear: function() {
this.circleLayer.clearLayers();
},
getButton: function() {
return this.drawButton;
},
getCircle: function() {
var circle = this.circleLayer.getLayers().map(function(it) {
return it.getLatLng();
});
if (circle && circle.length) {
return [circle[0].lng.toFixed(6), circle[0].lat.toFixed(6), this.options.radius].join(',');
} else {
return null;
}
},
toRadians: function(angleInDegrees) {
return (angleInDegrees * Math.PI) / 180;
},
toDegrees: function(angleInRadians) {
return (angleInRadians * 180) / Math.PI;
},
offset: function(c1, distance, bearing) {
var lon1 = this.toRadians(c1[0]);
var lat1 = this.toRadians(c1[1]);
var dByR = distance / 6378137; // distance divided by 6378137 (radius of the earth) wgs84
var lat = Math.asin(Math.sin(lat1) * Math.cos(dByR) + Math.cos(lat1) * Math.sin(dByR) * Math.cos(bearing));
var lon =
lon1 +
Math.atan2(
Math.sin(bearing) * Math.sin(dByR) * Math.cos(lat1),
Math.cos(dByR) - Math.sin(lat1) * Math.sin(lat)
);
return [this.toDegrees(lon), this.toDegrees(lat)];
},
circleToPolygon: function(center, radius, numberOfSegments) {
var n = numberOfSegments ? numberOfSegments : 64;
var inner = [];
for (var i = 0; i < n; ++i) {
inner.push(this.offset(center, radius, (2 * Math.PI * -i) / n));
}
inner.push(inner[0]);
return {
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: inner
}
}
]
};
}
});
BR.CircleGoArea.include(L.Evented.prototype);

6
js/plugin/NogoAreas.js
View file

@ -162,9 +162,13 @@ BR.NogoAreas = L.Control.extend({
var self = this;
var geoJSONPromise;
var nogoJSON = $('#nogoJSON').val(); //hidden
var nogoURL = $('#nogoURL').val();
var nogoFile = $('#nogoFile')[0].files[0];
if (nogoURL) {
if (nogoJSON) {
geoJSONPromise = Promise.resolve(JSON.parse(nogoJSON));
$('#nogoJSON').val(undefined);
} else if (nogoURL) {
// TODO: Handle {{bbox}}
geoJSONPromise = fetch(nogoURL).then(function(response) {
response.json();

11
js/plugin/POIMarkers.js
View file

@ -1,8 +1,8 @@
BR.PoiMarkers = L.Control.extend({
markersLayer: null,
circlego: null,
options: {
routing: null,
shortcut: {
draw: {
enable: 80, // char code for 'p'
@ -10,6 +10,10 @@ BR.PoiMarkers = L.Control.extend({
}
}
},
initialize: function(routing) {
this.routing = routing;
this.circlego = null;
},
onAdd: function(map) {
var self = this;
@ -54,7 +58,8 @@ BR.PoiMarkers = L.Control.extend({
draw: function(enable) {
this.drawButton.state(enable ? 'deactivate-poi' : 'activate-poi');
if (enable) {
this.options.routing.draw(false);
this.routing.draw(false);
this.circlego.draw(false);
this.map.on('click', this.onMapClick, this);
L.DomUtil.addClass(this.map.getContainer(), 'pois-draw-enabled');
} else {
@ -129,7 +134,7 @@ BR.PoiMarkers = L.Control.extend({
getMarkers: function() {
return this.markersLayer.getLayers().map(function(it) {
return {
latlng: it._latlng,
latlng: it.getLatLng(),
name: it.options.name
};
});

24
js/router/BRouter.js
View file

@ -3,7 +3,7 @@ L.BRouter = L.Class.extend({
// NOTE: the routing API used here is not public!
// /brouter?lonlats=1.1,1.2|2.1,2.2|3.1,3.2|4.1,4.2&nogos=-1.1,-1.2,1|-2.1,-2.2,2&profile=shortest&alternativeidx=1&format=kml
URL_TEMPLATE:
'/brouter?lonlats={lonlats}&nogos={nogos}&polylines={polylines}&polygons={polygons}&profile={profile}&alternativeidx={alternativeidx}&format={format}',
'/brouter?lonlats={lonlats}&profile={profile}&alternativeidx={alternativeidx}&format={format}&nogos={nogos}&polylines={polylines}&polygons={polygons}',
URL_PROFILE_UPLOAD: BR.conf.host + '/brouter/profile',
PRECISION: 6,
NUMBER_SEPARATOR: ',',
@ -42,7 +42,7 @@ L.BRouter = L.Class.extend({
L.setOptions(this, options);
},
getUrlParams: function(latLngs, pois, format) {
getUrlParams: function(latLngs, pois, circlego, format) {
params = {};
if (this._getLonLatsString(latLngs) != null) params.lonlats = this._getLonLatsString(latLngs);
@ -59,6 +59,8 @@ L.BRouter = L.Class.extend({
if (pois && this._getLonLatsNameString(pois) != null) params.pois = this._getLonLatsNameString(pois);
if (circlego) params.circlego = circlego;
params.alternativeidx = this.options.alternative;
if (format != null) {
@ -100,15 +102,27 @@ L.BRouter = L.Class.extend({
if (params.pois) {
opts.pois = this._parseLonLatNames(params.pois);
}
if (params.circlego) {
var circlego = params.circlego.split(',');
if (circlego.length == 3) {
circlego = [
Number.parseFloat(circlego[0]),
Number.parseFloat(circlego[1]),
Number.parseInt(circlego[2])
];
opts.circlego = circlego;
}
}
return opts;
},
getUrl: function(latLngs, pois, format, trackname, exportWaypoints) {
var urlParams = this.getUrlParams(latLngs, pois, format);
getUrl: function(latLngs, pois, circlego, format, trackname, exportWaypoints) {
var urlParams = this.getUrlParams(latLngs, pois, circlego, format);
var args = [];
if (urlParams.lonlats != null && urlParams.lonlats.length > 0)
args.push(L.Util.template('lonlats={lonlats}', urlParams));
if (urlParams.pois != null && urlParams.pois.length > 0) args.push(L.Util.template('pois={pois}', urlParams));
if (urlParams.circlego != null) args.push(L.Util.template('circlego={circlego}', urlParams));
if (urlParams.nogos != null) args.push(L.Util.template('nogos={nogos}', urlParams));
if (urlParams.polylines != null) args.push(L.Util.template('polylines={polylines}', urlParams));
if (urlParams.polygons != null) args.push(L.Util.template('polygons={polygons}', urlParams));
@ -129,7 +143,7 @@ L.BRouter = L.Class.extend({
},
getRoute: function(latLngs, cb) {
var url = this.getUrl(latLngs, null, 'geojson'),
var url = this.getUrl(latLngs, null, null, 'geojson'),
xhr = new XMLHttpRequest();
if (!url) {

4
locales/en.json
View file

@ -94,6 +94,8 @@
"delete-nogo-areas": "Delete all no-go areas",
"delete-pois": "Delete all points of interest",
"delete-route": "Delete route",
"draw-circlego-start": "Draw limited {{radius}}km go-to zone",
"draw-circlego-stop": "Stop drawing limited {{radius}}km go-to zone",
"draw-poi-start": "Draw points of interest",
"draw-poi-stop": "Stop drawing points of interest",
"draw-route-start": "Draw route",
@ -267,6 +269,8 @@
},
"warning": {
"cannot-get-route": "Error getting route URL",
"invalid-route-from": "Start marker is too far from a route.",
"invalid-route-to": "Destination marker is too far from a route.",
"no-response": "no response from server",
"no-route-found": "Error: cannot find a route for given points. Maybe try to move them closer to roads?",
"profile-error": "Profile error: no or empty response from server",

2
locales/fr.json
View file

@ -94,6 +94,8 @@
"delete-nogo-areas": "Supprimer toutes les zones interdites",
"delete-pois": "Supprimer tous les points d'intérêt ",
"delete-route": "Supprimer l'itinéraire",
"draw-circlego-start": "Ajouter une zone limite de {{radius}} km",
"draw-circlego-stop": "Arrêter l'ajout d'une zone limit de {{radius}} km",
"draw-poi-start": "Ajouter des points d'intérêt",
"draw-poi-stop": "Arrêter l'ajout de points d'intérêt",
"draw-route-start": "Dessiner l'itinéraire",