How can I import the leaflet-elevation. js file offline in a Vue project

[InstantWindy]

Hi！I want to use the L.control. elevation function in the Vue project by introducing the eaflet-elevation. js file. Here is my citation method

But I found that the following errors may occur.

Does it still need to import files like distance.js ?

[Raruto]

Hi @InstantWindy,

I found that the following errors may occur.

Be aware, It looks like you are trying to develop without http server (ie. I don't know how much this mode is supported).

Does it still need to import files like distance.js ?

Yes, otherwise you just need a L.Control.Elevation.Speed (and the others/used handlers) within the global scope:

leaflet-elevation/src/control.js

Lines 750 to 764 in bd9316b

	_loadModules(handlers) {
	// First map known classnames (eg. "Altitude" --> L.Control.Elevation.Altitude)
	handlers = handlers.map((h) => typeof h === 'string' && typeof Elevation[h] !== "undefined" ? Elevation[h] : h);
	// Then load optional classes and custom imports (eg. "Cadence" --> import('../src/handlers/cadence.js'))
	let modules = handlers.map(file => (typeof file === 'string' && this.import(this.__modulesFolder + file.toLowerCase() + '.js')) || (file instanceof Promise && file) || Promise.resolve());
	return Promise.all(modules).then((m) => {
	_.each(m, (exported, i) => {
	let fn = exported && Object.keys(exported)[0];
	if (fn) {
	handlers[i] = Elevation[fn] = (Elevation[fn] ?? exported[fn]);
	}
	});
	_.each(handlers, h => ["function", "object"].includes(typeof h) && this._registerHandler(h));
	});
	},

Here's a fairly complete example:

leaflet-elevation/examples/leaflet-elevation_extended-ui.html

Lines 42 to 221 in bd9316b

	<!-- Custom chart handlers -->
	<script>
	L.Control.Elevation.MyHeart = function() {
	return {
	name: 'heart', // <-- Your custom option name (eg. "heart: true")
	unit: 'bpm',
	meta: 'hr', // <-- point.meta.hr
	coordinateProperties: ["heart", "heartRates", "heartRate"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
	pointToAttr: (point, i) => (point.hr ?? point.meta.hr ?? point.prev('heart')) || 0,
	stats: {
	max: (heart, max = -Infinity) => (heart > max ? heart : max),
	min: (heart, min = +Infinity) => (heart < min ? heart : min),
	avg: (heart, avg = 0, idx = 1) => (heart + avg * (idx - 1)) / idx,
	},
	scale: {
	axis : "y",
	position : "left",
	scale : { min: -1, max : +1 },
	tickPadding: 16,
	labelX : -18,
	labelY : -8,
	},
	path: {
	label : 'ECG',
	yAttr : 'heart',
	scaleX : 'distance',
	scaleY : 'heart',
	color : 'white',
	strokeColor : 'red',
	strokeOpacity: "0.85",
	fillOpacity : "0.1",
	},
	tooltip: {
	chart: (item) => L._("hr: ") + item.heart + " " + 'bpm',
	marker: (item) => Math.round(item.heart) + " " + 'bpm',
	order: 1
	},
	summary: {
	"minbpm": {
	label: "Min BPM: ",
	value: (track, unit) => Math.round(track.heart_min || 0) + '&nbsp;' + unit,
	// order: 30
	},
	"maxbpm": {
	label: "Max BPM: ",
	value: (track, unit) => Math.round(track.heart_max || 0) + '&nbsp;' + unit,
	// order: 30
	},
	"avgbpm": {
	label: "Avg BPM: ",
	value: (track, unit) => Math.round(track.heart_avg || 0) + '&nbsp;' + unit,
	// order: 20
	},
	}
	};
	};
	// L.Control.Elevation.MyCadence = function() {
	// return {
	// name: 'cadence', // <-- Your custom option name (eg. "cadence: true")
	// unit: 'rpm',
	// meta: 'cad', // <-- point.meta.cad
	// coordinateProperties: ["cads", "cadences", "cad", "cadence"], // List of GPX Extensions ("coordinateProperties") to be handled by "@tmcw/toGeoJSON"
	// pointToAttr: (point, i) => (point.cad ?? point.meta.cad ?? point.prev('cadence')) || 0,
	// stats: {
	// max: (cad, max = -Infinity) => (cad > max ? cad : max),
	// min: (cad, min = +Infinity) => (cad < min ? cad : min),
	// avg: (cad, avg = 0, idx = 1) => (cad + avg * (idx - 1)) / idx,
	// },
	// scale: {
	// axis : "y",
	// position : "right",
	// scale : { min: -1, max: +1 },
	// tickPadding: 16,
	// labelX : 25,
	// labelY : -8,
	// },
	// path: {
	// label : 'RPM',
	// yAttr : 'cadence',
	// scaleX : 'distance',
	// scaleY : 'cadence',
	// color : '#FFF',
	// strokeColor : 'blue',
	// strokeOpacity: "0.85",
	// fillOpacity : "0.1",
	// },
	// tooltip: {
	// name: 'cadence',
	// chart: (item) => L._("cad: ") + item.cadence + " " + 'rpm',
	// marker: (item) => Math.round(item.cadence) + " " + 'rpm',
	// order: 1
	// },
	// summary: {
	// "minrpm": {
	// label: "Min RPM: ",
	// value: (track, unit) => Math.round(track.cadence_min || 0) + '&nbsp;' + unit,
	// order: 30
	// },
	// "maxrpm": {
	// label: "Max RPM: ",
	// value: (track, unit) => Math.round(track.cadence_max || 0) + '&nbsp;' + unit,
	// order: 30
	// },
	// "avgrpm": {
	// label: "Avg RPM: ",
	// value: (track, unit) => Math.round(track.cadence_avg || 0) + '&nbsp;' + unit,
	// order: 20
	// },
	// }
	// };
	// }
	L.Control.Elevation.MyPace = function() {
	let opts = this.options;
	let pace = {};
	pace.label = opts.paceLabel || L._(opts.imperial ? 'min/mi' : 'min/km');
	opts.paceFactor = opts.paceFactor || 60; // 1 min = 60 sec
	return {
	name: 'pace',
	unit: pace.label,
	decimals: 2,
	pointToAttr: (point, i) => {
	let dx = (this._data[i].dist - this._data[i > 0 ? i - 1 : i].dist) * 1000;
	let dt = this._data[i].time - this._data[ i > 0 ? i - 1 : i].time;
	return dx > 0 ? Math.abs((dt / dx) / opts.paceFactor) : 0;
	},
	stats: {
	max: (pace, max = -Infinity) => (pace > max ? pace : max),
	min: (pace, min = +Infinity) => (pace < min ? pace : min),
	avg: (pace, avg = 0, idx = 1) => (pace + avg * (idx - 1)) / idx,
	},
	scale : {
	axis : "y",
	position : "right",
	scale : { min : 0, max : +1 },
	tickPadding: 16,
	labelX : 25,
	labelY : -8,
	},
	path: {
	// name : 'pace',
	label : 'Pace',
	yAttr : "pace",
	scaleX : 'distance',
	scaleY : 'pace',
	color : '#03ffff',
	strokeColor : '#000',
	strokeOpacity: "0.5",
	fillOpacity : "0.25",
	},
	tooltip: {
	chart: (item) => L._('pace: ') + item.pace + " " + pace.label,
	marker: (item) => Math.round(item.pace) + " " + pace.label,
	order: 55,
	},
	summary: {
	"minpace" : {
	label: "Min Pace: ",
	value: (track, unit) => Math.round(track.pace_min || 0) + '&nbsp;' + unit,
	order: 55
	},
	"maxpace" : {
	label: "Max Pace: ",
	value: (track, unit) => Math.round(track.pace_max || 0) + '&nbsp;' + unit,
	order: 56
	},
	"avgpace": {
	label: "Avg Pace: ",
	value: (track, unit) => Math.round(track.pace_avg || 0) + '&nbsp;' + unit,
	order: 57
	},
	}
	};
	}
	</script>

leaflet-elevation/examples/leaflet-elevation_extended-ui.html

Lines 253 to 271 in bd9316b

	heart: true, // <-- Intial state of your custom option (true || "summary" || false)
	cadence: true, // <-- Intial state of your custom option (true || "summary" || false)
	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
	],

👋 Raruto