JSFiddle - React, Tailwind, and code Playground

by abubelinha

HTML

latitude <input type=text id=lat value=42.882 size=8></input>
longitude<input type=text id=lon value=-8.551 size=8></input>
zoom<input type=text id=zoom value=18 size=2></input>
<br><a target=_blank id=gsvtileurl href=""></a>
<br><a target=_blank id=osmtileurl href=""></a>

<div id=mapcontainer class="mapcontainer" onclick="update();">
<img id=osmtile class="maptile" src="http://a.tile.openstreetmap.org/5/15/11.png" onclick="update();"></img>
<img id=gsvtile class="maptile" src="https://mts1.googleapis.com/vt?hl=en-US&lyrs=svv|cb_client:apiv3&style=40,18&x=15&y=11&z=5" onclick="update();"></img>
</div>
<hr>
<div id=results></div>

CSS

.mapcontainer {
   position:relative;
}
.maptile {
   position:absolute;
   border=1;
}

JavaScript

/*
https://stackoverflow.com/questions/11783782/display-valid-google-streetview-areas-as-a-layer-on-a-map-using-javascript-api-v

https://gis.stackexchange.com/questions/199656/google-maps-streetview-coverage-layer-in-qgis

https://gis.stackexchange.com/questions/133205/wmts-convert-geolocation-lat-long-to-tile-index-at-a-given-zoom-level
*/
var url="https://mts1.googleapis.com/vt?hl=en-US&lyrs=svv|cb_client:apiv3&style=40,18&x=9&y=15&z=5";
function deg2rad(degrees) {
  var pi = Math.PI;
  return degrees * (pi/180);
}
function deg2num(lat_deg, lon_deg, zoom) {
  var result=document.getElementById("results");
  var lat_rad = deg2rad(lat_deg);
  var n = Math.pow(2.0 , zoom);
  result.innerHTML+="<li>n = "+n;
  var xtile = Math.floor((lon_deg + 180.0) / 360.0 * n);
  result.innerHTML+="<li>xtile = "+xtile;
  var ytile = Math.floor((1.0 - Math.log(Math.tan(lat_rad) + (1 / Math.cos(lat_rad))) / Math.PI) / 2.0 * n);
  result.innerHTML+="<li>ytile = "+ytile;
  return [xtile, ytile];
}
function update() {
  var result=document.getElementById("results");
  result.innerHTML="";
	var lat=document.getElementById("lat").value;  
	var lon=document.getElementById("lon").value;  
  result.innerHTML+="<li>lat = "+lat;
  result.innerHTML+="<li>lon = "+lon;
  var zoom=parseInt(document.getElementById("zoom").value);  
  var tiles=deg2num(parseFloat(lat),parseFloat(lon),zoom);
  var gsvurl="https://mts1.googleapis.com/vt?hl=en-US"
  +"&lyrs=svv|cb_client:apiv3&style=40,18"
  +"&x="+tiles[0]+"&y="+tiles[1]+"&z="+zoom+"";
  var osmurl="http://a.tile.openstreetmap.org/"
  +zoom+"/"+tiles[0]+"/"+tiles[1]+".png";
  var ocmurl="http://"+"a"+".tile.thunderforest.com" + "/cycle/"
  +zoom+"/"+tiles[0]+"/"+tiles[1]+".png";
  //osmurl=ocmurl;
  document.getElementById("gsvtile").src=gsvurl;
  document.getElementById("gsvtileurl").href = gsvurl;
  document.getElementById("gsvtileurl").text = gsvurl;
  document.getElementById("osmtile").src=osmurl;
  document.getElementById("osmtileurl").href =...