Svelte OpenStreetMap tiles (https://svelte.dev/repl/0ccd678e25fb466b99c57444df238b44?version=4.2.15)

openstreetmap.svelte

<script>
	const server = 'https://tile.openstreetmap.org';
	
	const lon = 4.76114 * Math.PI / 180;
	const lat = 51.57947 * Math.PI / 180;

	const z = 18;
	const n = 2**z;

	// docs: https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
	let exactX = n * (1 + (lon / Math.PI)) / 2;
	let exactY = n * (1 - (Math.asinh(Math.tan(lat)) / Math.PI)) / 2;
	
	let x = Math.floor(exactX);
	let y = Math.floor(exactY);
</script>

<div class="map">
	<div class="tiles">
		<img src="{server}/{z}/{x-1}/{y-1}.png" alt="" />
		<img src="{server}/{z}/{x}/{y-1}.png" alt="" />
		<img src="{server}/{z}/{x+1}/{y-1}.png" alt="" />
		
		<img src="{server}/{z}/{x-1}/{y}.png" alt="" />
		<img src="{server}/{z}/{x}/{y}.png" alt="" />
		<img src="{server}/{z}/{x+1}/{y}.png" alt="" />
		
		<img src="{server}/{z}/{x-1}/{y+1}.png" alt="" />
		<img src="{server}/{z}/{x}/{y+1}.png" alt="" />
		<img src="{server}/{z}/{x+1}/{y+1}.png" alt="" />
	</div>
	
	<span class="marker" style:left="{256*(exactX-x) + 256}px" style:top="{256*(exactY-y) + 256}px"></span>
</div>

<style>
	.map {
		position: relative;
	}
	
	.tiles {
		display: inline-grid;
		grid-template-columns: 1fr 1fr 1fr;
	}

	.marker {
		display: block;
		position: absolute;
		background-color: rgb(33 150 243 / 30%);
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		transform: translate(-1.5rem, -1.5rem);
	}
	.marker::before {
		content: '';
		background-color: #2196f3;
		border: 1px solid #0b67b0;
		display: block;
		width: 1rem;
		height: 1rem;
		margin: 1rem;
		border-radius: 50%;
	}
</style>