Feature: Map compass and north alignment

[AbsentData]

Solves #199, adds a compass to the track map and an option to toggle it, as well as an option to rotate the track so that it faces north. I don't fully understand how the map works right now so I doubt this code fits well, but I have tested it and it seems to consistently work well.

[vercel]

@AbsentData is attempting to deploy a commit to the f1-dash Team on Vercel.

A member of the Team first needs to authorize it.

[MrBiscuit921]

looks good to me but personally i think you should just add a little N at the top of the red triangle
eg:

or

and for those i just used the props
className="fill-zinc-500"
fontSize={300}
fontWeight="semibold"

[AbsentData]

@MrBiscuit921 can you show the code you used for that? Also, I would recommend using className="fill-zinc-700" to be consistent with the corner numbers. I do agree that that would be a good feature, I just wasn't certain the best way to implement it.

[MrBiscuit921]

@MrBiscuit921 can you show the code you used for that? Also, I would recommend using className="fill-zinc-700" to be consistent with the corner numbers. I do agree that that would be a good feature, I just wasn't certain the best way to implement it.

this is my code i dont know how well it is for performance or anything but this is what i used

const Compass = ({ x, y, angle }: CompassProps) => {
	let northPos = rotate(0, 400, angle, 0, 0);
	let sideDif = rotate(100, 0, angle, 0, 0);

	// Calculate position for the "N" label - 250 units away from the red point
	const labelDistance = 250;
	const scale = 1 + labelDistance / Math.sqrt(northPos.x * northPos.x + northPos.y * northPos.y);
	const labelPos = {
		x: northPos.x * scale,
		y: northPos.y * scale,
	};

	return (
		<>
			<text
				x={x + labelPos.x}
				y={y + labelPos.y}
				textAnchor="middle"
				dominantBaseline="middle"
				className="fill-zinc-700"
				fontSize={300}
				fontWeight="semibold"
			>
				N
			</text>
			<polygon
				points={`${x + northPos.x},${y + northPos.y} ${x - sideDif.x},${y - sideDif.y} ${x + sideDif.x},${y + sideDif.y}`}
				fill={"red"}
			/>
			<polygon
				points={`${x - northPos.x},${y - northPos.y} ${x - sideDif.x},${y - sideDif.y} ${x + sideDif.x},${y + sideDif.y}`}
				fill={"white"}
			/>
		</>
	);
};

[AbsentData]

Ah, I was missing the textAnchor and dominantBaseline. It is easier than how you did it though since we already know the distance. I'm added it and I'm gonna commit the changes real quick.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
f1-dash	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 25, 2025 7:53pm

[slowlydev]

Not bad as the weather already is similar to the Apple Watch complications maybe the compass could also follow that design? What do you think?

I have some SVG files for this I could send

[AbsentData]

I think that could look great, please send the SVGs

[slowlydev]

Thats the SVG. (Could've sent it from the beginning but whatever...)

Maybe copy pasting most of it is fine, but probably some .map would make sense for the lines instead of defining each separately.

[AbsentData]

So since all the values in that are hardcoded in, including the text being hardcoded paths, I can't really use that. If you can show me how you got that svg or at least provide some more states for it, I can maybe use it, but as-is I don't know how to go about using that.

[AbsentData]

@slowlydev I know this is a low priority feature but I would love to return to this at some point.