Svelte VATSIM Stands

A Svelte component to display VATSIM stand occupancy.

Preview

Installation

npm install svelte-vatsim-stands

Usage

Component parameters

<!--
Using the Map component to display the map:
	tileUlr: URL of the tile source 
    (defaults to satellite view)
	viewParams: Initial view parameters 
    {center: [longitude, latitude], zoom: number} (defaults to center of the world)
	sourcePath: Path to the stand data source accessible from the client 
    (can be relative or absolute)
    thresholds: Thresholds for stand occupancy and pilot distance
    bind:currentStand: Binding to the current stand data
-->

<script lang="ts">
	import { Map, tileUrls, type StandData } from "svelte-vatsim-stands";
</script>

<Map
	tileUlr={tileUrls.SATELLITE}
	viewParams={{
		center: [24.8085431, 59.4153153],
		zoom: 16.25
	}}
	sourcePath="/test-stands/EETN.txt"
	thresholds={{
		ktsMaxGroundSpeed: 1,
		kmDistanceFromCenter: 10,
		ftDefaultWingSpan: 50
	}}
	bind:currentStand
/>

1. Minimal example

<script lang="ts">
	import { Map, tileUrls, type StandData } from "svelte-vatsim-stands";
</script>

<Map
	tileUlr={tileUrls.SATELLITE}
	viewParams={{
		center: [24.8085431, 59.4153153],
		zoom: 16.25
	}}
	sourcePath="/test-stands/EETN.txt"
/>

2. Example with a tooltip defined

<script lang="ts">
	import { Map, tileUrls, type StandData } from "svelte-vatsim-stands";

	let currentStand: StandData | null = $state(null);
	let mouseX = $state(0);
	let mouseY = $state(0);

	function handleMouseMove(event: MouseEvent) {
		mouseX = event.clientX;
		mouseY = event.clientY;
	}
</script>

<svelte:window on:mousemove={handleMouseMove} />

{#if currentStand}
	<div class="fixed z-[1000] rounded-lg bg-white p-4 shadow-lg" style="top: {mouseY + 10}px; left: {mouseX + 10}px;">
		<p>Stand <span class="font-bold">{currentStand.name}</span>{!currentStand.occupied ? " ✅" : " ❌"}</p>
		{#if currentStand.occupied}
			<p>Occupied by {currentStand.pilot?.callsign}</p>
		{/if}
	</div>
{/if}

<Map
	tileUlr={tileUrls.SATELLITE}
	viewParams={{
		center: [24.8085431, 59.4153153],
		zoom: 16.25
	}}
	sourcePath="/test-stands/EETN.txt"
	bind:currentStand
/>

Stand source

A publicly accessible txt file following the EuroScope sectorfile format is required to be passed to the component. [N/S]DDD.MM.SS.mmm:[E/W]DDD.MM.SS.mmm:LABEL is the format of each line in the file.

Empty lines and lines starting with ; are ignored.

Example files can be seen in static/test-stands.

Thresholds

A few default thresholds are defined that can be overridden with the thresholds param

Pilots with the following conditions are considered not to be at the airport:

• Ground speed greater than 1.
• Callsign includes _.
• Further than 10km from the defined centerpoint.

To deem a stand occupied, they must be within a wingspan (ftDefaultWingSpan as fallback) distance of the stand.