Place an arrow inside of a sphere to link to another sphere.
The arrow is referred to a hotspot.
The arrow can be any shape or size.
For example, here’s a variant with chevrons.
Instead of a traditional arrow, you could even add a cartoon-style door to make the experience more whimsical.
Marzipano hotspot container
To create a hotspot, Marzipano provides a createHotspot() method.
// Create the hotspot
scene1.hotspotContainer().createHotspot(hotspotElement, hotspotPosition);
The hotspotContainer is a method of the Marzipano scene.
We also need the hotspot element. This is an HTML element such as
<img src="icons/green-arrow-round.png">
The hotspot element is something like a png file that shows an arrow. You attach a click event to the image and then run scene.switchTo() to move to the next scene.
index.js JavaScript code
The full code for index.js is shown below.
// Create viewer.
var viewer = new Marzipano.Viewer(document.getElementById('pano'));
// Create geometry.
var geometry = new Marzipano.EquirectGeometry([{ width: 8000 }]);
// Create view.
var limiter = Marzipano.RectilinearView.limit.traditional(1024, 100*Math.PI/180);
var view = new Marzipano.RectilinearView({ yaw: Math.PI }, limiter);
// Create first scene.
var scene1 = viewer.createScene({
source: Marzipano.ImageUrlSource.fromString(
"https://live.staticflickr.com/65535/48083394567_c918e406ea_6k_d.jpg"
),
geometry: geometry,
view: view,
});
// Display scene.
scene1.switchTo();
// Create a hotspot element
var hotspotElement = document.createElement('div');
hotspotElement.classList.add('hotspot');
hotspotElement.innerHTML = '<img src="icons/green-arrow-round.png">';
// Create second hotspot element
var hotspotElement2 = document.createElement('div');
hotspotElement2.classList.add('hotspot');
hotspotElement2.innerHTML = '<img src="icons/green-arrow-round.png">';
// Define the hotspot's position
var hotspotPosition = { yaw: Math.PI * 1.95, pitch: 0 };
// Create the hotspot
scene1.hotspotContainer().createHotspot(hotspotElement, hotspotPosition);
// Add a click event listener to the hotspot
hotspotElement.addEventListener('click', function() {
// Switch to the new scene
newScene.switchTo();
});
// Load the new panorama
var newScene = viewer.createScene({
geometry: geometry,
view: view,
source: Marzipano.ImageUrlSource.fromString("https://live.staticflickr.com/65535/48082720616_7802a218e1_b_d.jpg"),
// ... configuration for the new panorama
});
newScene.hotspotContainer().createHotspot(hotspotElement2, {yaw: Math.PI * -.5, pitch: 0})
// Add a click event listener to hotspot2
hotspotElement2.addEventListener('click', function() {
// Switch to the first scene
scene1.switchTo();
});
index.html
The HTML portion is shown below. Marzipano viewer will be shown in the <div> with the pano id.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Marzipano Hotspot Demo</title>
</head>
<body>
<div id="pano"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marzipano/0.10.2/marzipano.min.js"></script>
<script src="index.js"></script>
</body>
</html>
style.css
The styling just needs to set the width and height of the viewer.
body, html {
height: 100%;
width: 100%;
}
#pano {
position: absolute;
width: 100%;
height: 100%;
}
GitHub repo
live site
previous articles
1.Tutorial: Marzipano Getting Started - Free 360 Image Viewer from Google
2.Tutorial: Marzipano Switch Images - 360 Image Viewer
3. Tutorial: Marzipano Zoom Controls
