index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>MEOS.js examples</title>
		<link rel="stylesheet" href="./styles/landing.css" />
	</head>
	<body>
		<main>
			<h1>MEOS.js examples</h1>
			<p class="lead">
				Interactive demos of <a href="https://github.com/MobilityDB/MEOS.js">MEOS.js</a> - 
				MEOS spatiotemporal types running in the browser via WebAssembly.
			</p>

			<div class="cards">
				<a class="card" href="./trips.html">
					<h2>Animated trips<span class="tag">DeckGL + MapLibre</span></h2>
					<p>
						BerlinMOD trajectories animated over a map. Colour by speed, filter to a real Brussels
						commune, restrict a time window, and show live positions, each toggle runs a MEOS
						operation in the browser.
					</p>
				</a>

				<a class="card" href="./compare.html">
					<h2>Compare trips<span class="tag">DeckGL + MapLibre</span></h2>
					<p>
						Two trips recorded at different times. Push one later with MEOS
						<code>shiftTime</code>, then overlay it on the other's window with
						<code>shiftScaleTime</code> to compare them at equal progress.
					</p>
				</a>

				<a class="card" href="./jupyter/lab/index.html">
					<h2>Notebooks<span class="tag">JupyterLite</span></h2>
					<p>
						MEOS.js as an analysis library, in a browser notebook. Run
						<code>TGeomPoint</code> operations (length, speed,
						<code>shiftScaleTime</code>, <code>atGeom</code>) cell by cell.est-
					</p>
				</a>
			</div>

			<footer>
				Requires a browser with WebAssembly Memory64 (recent Chrome/Chromium 133+ or Firefox).
			</footer>
		</main>
	</body>
</html>