How to add the Download button to a gpxGroup map

[marcoA152]

Hallo. I'm sorry to bother you but I struggling with this (my) issue: I'm trying to add a Download button to a multiple .gpx tracks map from your examples.
On single gpx file map the button is shown but on multiple gpx map is not present. There is a way to add it?

Thanks in advance

[Raruto]

Hi Marco,

probably when using the L.GpxGroup class the following variable is not setted:

this._downloadURL = url; // see: leaflet-elevation/src/control.js#741

Take a look at this other #160 (comment) to start monkey patching that class as you wish (aka L.Class.include()).

👋 Raruto

---

leaflet-gpxgroup.js

leaflet-elevation/libs/leaflet-gpxgroup.js

Lines 172 to 177 in ea15556

 _loadGeoJSON: function(geojson, fallbackName) { 
   if (geojson) { 
     geojson.name = geojson.name || (geojson[0] && geojson[0].properties.name) || fallbackName; 
     this._loadRoute(geojson); 
   } 
 }, 

leaflet-elevation.js

leaflet-elevation/src/control.js

Lines 1300 to 1312 in ea15556

 if (this.options.downloadLink && this._downloadURL) { // TODO: generate dynamically file content instead of using static file urls. 
 	this._summary._container.innerHTML += '<span class="download"><a href="#">' + L._('Download') + '</a></span>' 
 	_.select('.download a', this._summary._container).onclick = (e) => { 
 		e.preventDefault(); 
 		let event = { downloadLink: this.options.downloadLink, confirm: _.saveFile.bind(this, this._downloadURL) }; 
 		if (this.options.downloadLink == 'modal' && typeof CustomEvent === "function") { 
 			document.dispatchEvent(new CustomEvent("eletrack_download", { detail: event })); 
 		} else if (this.options.downloadLink == 'link' || this.options.downloadLink === true) { 
 			event.confirm(); 
 		} 
 		this.fire('eletrack_download', event); 
 	}; 
 } 

leaflet-elevation/src/control.js

Lines 737 to 745 in ea15556

 _loadFile(url) { 
 	fetch(url) 
 		.then((response) => response.text()) 
 		.then((data)     => { 
 			this._downloadURL = url; // TODO: handle multiple urls? 
 			this._parseFromString(data) 
 				.then( geojson => geojson && this._loadLayer(geojson)); 
 		}).catch((err) => console.warn(err)); 
 }, 

[marcoA152]

Thank you i will try the way you have suggested, but but probably the fastest (and dirt) thing to do is to put a direct anchor to the gpx files under the "elevation-div"

Thanks for your work and for this amazing plugin!