Add beeline button

css/style.css

@@ -443,6 +443,22 @@ button.btn {
     line-height: 30px;
 }
 
+button.activate-beeline-active,
+button.deactivate-beeline-active {
+    transition-duration: 0.3s;
+}
+button.activate-beeline-active.disabled,
+button.deactivate-beeline-active.disabled {
+    height: 0;
+    border-bottom-width: 0px;
+}
+.mdi.active {
+    fill: #2074b6;
+}
+.mdi {
+    width: 18px;
+}
+
 /* smaller tab height */
 .nav > li > a {
     padding: 2px 15px;

js/index.js

@@ -83,6 +83,40 @@
             ],
         });
 
+        // https://github.com/Templarian/MaterialDesign/blob/d0b28330af6648ca4c50c14d55043d71f813b3ae/svg/vector-line.svg
+        // Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0), https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+        const svg = `
+            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
+                id="mdi-vector-line" width="24" height="24" viewBox="0 0 24 24" class="mdi active">
+                <path d="M15,3V7.59L7.59,15H3V21H9V16.42L16.42,9H21V3M17,5H19V7H17M5,17H7V19H5" />
+            </svg>`;
+        const beelineClickHandler = function (control) {
+            const enabled = routing.toggleBeelineDrawing();
+            control.state(enabled ? 'deactivate-beeline' : 'activate-beeline');
+        };
+        const title = i18next.t('keyboard.generic-shortcut', {
+            action: '$t(map.toggle-beeline)',
+            key: 'B',
+        });
+        const beelineButton = L.easyButton({
+            states: [
+                {
+                    stateName: 'activate-beeline',
+                    icon: svg.replace(' active', ''),
+                    onClick: beelineClickHandler,
+                    title: title,
+                },
+                {
+                    stateName: 'deactivate-beeline',
+                    icon: svg,
+                    onClick: beelineClickHandler,
+                    title: title,
+                },
+            ],
+        });
+        map.on('routing:beeline-start', () => beelineButton.state('deactivate-beeline'));
+        map.on('routing:beeline-end', () => beelineButton.state('activate-beeline'));
+
         var reverseRouteButton = L.easyButton(
             'fa-random',
             function () {
@@ -273,9 +307,11 @@
         });
         map.on('routing:draw-start', function () {
             drawButton.state('deactivate-draw');
+            beelineButton.enable();
         });
         map.on('routing:draw-end', function () {
             drawButton.state('activate-draw');
+            beelineButton.disable();
         });
 
         function onUpdate(err) {
@@ -330,7 +366,7 @@
             circlego.addTo(map);
         }
 
-        var buttons = [drawButton, reverseRouteButton, nogos.getButton()];
+        var buttons = [drawButton, beelineButton, reverseRouteButton, nogos.getButton()];
         if (circlego) buttons.push(circlego.getButton());
         buttons.push(deletePointButton, deleteRouteButton);
 

locales/en.json

@@ -154,6 +154,7 @@
     "strava-biking": "Show Strava biking segments",
     "strava-running": "Show Strava running segments",
     "strava-shortcut": "{{action}}\n({{key}} key to toggle layer, click to reload for current area)",
+    "toggle-beeline": "Toggle straight line",
     "zoomInTitle": "Zoom in",
     "zoomOutTitle": "Zoom out"
   },

locales/keys.js

@@ -13,6 +13,7 @@ i18next.t('map.draw-poi-start');
 i18next.t('map.draw-poi-stop');
 i18next.t('map.draw-route-start');
 i18next.t('map.draw-route-stop');
+i18next.t('map.toggle-beeline');
 i18next.t('map.geocoder');
 i18next.t('map.locate-me');
 i18next.t('map.nogo.cancel');