diff --git a/src/css/pannellum.css b/src/css/pannellum.css index 9f9d4a9..e8bd73e 100644 --- a/src/css/pannellum.css +++ b/src/css/pannellum.css @@ -313,3 +313,11 @@ body { #about a:hover, #about a:active { color:#eee; } + +.hotspot { + position:absolute; + height:20px; + width:20px; + background:rgba(0,0,0,0.8); + display:none; +} diff --git a/src/js/pannellum.js b/src/js/pannellum.js index ed12f2c..5175e09 100644 --- a/src/js/pannellum.js +++ b/src/js/pannellum.js @@ -483,6 +483,7 @@ function onDocumentResize() { function animate() { render(); + if(isUserInteracting) { requestAnimationFrame(animate); } @@ -498,6 +499,8 @@ function render() { lat = Math.max(-85,Math.min(85,lat)); renderer.render(lat * Math.PI / 180,lon * Math.PI / 180,fov * Math.PI / 180); + + renderHotSpots(); } catch(event) { // panorama not loaded } @@ -528,6 +531,40 @@ function renderInit() { } } +var hotspots = new Array(); +//hotspots[0] = new hotspot(10, 20); +//hotspots[1] = new hotspot(10, -30); +function hotspot(lat, lon) { + var div = document.createElement('div'); + div.setAttribute('class', 'hotspot'); + document.getElementById('page').appendChild(div); + this.div = div; + this.lat = lat; + this.lon = lon; +} + +function renderHotSpots() { + hotspots.forEach(function(hs) { + var z = Math.sin(hs.lat * Math.PI / 180) * Math.sin(lat * Math.PI / + 180) + Math.cos(hs.lat * Math.PI / 180) * Math.cos((hs.lon + lon) * + Math.PI / 180) * Math.cos(lat * Math.PI / 180); + if((hs.lon <= 90 && hs.lon > -90 && z <= 0) || + (hs.lon > 90 || hs.lon <= -90 && z <= 0)) { + hs.div.style.display = 'none'; + } else { + hs.div.style.display = 'inline'; + hs.div.style.top = -canvas.height / Math.tan(fov * Math.PI / 360) * + (Math.sin(hs.lat * Math.PI / 180) * Math.cos(lat * Math.PI / + 180) - Math.cos(hs.lat * Math.PI / 180) * Math.cos((hs.lon + + lon) * Math.PI / 180) * Math.sin(lat * Math.PI / 180)) / z / + 2 + canvas.height / 2 - 10 + 'px'; + hs.div.style.left = -canvas.height / Math.tan(fov * Math.PI / 360) * + Math.sin((hs.lon + lon) * Math.PI / 180) * Math.cos(hs.lat * + Math.PI / 180) / z / 2 + canvas.width / 2 - 10 + 'px'; + } + }); +} + function getURLParameter(name) { name = name.replace(/[\[]/,'\\\[').replace(/[\]]/,'\\\]'); var regexS = '[\\?&]'+name+'=([^&#]*)';