JSFiddle - React, Tailwind, and code Playground

by Mapycz

HTML

<!DOCTYPE html>
<html lang="cs">
	<head>
		<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, minimal-ui" />
		<meta charset="utf-8" />
		<meta name="description" content="Panorama testing" />
		<title>Panorama testin</title>

		<meta name="msapplication-TileColor" content="#da532c" />
		<meta name="mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />

		<script type="text/javascript" async src='https://api.mapy.cz/js/panorama/v1/panorama.js' id="panoScript"></script>
	</head>
	<body>
    <p id="output">
      Click to see output with selected lon/lat
    </p>
    <div style="margin-top: 10px;">
      <input type="text" id="lon" placeholder="longitude" value="10" />
      <input type="text" id="lat" placeholder="latitude" value="50" />
      <button type="button" id="panoExists">
        Panorama exists?
      </button>
      <button type="button" id="otherCoords">
        Set other coords
      </button>
    </div>
	</body>
</html>

JavaScript

const script = document.querySelector("#panoScript");

async function panoExists() {
	const output = document.querySelector("#output");
  const panoExistsBtn = document.querySelector("#panoExists");
  const otherCoordsBtn = document.querySelector("#otherCoords");
  const lonElem = document.querySelector("#lon");
  const latElem = document.querySelector("#lat");
  
  panoExistsBtn.addEventListener("click", async() => {
  	const lon = parseFloat(lonElem.value.trim());
    const lat = parseFloat(latElem.value.trim());
    
    output.innerText = "";
    
    if (!isNaN(lon) && !isNaN(lat)) {
      const existsData = await Panorama.panoramaExists({
        lon,
        lat,
        apiKey: "eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY",
      });
      
      const infoData = existsData.info;
      const appendix = existsData.exists
      	? `exists, real pano lon: ${infoData.lon}, lat: ${infoData.lat}, date: ${infoData.date}`
        : `doest not exist`;
      
      output.innerText = `Pano on lon: ${lon}, lat: ${lat} - ${appendix}`;
    } else {
    	output.innerText = "Lon/lat is not a number!";
    }
  });
  
  otherCoordsBtn.addEventListener("click", () => {
  	lonElem.value = (16.553549107323505).toString();
    latElem.value = (49.177469711954984).toString();
  });
}

script.addEventListener("load", () => {  
  panoExists();
});