Skip to content

Instantly share code, notes, and snippets.

@garraflavatra

garraflavatra/openstreetmap.svelte

Created April 28, 2024 12:22
Show Gist options
  • Save garraflavatra/a34e0b557943efcdac56e25a8d4c1403 to your computer and use it in GitHub Desktop.
Save garraflavatra/a34e0b557943efcdac56e25a8d4c1403 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment