JSFiddle - React, Tailwind, and code Playground

by Michel Beloshitsky

JavaScript

osmMap = (lng, lat, zoom, w = width, h = 400) => {    
	document.body.innerHTML = `<div id="map" style="width:${w}px;height:${h}px;position:relative;overflow:hidden;border:solid 1px #eee;"><div style="position:absolute;bottom:0;right:0;font:11px sans-serif;background:#fffa;padding:1px 5px">&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors</div></div>`;

  const mapEl = document.getElementById('map');
  let x = 256 * (1 << zoom) * (lng / 360 + 0.5) - w / 2 | 0,
    y = 256 * (1 << zoom) * (1 - Math.log(Math.tan(Math.PI * (0.25 + lat / 360))) / Math.PI) / 2 - h / 2 | 0;
  
  
  setTimeout(() => {
  for (let ty = y / 256 | 0; ty * 256 < y + h; ty++)
    for (let tx = x / 256 | 0; tx * 256 < x + w; tx++) 
      setTimeout(() => { mapEl.innerHTML += `<img src="https://tile.osm.org/${zoom}/${tx}/${ty}.png" 
        style="position:absolute;left:${tx * 256 - x}px;top:${ty * 256 - y}px">`; }, 4000 * Math.random());
  }, 4000);
}

osmMap(82.920412, 55.030111, 13, 800, 600)