Static panorama tutorial

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 class="container">
        <div id="panoCont"></div> <!-- Container for the panorama viewer -->
        <button id="createBtn">Create static image</button> <!-- Button to generate static image -->
        <div id="staticContainer"></div> <!-- Container to display the static image and its URL -->
      </div>
	</body>
</html>

CSS

.container {
     padding: 20px;
     max-width: 500px;
     margin: 0 auto;
 }

 #panoCont {
     width: 500px;
     height: 300px;
     border: 1px solid #000;
 }

 button {
     margin: 10px 0;
     padding: 8px 16px;
 }

 #url {
     word-break: break-word;
     margin-top: 10px;
     font-family: monospace;
     background: #f4f4f4;
     padding: 10px;
     border: 1px solid #ccc;
     width: 100%;
     box-sizing: border-box;
 }

JavaScript

const apikey = 'eyJpIjoyNTcsImMiOjE2Njc0ODU2MjN9.c_UlvdpHGTI_Jb-TNMYlDYuIkCLJaUpi911RdlwPsAY'; // API key for Mapy.cz
 let panorama = null;
 const params = {
     width: 500, 
     height: 300,
     lon: 16.6076644, 
     lat: 49.1947383, 
     apikey: apikey 
 };

 // Initializes the panorama viewer
 async function initPano() {
     try {
         panorama = await Panorama.panoramaFromPosition({
             parent: document.getElementById('panoCont'), 
             lon: params.lon,
             lat: params.lat,
             apiKey: params.apikey,
             yaw: 5.6, // Initial yaw (horizontal rotation)
             showNavigation: true,
         });
         // add listener - pano change place
         panorama.addListener("pano-place", placeData => {
             params.lon = placeData.info.lon;
             params.lat = placeData.info.lat;
         });
     } catch (error) {
         console.error('Error loading panorama:', error); 
     }
 }

 // Creates a static image from the current panorama view
 function createStatic() {
     if (!panorama) return; // Ensure panorama is loaded

     const camera = panorama.getCamera(); // Get current camera view settings
     const url = new URL('https://api.mapy.cz/v1/static/pano'); // Base URL for static image

     // Set query parameters for the static image request
     url.search = new URLSearchParams({
         width: params.width,
         height: params.height,
         lon: params.lon,
         lat: params.lat,
         yaw: camera.yaw,
         pitch: camera.pitch,
         fov: camera.fov,
         radius: 50,
         apikey: params.apikey
     });

     const img = document.createElement('img'); // Create an image element
     img.src = url; // Set the image source to the generated URL
     img.alt = 'Static panorama preview';

     const displayUrl = url.toString().replace(params.apikey, '{yourAPIkey}');

     const urlDiv =...