Add 20km allowed zone icon (#347)

Co-authored-by: Gautier P <gautier_git@damsy.net>

css/style.css

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

index.html

@@ -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 />

js/control/Export.js

@@ -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();
 

js/control/Message.js

@@ -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');
     },

js/index.js

@@ -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({
+        pois = new BR.PoiMarkers(routing);
-            routing: 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, ';');

js/plugin/CircleGoArea.js

@@ -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);

js/plugin/NogoAreas.js

@@ -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();

js/plugin/POIMarkers.js

@@ -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
             };
         });

js/router/BRouter.js

@@ -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) {
+    getUrl: function(latLngs, pois, circlego, format, trackname, exportWaypoints) {
-        var urlParams = this.getUrlParams(latLngs, pois, format);
+        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) {

locales/en.json

@@ -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",

locales/fr.json

@@ -61,7 +61,7 @@
   "keyboard": {
     "backspace": "Retour chariot",
     "escape": "Échap",
-    "generic-shortcut": "{{action}} (touche {{key}} )",
+    "generic-shortcut": "{{action}} (touche {{key}})",
     "shift": "Maj"
   },
   "layers": {
@@ -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",