JSFiddle - React, Tailwind, and code Playground

by Barbos

HTML

<img id="im"  width="256" height="256"/><img id="im2"  width="256" height="256"/>
<div id="sp"></div>
<form>
            map:<input name="map" value="osmmaptoponik"/><br/>
            x:  <input name="x" value="229413"/><br/>
            y:  <input name="y" value="90608"/><br/>
            z:  <input name="z" value="19"/><br/>
            <input type="button" value="test" onClick="        
var url =computeUrl(form.map.value,form.x.value,form.y.value,form.z.value);
document.getElementById('im').src=url;
var url2 =computeUrl(form.map.value,parseInt(form.x.value) + 1,form.y.value,form.z.value);
document.getElementById('im2').src=url2;
document.getElementById('sp').innerHTML=url;
return false;
"/>            
</form>

JavaScript

function computeUrl(mapName, x, y, z) {
	var s = "abcd".charAt(Math.floor(Math.random()*4));
	var url = 'https://tile-' + s + '.opentopomap.ru/'+(z-1)+'/'+x+'/'+y+'.png';
	return url;        
};