2022.02.16 leaflet get x y z tile image on certain zoom level learn from azure-maps/zoom-levels-and-tile-grid?tabs=csharp
Each tile is given XY coordinates ranging from (0, 0) in the upper left to (2zoom–1, 2zoom–1) in the lower right. For example, at zoom level 3, the tile coordinates range from (0, 0) to (7, 7) as follows:
demo: https://jsfiddle.net/jasonHsieh/qz5yngdk/1/
for example, zoom level 2 has below urls to fetch
https://tile.openstreetmap.org/2/0/0.png
?editor_console=true:67 https://tile.openstreetmap.org/2/1/0.png
?editor_console=true:67 https://tile.openstreetmap.org/2/2/0.png
?editor_console=true:67 https://tile.openstreetmap.org/2/3/0.png
?editor_console=true:67 https://tile.openstreetmap.org/2/0/1.png
?editor_console=true:67 https://tile.openstreetmap.org/2/1/1.png
?editor_console=true:67 https://tile.openstreetmap.org/2/2/1.png
?editor_console=true:67 https://tile.openstreetmap.org/2/3/1.png
?editor_console=true:67 https://tile.openstreetmap.org/2/0/2.png
?editor_console=true:67 https://tile.openstreetmap.org/2/1/2.png
?editor_console=true:67 https://tile.openstreetmap.org/2/2/2.png
?editor_console=true:67 https://tile.openstreetmap.org/2/3/2.png
?editor_console=true:67 https://tile.openstreetmap.org/2/0/3.png
?editor_console=true:67 https://tile.openstreetmap.org/2/1/3.png
?editor_console=true:67 https://tile.openstreetmap.org/2/2/3.png
?editor_console=true:67 https://tile.openstreetmap.org/2/3/3.png
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root" />
<style>
#root {
display: flex;
flex-wrap: wrap;
width: '80%';
}
#root img {
/* width: 50%; */
box-sizing: border-box;
border: 1px solid red;
}
</style>
<script>
run(2);
function run(zoomLevel) {
let maxX = Math.pow(2, zoomLevel) - 1;
let maxY = Math.pow(2, zoomLevel) - 1;
if (maxX > 100) {
alert('too much');
return;
}
for (let y = 0; y <= maxY; y++) {
for (let x = 0; x <= maxX; x++) {
const root = document.getElementById('root');
var img = document.createElement('img');
img.style.width = `${100 / (maxX + 1)}%`;
img.src = `https://tile.openstreetmap.org/${zoomLevel}/${x}/${y}.png`;
console.log(`https://tile.openstreetmap.org/${zoomLevel}/${x}/${y}.png`);
root.appendChild(img);
}
}
}
</script>
</body>
</html>
refernces: https://docs.microsoft.com/en-us/azure/azure-maps/zoom-levels-and-tile-grid?tabs=csharp