A BlueMap script that adds a basic distance measuring tool to the website.

BlueMapDistanceMeasurer.js

const positions = [];
const distanceLineMarker = new BlueMap.LineMarker("distanceLineMarker");
distanceLineMarker.line.depthTest = false;
distanceLineMarker.line.linewidth = 2;
bluemap.popupMarkerSet.add(distanceLineMarker);

hijack(bluemap.popupMarker, 'open', function (original) {
	return function () {
		const pos = bluemap.popupMarker.position;
		positions.push([pos.x, pos.y, pos.z]);

		if (positions.length === 2) {
			const prevPos = positions[0];
			const newPos = positions[1];
			const distance = Math.sqrt(Math.pow(prevPos[0] - newPos[0], 2) + Math.pow(prevPos[1] - newPos[1], 2) + Math.pow(prevPos[2] - newPos[2], 2));
			console.log("Distance between " + prevPos + " and " + newPos + " is " + distance);
			distanceLineMarker.data.label = "Distance: " + distance.toFixed(2) + " blocks";

			const avgX = (prevPos[0] + newPos[0]) / 2;
			const avgY = (prevPos[1] + newPos[1]) / 2;
			const avgZ = (prevPos[2] + newPos[2]) / 2;
			distanceLineMarker.position = {x: avgX, y: avgY, z: avgZ};

			const points = [
				prevPos[0] - avgX + 0.5, prevPos[1] - avgY + 1, prevPos[2] - avgZ + 0.5,
				newPos[0] - avgX + 0.5, newPos[1] - avgY + 1, newPos[2] - avgZ + 0.5
			];
			distanceLineMarker.setLine(points);

			//remove the first element
			positions.shift();
		}
		original.call(this);
	};
});

/**
 * Hijack a function with custom behaviour
 * from https://gist.github.com/joshwnj/625349/
 * @param {object} Context object
 * @param {string} Name of the context object's function
 * @param {function} Override function
 * @return {function} Original function
 */
function hijack(object, funcName, override) {
	var original = object[funcName];
	object[funcName] = override(original);
	return original;
}

Here's a demonstration video:

BlueMap.Distance.Measurer.Demo.Video.mp4

ref: BlueMap-Minecraft/BlueMap#523
I suppose we should continue this discussion here.
Could you add a toggle-button to the UI? On one of the corners, next to one of the other buttons should be fine.

I must admit that I wasn't planning on expanding this much further... 😅
Especially because BlueMap's web UI is not very easy to modify through a script without some painful workarounds.
I actually don't particularly like working with JavaScript, so I just wanted to see if I could get this functionality implemented as a proof of concept.
My intent was that someone else could then take this further, to really make it actually nice to use.

How do you use this?

A quick explanation: copy and paste the file into your BlueMap webroot, and inside your webapp.conf file, at the bottom, register the file.
I'll have a better installation guide ready in at most a week or so, hopefully.

How do I "register" it in the webapp.conf file? I'm using the name you gave it, vs some random name.

Thank you! 😊

Maybe add a little "❌" to both ends to cancel/close the line, or is there an easy way to do it already?

I have now moved this script to a full repository, instead of a gist: https://github.com/TechnicJelle/BlueMapWebScripts/tree/main/distance-measurer

If you have comments, issues or feature requests about it, please post them there as GitHub Issues.

⚠️ I will not be responding to comments on this gist any more. ⚠️

Consider it archived.