Skip distance in chart between multiple tracks about leaflet-elevation HOT 7 CLOSED

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:

Related resources

• #56 (comment)
• #251 (comment)

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

	handlers: [ // <-- A list of: Dynamic imports || "ClassName" || function Name() { return { /* a custom object definition */ } }
	'Distance', // <-- same as: import("../src/handlers/distance.js")
	'Time', // <-- same as: import("../src/handlers/time.js")
	'Altitude', // <-- same as: import("../src/handlers/altitude.js")
	'Slope', // <-- same as: import("../src/handlers/slope.js")
	'Speed', // <-- same as: import("../src/handlers/speed.js")
	'Acceleration', // <-- same as: import("../src/handlers/acceleration.js")
	// 'Pace', // <-- same as: import("../src/handlers/pace.js")
	// "Heart", // <-- same as: import("../src/handlers/heart.js")
	// "Cadence", // <-- same as: import("../src/handlers/cadence.js")
	// import('../src/handlers/heart.js'),
	import('../src/handlers/cadence.js'),
	// import('../src/handlers/pace.js'),
	L.Control.Elevation.MyHeart, // <-- see custom functions declared above
	// L.Control.Elevation.MyCadence, // <-- see custom functions declared above
	L.Control.Elevation.MyPace, // <-- see custom functions declared above
	],

• L.Control.Elevation::_registerHandler

leaflet-elevation/src/control.js

Lines 1080 to 1147 in b0006d6

	/**
	* Parse a module definition and attach related function listeners
	*/
	_registerHandler(props) {
	// eg. L.Control.Altitude
	if (typeof props === "function") {
	return this._registerHandler(props.call(this));
	}
	let {
	name,
	attr,
	required,
	deltaMax,
	clampRange,
	decimals,
	meta,
	unit,
	coordinateProperties,
	coordPropsToMeta,
	pointToAttr,
	onPointAdded,
	stats,
	statsName,
	grid,
	scale,
	path,
	tooltip,
	summary
	} = props;
	// eg. "altitude" == true
	if (this.options[name] || required) {
	this._registerDataAttribute({
	name,
	attr,
	meta,
	deltaMax,
	clampRange,
	decimals,
	coordPropsToMeta: _.coordPropsToMeta(coordinateProperties, meta || name, coordPropsToMeta),
	pointToAttr,
	onPointAdded,
	stats,
	statsName,
	});
	if (grid) {
	this._registerAxisGrid(L.extend({ name }, grid));
	}
	if (this.options[name] !== "summary") {
	if (scale) this._registerAxisScale(L.extend({ name, label: unit }, scale));
	if (path) this._registerAreaPath(L.extend({ name }, path));
	}
	if (tooltip || props.tooltips) {
	_.each([tooltip, ...(props.tooltips || [])], t => t && this._registerTooltip(L.extend({ name }, t)));
	}
	if (summary) {
	_.each(summary, (s, k) => summary[k] = L.extend({ unit }, s));
	this._registerSummary(summary);
	}
	}
	},

• L.Control.Elevation::_registerDataAttribute

leaflet-elevation/src/control.js

Lines 1003 to 1078 in b0006d6

	/**
	* Base handler for iterative track statistics (dist, time, z, slope, speed, acceleration, ...)
	*/
	_registerDataAttribute(props) {
	// parse of "coordinateProperties" for later usage
	if (props.coordPropsToMeta) {
	this.on("elepoint_init", (e) => props.coordPropsToMeta.call(this, e));
	}
	// prevent excessive variabile instanstations
	let i, curr, prev, attr = props.attr || props.name;
	// save here a reference to last used point
	let lastValid = {};
	// iteration
	this.on("elepoint_added", ({index, point}) => {
	i = index;
	prev = curr ?? this._data[i]; // same as: this._data[i > 0 ? i - 1 : i]
	curr = this._data[i];
	// retrieve point value
	curr[attr] = props.pointToAttr.call(this, point, i);
	// check and fix missing data on last added point
	if (i > 0 && isNaN(prev[attr])) {
	if (!isNaN(lastValid[attr]) && !isNaN(curr[attr])) {
	prev[attr] = (lastValid[attr] + curr[attr]) / 2;
	} else if (!isNaN(lastValid[attr])) {
	prev[attr] = lastValid[attr];
	} else if (!isNaN(curr[attr])) {
	prev[attr] = curr[attr];
	}
	// update "yAttr" and "xAttr"
	if (props.meta) {
	prev[props.meta] = prev[attr];
	}
	}
	// skip to next iteration for invalid or missing data (eg. i == 0)
	if (isNaN(curr[attr])) {
	return;
	}
	// update reference to last used point
	lastValid[attr] = curr[attr];
	// Limit "crazy" delta values.
	if (props.deltaMax) {
	curr[attr] =_.wrapDelta(curr[attr], prev[attr], props.deltaMax);
	}
	// Range of acceptable values.
	if (props.clampRange) {
	curr[attr] = _.clamp(curr[attr], props.clampRange);
	}
	// Limit floating point precision.
	if (!isNaN(props.decimals)) {
	curr[attr] = _.round(curr[attr], props.decimals);
	}
	// update "track_info" stats (min, max, avg, ...)
	if (props.stats) {
	for (const key in props.stats) {
	let sname = (props.statsName || attr) + (key != '' ? '_' : '');
	this.track_info[sname + key] = props.stats[key].call(this, curr[attr], this.track_info[sname + key], this._data.length);
	}
	}
	// update here some mixins (eg. complex "track_info" stuff)
	if (props.onPointAdded) props.onPointAdded.call(this, curr[attr], i, point);
	});
	},

👋 Raruto

from leaflet-elevation.

I think the pointToAttr code is executed before my flag is added.

Listening to both events (in sequence) you should somehow achieve that goal:

I didn't elaborate, maybe you need some other support flag..

👋 Raruto

from leaflet-elevation.

@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: 🎉

But I am not 100% happy with my solution:

1. 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
            );

            ...
        });

        ...
    }

})

2. 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._dataobject 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).

from leaflet-elevation.

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?

If I'm not mistaken it's used for a similar purpose:

👋 Raruto

from leaflet-elevation.

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.

from leaflet-elevation.

However, you probably need to try adding all of your event listeners before all the various handlers are registered:

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

from leaflet-elevation.

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

from leaflet-elevation.