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>
		<h1>Panorama testing</h1>
    <div style="display: flex; gap: 10px;">
      <div style="flex: 1 1 50%;">
        <p>Coords 0:0 - <span id="panorama1Info"></span></p>
        <div id="panorama1" style="border: 1px solid #000; max-width: 400px; height: 300px"></div>
        <p>Missing api key - <span id="panorama2Info"></span></p>
        <div id="panorama2" style="border: 1px solid #000; max-width: 400px; height: 300px; margin-top: 10px;"></div>
      </div>
      <div style="flex: 1 1 50%;">
        <p>Wrong api key - <span id="panorama3Info"></span></p>
        <div id="panorama3" style="border: 1px solid #000; max-width: 400px; height: 300px; margin-top: 10px;"></div>
        <p>All is good - <span id="panorama4Info"></span></p>
        <div id="panorama4" style="border: 1px solid #000; max-width: 400px; height: 300px; margin-top: 10px;"></div>
        <div>
          Remove panorama: <button type="button" id="removeBtn">Remove</button>
        </div>
      </div>
    </div>
	</body>
</html>

JavaScript

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

async function createPano1() {
	const container = document.querySelector("#panorama1");
  const info = document.querySelector("#panorama1Info");
  const pano = await Panorama.panoramaFromPosition({
    parent: container,
    lon: 0,
    lat: 0,
    apiKey: "eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY",
    yaw: Math.PI,
    showNavigation: true,
  });

	if (pano.error) {
  	info.textContent = `Code: ${pano.errorCode}\nMsg: ${pano.error}`;
  }
}

async function createPano2() {
	const container = document.querySelector("#panorama2");
  const info = document.querySelector("#panorama2Info");
  const pano = await Panorama.panoramaFromPosition({
    parent: container,
    lon: 16.6080370,
    lat: 49.1949758,
    apiKey: "",
    yaw: Math.PI,
    showNavigation: true,
    lang: "en",
  });
  
  if (pano.error) {
  	info.textContent = `Code: ${pano.errorCode}\nMsg: ${pano.error}`;
  }
}

async function createPano3() {
	const container = document.querySelector("#panorama3");
  const info = document.querySelector("#panorama3Info");
  const pano = await Panorama.panoramaFromPosition({
    parent: container,
    lon: 16.6080370,
    lat: 49.1949758,
    apiKey: "adsasdsda",
    yaw: Math.PI,
    showNavigation: true,
  });
  
  if (pano.error) {
  	info.textContent = `Code: ${pano.errorCode}\nMsg: ${pano.error}`;
  }
}

async function createPano4() {
	const container = document.querySelector("#panorama4");
  const info = document.querySelector("#panorama4Info");
  const removeBtn = document.querySelector("#removeBtn");
  const pano = await Panorama.panoramaFromPosition({
    parent: container,
    lon: 16.6080370,
    lat: 49.1949758,    
    apiKey: "eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY",
    yaw: Math.PI,
    //pitch: Math.PI / 1,
    //fov: Math.PI / 1,
    showNavigation: true,
  });
  
  if (pano.info) {
  	info.textContent = `Pano 4 lon:...