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>
		<div id="panoCont" style="height: 500px; border: 1px solid #000;"></div>
    <div id="infoCont" style="text-align: center; color: #c01;">Pano is loading...</div>
		<div style="margin: 10px 0 0 0;">
			Controls: <button type="button" id="removeBtn" style="cursor: pointer;">Remove pano</button>
		</div>
	</body>
</html>

JavaScript

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

async function createPano() {
	const container = document.querySelector("#panoCont");
  const infoContainer = document.querySelector("#infoCont");
  const removePanoBtn = document.querySelector("#removeBtn");
  
  // after script load -> window.Panorama namespace
  infoContainer.textContent = "Loading pano from position...";

  const panoData = await Panorama.panoramaFromPosition({
    parent: container,
    // WGS84 lon/lat
    lon: 16.6080370,
    lat: 49.1949758,   
    // api key
    apiKey: "eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY",
    // optional view params
    yaw: 5.43,
    pitch: Math.PI / 6,
    fov: Math.PI / 1,
    // show navigation - pano neighbors, click mask
    showNavigation: true,
  });
    
  infoContainer.textContent = panoData.error;
  removePanoBtn.addEventListener("click", () => {
    panoData.destroy();
    removePanoBtn.disabled = true;
  });
}

script.addEventListener("load", () => {
  const infoContainer = document.querySelector("#infoCont");

	infoContainer.textContent = "Script is loaded";
  
  createPano();
});