Added unit selection

css/site.css

@@ -194,31 +194,47 @@ button.mapbox-directions-button-add
    background-color: rgba(255, 255, 255, 0.2);
 }
 
-.leaflet-osrm-tools-language-list a
+.leaflet-osrm-tools-localization-popup
 {
-    width: 90%;
+  width: 90%;
+}
+
+.leaflet-osrm-tools-language-list
+{
+  float: left;
+  width: 50%;
+}
+.leaflet-osrm-tools-units-list
+{
+  float: right;
+  width: 50%;
+}
+
+.leaflet-osrm-tools-localization-popup a
+{
+    width: 100%;
     height: auto;
     color: #fff;
     background-color: inherit;
 }
 
-.leaflet-osrm-tools-language-list a:hover
+.leaflet-osrm-tools-localization-popup a:hover
 {
-    width: 90%;
+    width: 100%;
     height: auto;
     color: #fff;
     background-color: rgba(255, 255, 255, 0.1);
 }
 
-.leaflet-osrm-tools-language
+.leaflet-osrm-tools-localization
 {
   position: absolute;
   top: 3px;
   left: 78px;
 }
 
 
-.leaflet-osrm-tools-language:hover
+.leaflet-osrm-tools-localization:hover
 {
    background-color: rgba(255, 255, 255, 0.2);
 }

i18n/de.js

@@ -5,6 +5,6 @@ module.exports = {
   'Open in JOSM': 'In JSOM öffnen',
   'Download as GPX': 'Als GPX herunterladen',
   'Short': 'Verkürzt',
-  'Select Language': 'Sprache auswählen',
+  'Select language and units': 'Sprache und Einheiten auswählen',
   'Print': 'Drucken',
 };

i18n/en.js

@@ -5,6 +5,6 @@ module.exports = {
   'Open in JOSM': 'Open in JSOM',
   'Download as GPX': 'Download as GPX',
   'Short': 'Short',
-  'Select Language': 'Select Language',
+  'Select language and units': 'Select language and units',
   'Print': 'Print',
 };

src/directions_theme.js

@@ -50,7 +50,7 @@ var options = {
     linkButtonClass: 'mapbox-directions-icon mapbox-link-icon',
     editorButtonClass: 'mapbox-directions-icon mapbox-editor-icon',
     josmButtonClass: 'mapbox-directions-icon mapbox-josm-icon',
-    languageButtonClass: 'mapbox-directions-icon mapbox-flag-icon',
+    localizationButtonClass: 'mapbox-directions-icon mapbox-flag-icon',
     printButtonClass: 'icon printer',
     toolsContainerClass: 'fill-dark dark',
   }

src/index.js

@@ -15,12 +15,6 @@ var map = L.map('map', {
   layers: [options.layers[viewOptions.layer]]
 }).setView(viewOptions.center, viewOptions.zoom);
 
-/*var mapbox = L.tileLayer('https://{s}.tiles.mapbox.com/v3/dennisl.4e2aab76/{z}/{x}/{y}.png',
-    {attribution: '&copy; <a href="http://mapbox.com/">MapBox</a> &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}
-    ).addTo(map);
-*/
-
-
 var lrm = L.Routing.control(L.extend({language: viewOptions.language,
                                       units: viewOptions.units,
                                       serviceURL: viewOptions.service,

src/options.js

@@ -4,7 +4,9 @@ var defaultView = {
   center: L.latLng(48.84, 10.10),
   zoom: 5,
   waypoints: [],
-  language: 'en'
+  language: 'en',
+  service: 'Car (fastest)',
+  layer: 'OSRM bright',
 };
 
 var defaultControl = {
@@ -59,14 +61,9 @@ var layers = {
   })
 };
 
-var defaultService = 'Car (fastest)';
-var defaultLayer = 'OSRM bright';
-
 module.exports = {
   viewDefaults: defaultView,
   controlDefaults: defaultControl,
-  service: defaultService,
-  layer: defaultLayer,
   layers: layers,
   services: services,
 };

src/tools.js

@@ -12,10 +12,11 @@ var Control = L.Control.extend({
     toolContainerClass: "",
     editorButtonClass: "",
     josmButtonClass: "",
-    languageButtonClass: "",
+    localizationButtonClass: "",
     printButtonClass: "",
     gpxLinkClass: "",
-    language: "en"
+    language: "en",
+    units: "metric"
   },
 
   initialize: function(lrm, options) {
@@ -32,8 +33,8 @@ var Control = L.Control.extend({
         josmContainer,
         josmButton,
         popupCloseButton,
-        languageContainer,
-        languageButton,
+        localizationContainer,
+        localizationButton,
         printContainer,
         printButton,
         gpxContainer;
@@ -56,10 +57,10 @@ var Control = L.Control.extend({
     josmButton.title = localization[this.options.language]['Open in JOSM'];
     L.DomEvent.on(josmButton, 'click', this._openJOSM, this);
 
-    languageContainer = L.DomUtil.create('div', 'leaflet-osrm-tools-language', this._container);
-    languageButton = L.DomUtil.create('span', this.options.languageButtonClass, languageContainer);
-    languageButton.title = localization[this.options.language]['Select Language'];
-    L.DomEvent.on(languageButton, 'click', this._selectLanguage, this);
+    localizationContainer = L.DomUtil.create('div', 'leaflet-osrm-tools-localization', this._container);
+    localizationButton = L.DomUtil.create('span', this.options.localizationButtonClass, localizationContainer);
+    localizationButton.title = localization[this.options.language]['Select language and units'];
+    L.DomEvent.on(localizationButton, 'click', this._selectLocalization, this);
 
     printContainer = L.DomUtil.create('div', 'leaflet-osrm-tools-print', this._container);
     printButton = L.DomUtil.create('span', this.options.printButtonClass, printContainer);
@@ -107,6 +108,7 @@ var Control = L.Control.extend({
       center: this._map.getCenter(),
       waypoints: this._lrm.getWaypoints(),
       language: this.options.language,
+      units: this.options.units,
     };
   },
 
@@ -159,24 +161,40 @@ var Control = L.Control.extend({
     window.location.href = links.format(link, options);
   },
 
-  _selectLanguage: function() {
-    var list = L.DomUtil.create('ul', 'leaflet-osrm-tools-language-list'),
+  _selectLocalization: function() {
+    var container = L.DomUtil.create('div', 'leaflet-osrm-tools-localization-popup'),
+        languageList = L.DomUtil.create('ul', 'leaflet-osrm-tools-language-list', container),
+        unitsList = L.DomUtil.create('ul', 'leaflet-osrm-tools-units-list', container),
         options = this._getLinkOptions(),
         language,
+        unitSystems,
+        i,
         item,
         link;
 
     for (language in localization)
     {
-      item = L.DomUtil.create('il', '', list);
+      item = L.DomUtil.create('il', '', languageList);
       link = L.DomUtil.create('a', '', item);
       options.language = language;
       link.href = links.format(window.location.href, options);
       link.alt = localization[language].name;
       link.innerHTML = localization[language].name;
     }
 
-    this._openPopup(list);
+    options.language = this.options.language;
+    unitSystems = ['Metric', 'Imperial'];
+    for (i = 0; i < unitSystems.length; i++)
+    {
+      item = L.DomUtil.create('il', '', unitsList);
+      link = L.DomUtil.create('a', '', item);
+      options.units = unitSystems[i].toLowerCase();
+      link.href = links.format(window.location.href, options);
+      link.alt = unitSystems[i];
+      link.innerHTML = unitSystems[i];
+    }
+
+    this._openPopup(container);
   },
 
   _updateDownloadLink: function() {