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-top: 10px;">
      <button type="button" id="setYawBtn">
        Set yaw to 0
      </button>
    </div>
	</body>
</html>

JavaScript

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

async function createPano() {
	const container = document.querySelector("#panoCont");
  const infoContainer = document.querySelector("#infoCont");
  
  // 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",
    // rotate panorama to lon/lat point
    yaw: "point",
    showNavigation: true,
  });
  
  // add listener - pano view change
  panoData.addListener("pano-view", viewData => console.log(["view data", viewData]));
  // add listener - pano change place
  panoData.addListener("pano-place", placeData => console.log(["place data", placeData]));

	console.log(["panorama meta info", panoData.info]);
  infoContainer.textContent = panoData.error;
  
  document.querySelector("#setYawBtn").addEventListener("click", () => {
  	// set camera { yaw, pitch, fov }
  	panoData.setCamera({ yaw: 0 });
    // get camera info
    console.log(panoData.getCamera());
  });
}

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

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