Add GPX button

Project-OSRM · Oct 25, 2014 · 247ace8 · 247ace8
1 parent 03081e0
commit 247ace8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/css/site.css b/css/site.css
@@ -77,7 +77,7 @@ button.mapbox-directions-button-add
 .leaflet-osrm-tools-container
 {
    cursor: pointer;
-   width: 51px;
+   width: 81px;
    height: 26px;
 }
 
@@ -139,6 +139,27 @@ button.mapbox-directions-button-add
    background-color: rgba(255, 255, 255, 0.2);
 }
 
+.leaflet-osrm-tools-gpx
+{
+  position: absolute;
+  top: 3px;
+  left: 53px;
+  text-align: center;
+}
+.leaflet-osrm-tools-gpx a {
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0);
+  width: 25px;
+  height: 20px;
+}
+.leaflet-osrm-tools-gpx a:hover
+{
+  color: #fff;
+  background-color: rgba(255, 255, 255, 0.2);
+  width: 25px;
+  height: 20px;
+}
+
 .leaflet-osrm-tools-popup
 {
    border: 1px solid rgba(0,0,0,0.1);

diff --git a/src/tools.js b/src/tools.js
@@ -9,19 +9,22 @@ var Control = L.Control.extend({
     popupWindowClass: "",
     popupCloseButtonClass: "",
     toolContainerClass: "",
+    gpxLinkClass: "",
   },
 
   initialize: function(lrm, options) {
     L.setOptions(this, options);
     this._lrm = lrm;
+    lrm.on('routesfound', this._updateDownloadLink, this);
   },
 
   onAdd: function(map) {
     var linkContainer,
         linkButton,
         editorContainer,
         editorButton,
-        popupCloseButton;
+        popupCloseButton,
+        gpxContainer;
 
     this._container = L.DomUtil.create('div', 'leaflet-osrm-tools-container leaflet-bar ' + this.options.toolsContainerClass);
     L.DomEvent.disableClickPropagation(this._container);
@@ -38,6 +41,12 @@ var Control = L.Control.extend({
     editorButton.title = "Open in editor";
     L.DomEvent.on(editorButton, 'click', this._openEditor, this);
 
+    gpxContainer = L.DomUtil.create('div', 'leaflet-osrm-tools-gpx', this._container);
+    this._gpxLink = L.DomUtil.create('a', this.options.gpxLinkClass, gpxContainer);
+    this._gpxLink.innerHTML = "GPX";
+    // FIXME i18n
+    this._gpxLink.alt = "Download as GPX";
+
     this._popupWindow = L.DomUtil.create('div',
                                          'leaflet-osrm-tools-popup leaflet-osrm-tools-popup-hide ' + this.options.popupWindowClass,
                                          this._container);
@@ -74,7 +83,7 @@ var Control = L.Control.extend({
     link = links.format(window.location.href, options);
     shortener = links.shortener();
     //window.location.href = link;
-    
+
     linkContainer = L.DomUtil.create('div', 'dark checkbox-pill');
     linkInput = L.DomUtil.create('input', '', linkContainer);
     linkInput.value = link;
@@ -99,6 +108,11 @@ var Control = L.Control.extend({
     this._openPopup(linkContainer);
   },
 
+  _updateDownloadLink: function() {
+    var url = this._lrm.getDownloadURL('gpx');
+    this._gpxLink.href = url;
+  },
+
   _updatePopupPosition: function() {
     var rect = this._container.getBoundingClientRect();
     this._popupWindow.style.position = 'absolute';