Skip distance in chart between multiple tracks
FabianSchmick opened this issue Β· comments
Skip the distance in graph between multiple tracks and segments
I have one big gpx file with multiple tracks (multiple <trk>
and/or <trkseg>
elements). The end position of the first track (lat, lon) is not always the start position of the second track. So there is a distance between those two. It's divided by some kilometers. The graph visualizes these extra kilometers, but I would like to skip those.
Your environment
- leaflet-elevation: ^2.5.0
- leaflet: ^1.9.4
Steps to reproduce
- See the Fiddle: https://jsfiddle.net/erjqhgc1/1/
- The gpx file: https://gist.github.com/FabianSchmick/fda433f8cca1d5ea9a79355c903ad983
Desired behaviour
Like the graph on https://opentopomap.org which concatenate the tracks without any distance
![Bildschirmfoto 2023-08-16 um 14 19 09](https://private-user-images.githubusercontent.com/17527958/261005436-8b17b079-926d-4369-9df4-b974eed6844a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgzMTQxMDQsIm5iZiI6MTcxODMxMzgwNCwicGF0aCI6Ii8xNzUyNzk1OC8yNjEwMDU0MzYtOGIxN2IwNzktOTI2ZC00MzY5LTlkZjQtYjk3NGVlZDY4NDRhLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEzVDIxMjMyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk1ZGY3NDc4YjU3OGRiNWVjZGIwY2I0ZWFmZTFjMDE3NjA3NDEzZTMyMjc2MWJhMDExN2YzYTExN2IyMGY4Y2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.8utTy2DLSJotEDTmjj3XDWNTVqUlrl8x6cnCQ-OOCAc)
Actual behaviour
The graph of leaflet-eleveation adds the distance between the tracks
![Bildschirmfoto 2023-08-16 um 14 17 52](https://private-user-images.githubusercontent.com/17527958/261005489-cec80863-aa5b-48f1-afd3-c69cedadb07c.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgzMTQxMDQsIm5iZiI6MTcxODMxMzgwNCwicGF0aCI6Ii8xNzUyNzk1OC8yNjEwMDU0ODktY2VjODA4NjMtYWE1Yi00OGYxLWFmZDMtYzY5Y2VkYWRiMDdjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEzVDIxMjMyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI5ZjBmYmY4MmFjODBkY2YxNzM0MGRiN2ZhN2M2ZjUzNjBkZDk1MWMwYmMyMDdjOWUzNzBmNWI1YWI2MjY4MzgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.K5oBJlNQ0246W6DRP_Z-EdTws-jshUndtqnu4VlkDr8)
I have also seen #56 (comment) but this seems not to solve my problem
Hi @FabianSchmick, in here you should actually see some gap between in chart area (ref: https://jsfiddle.net/erjqhgc1/1/).
BTW, I recommend you start by doing some testing by implementing a your own custom handler.
In particular, you can start investigating the following:
leaflet-elevation/src/handlers/distance.js
Lines 1 to 46 in ea15556
Related resources
Currently all additional chart area definitions (altitude, speed, acceleration, ...) are lazy-loaded from the
src/handlers
.So I think a good way to achieve this could be to create a custom definition for this type of graph as well.
It sure won't work out of the box, but maybe with a little tweaking of the "loading" logic it might even turn out to be something more useful.
Below some notable functions:
β’ L.Control.Elevation::options.handlers
leaflet-elevation/examples/leaflet-elevation_extended-ui.html
Lines 255 to 271 in b0006d6
β’ L.Control.Elevation::_registerHandler
leaflet-elevation/src/control.js
Lines 1080 to 1147 in b0006d6
β’ L.Control.Elevation::_registerDataAttribute
leaflet-elevation/src/control.js
Lines 1003 to 1078 in b0006d6
π Raruto
@Raruto thank you for your reply. The hint with investigating the src/handlers/distance.js handler helped a lot. I understand the project more from day to day.
I also could fix my issue: π
![Bildschirmfoto 2023-08-18 um 11 14 44](https://private-user-images.githubusercontent.com/17527958/261560560-980690a3-5c77-4938-ad73-b511d5a37e61.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTgzMTQxMDQsIm5iZiI6MTcxODMxMzgwNCwicGF0aCI6Ii8xNzUyNzk1OC8yNjE1NjA1NjAtOTgwNjkwYTMtNWM3Ny00OTM4LWFkNzMtYjUxMWQ1YTM3ZTYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MTMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjEzVDIxMjMyNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZmMTM2ZWY3ZDViYzAyZTE2NjM5NDk3MzMxNDY0MGM5Njg2MWY1N2VlOWJjNzYzNmFlNTk3MWYxYjI0MjBkMzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.sjE1mZLcjNbXcCRN2p1wpd6xWmWzQHaAb4F63Ln2Cc0)
But I am not 100% happy with my solution:
- Override
_addGeoJSONData
and_addPoint
:
L.Control.Elevation.include({
_addPoint: function (x, y, z, isFirstPoint = false) {
...
this._data.push({
x: x,
y: y,
z: z,
latlng: L.latLng(x, y, z),
isFirstPoint: isFirstPoint
});
...
},
_addGeoJSONData: function (coords, properties, nestingLevel) {
...
coords.forEach((point, i) => {
...
this._addPoint(
point.lat ?? point[1],
point.lng ?? point[0],
point.alt ?? point.meta.ele ?? point[2],
i === 0
);
...
});
...
}
})
- Create my own handler:
export function Distance() {
... // I have copied the full file only to add a few lines of code :/
return {
...
pointToAttr: (point, i) => {
let currentPointDistance = (i > 0 ? this._data[i - 1].dist : 0);
if (this._data[i].isFirstPoint) {
return currentPointDistance;
}
return currentPointDistance + (this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor) / 1000;
},
...
};
}
As you can see, everytime I write ...
I copied the lines from the library. I have to admit, that I am not an experienced JS-Developer, but I don't like to copy so much code. Do you think the new information isFirstPoint
on the this._data
object should live in the source code, maybe this can help others, too? Also, I would like to ask if you know a way to extend the existing handler
and override only the pointToAttr
function-body of it (so I don't have to copy the full content of the src/handlers/distance.js
).
maybe this can help others, too?
It's definitely something that others might be interested in as well, perhaps through a dedicated option.
To be carefully evaluated through a reasonable PR.
I don't like to copy so much code
Handlers files are there to allow a certain degree of flexibility (custom extensions or hotfixes) to other developers looking forward to an official release.
Not much has changed in here, but if you don't override the whole handler file in the future it could be a little more difficult to keep your local changes aligned (monkey patching is leaner, but it's also a dangerous technique).
Do you think the new information isFirstPoint on the this._dataobject should live in the source code?
Alternatively, why not consider the following listener?
leaflet-elevation/src/control.js
Line 368 in ea15556
If I'm not mistaken it's used for a similar purpose:
leaflet-elevation/src/components/chart.js
Lines 67 to 72 in ea15556
π Raruto
I assume the eletrack_added
event is unfortunately too late.
I tried the following:
controlElevation.on('eletrack_added', ({index}) => {
controlElevation._data[index]['isLastPoint'] = true;
});
In the handler
pointToAttr: (point, i) => {
...
if (this._data[i].isLastPoint === true) {
console.log("test");
return currentPointDistance;
}
...
},
I think the pointToAttr
code is executed before my flag is added. So the if
-statement never becomes true
in the first run.
But if it would work, I could omit the monkey patching.
I think the pointToAttr code is executed before my flag is added.
Listening to both events (in sequence) you should somehow achieve that goal:
leaflet-elevation/src/control.js
Line 363 in ea15556
leaflet-elevation/src/control.js
Line 368 in ea15556
I didn't elaborate, maybe you need some other support flag..
π Raruto
However, you probably need to try adding all of your event listeners before all the various handlers are registered:
leaflet-elevation/src/control.js
Lines 243 to 263 in ea15556
When monkey pathching, in order to avoid duplicating too much code, if you just want to run some code (before or after) that function, you can invoke oldProto.onAdd.call()
on the old function reference.
Here it is a similar situation: https://github.com/Raruto/leaflet-ui/blob/31b300a69f0ae70b1d0c767686ca1c25c541f03a/src/leaflet-ui.js#L572-L592
Ahh, great! I couldn't think straight at the moment
This:
controlElevation
.on('eletrack_added', ({index}) => {
controlElevation._data[index]['isLastPoint'] = true;
})
.on('elepoint_added', ({index}) => {
if (controlElevation._data[index ? index -1 : 0]['isLastPoint']) {
controlElevation._data[index]['isFirstPoint'] = true;
}
})
;
And the custom handler from my comment are the solution:
export function Distance() {
... // I have copied the full file only to add a few lines of code :/
return {
...
pointToAttr: (point, i) => {
let currentPointDistance = (i > 0 ? this._data[i - 1].dist : 0);
if (this._data[i].isFirstPoint) {
return currentPointDistance;
}
return currentPointDistance + (this._data[i].latlng.distanceTo(this._data[i > 0 ? i - 1 : i].latlng) * opts.distanceFactor) / 1000;
},
...
};
}
Thanks again for the useful help @Raruto