p&&(c[1]=-1);1d||1l;l++)d[4*(h+a.width)+l]=d[4*(h+2*a.width)+l],d[4*(h+a.width*(a.height-2))+l]=d[4*(h+a.width*(a.height-3))+l];for(h=2;hl;l++)d[4*(h*a.width+1)+l]=d[4*(h*a.width+2)+l],d[4*((h+1)*a.width-2)+l]=d[4*((h+1)*a.width-
+3)+l];for(l=0;4>l;l++)d[4*(a.width+1)+l]=d[4*(2*a.width+2)+l],d[4*(2*a.width-2)+l]=d[4*(3*a.width-3)+l],d[4*(a.width*(a.height-2)+1)+l]=d[4*(a.width*(a.height-3)+2)+l],d[4*(a.width*(a.height-1)-2)+l]=d[4*(a.width*(a.height-2)-3)+l];for(h=1;hl;l++)d[4*h+l]=d[4*(h+a.width)+l],d[4*(h+a.width*(a.height-1))+l]=d[4*(h+a.width*(a.height-2))+l];for(h=1;hl;l++)d[h*a.width*4+l]=d[4*(h*a.width+1)+l],d[4*((h+1)*a.width-1)+l]=d[4*((h+1)*a.width-2)+l];for(l=0;4>
+l;l++)d[l]=d[4*(a.width+1)+l],d[4*(a.width-1)+l]=d[4*(2*a.width-2)+l],d[a.width*(a.height-1)*4+l]=d[4*(a.width*(a.height-2)+1)+l],d[4*(a.width*a.height-1)+l]=d[4*(a.width*(a.height-1)-2)+l];c.putImageData(e,0,0);y++;6==y&&(na=this.width,P.appendChild(R),g())};for(h=0;6>h;h++)c=new Image,c.crossOrigin=Z.crossOrigin?Z.crossOrigin:"anonymous",c.side=h,c.onload=p,c.src="multires"==G?encodeURI(ja.replace("%s",z[h])+"."+s.extension):encodeURI(s[h].src)}else{if(!a)throw console.log("Error: no WebGL support detected!"),
+{type:"no webgl"};s.fullpath=s.basePath?s.basePath+s.path:s.path;s.invTileResolution=1/s.tileResolution;e=Ca();ua=[];for(h=0;6>h;h++)ua[h]=e.slice(12*h,12*h+12),e=Ca();if("equirectangular"==G){if(h=Math.max(s.width,s.height),e=a.getParameter(a.MAX_TEXTURE_SIZE),h>e)throw console.log("Error: The image is too big; it's "+h+"px wide, but this device's maximum supported width is "+e+"px."),{type:"webgl size error",width:h,maxWidth:e};}else if("cubemap"==G&&(h=s[0].width,e=a.getParameter(a.MAX_CUBE_MAP_TEXTURE_SIZE),
+h>e))throw console.log("Error: The cube face image is too big; it's "+h+"px wide, but this device's maximum supported width is "+e+"px."),{type:"webgl size error",width:h,maxWidth:e};t===m||t.horizonPitch===m&&t.horizonRoll===m||(fa=[t.horizonPitch==m?0:t.horizonPitch,t.horizonRoll==m?0:t.horizonRoll]);h=a.TEXTURE_2D;a.viewport(0,0,a.drawingBufferWidth,a.drawingBufferHeight);V=a.createShader(a.VERTEX_SHADER);e=r;"multires"==G&&(e=v);a.shaderSource(V,e);a.compileShader(V);N=a.createShader(a.FRAGMENT_SHADER);
+e=Na;"cubemap"==G?(h=a.TEXTURE_CUBE_MAP,e=Oa):"multires"==G&&(e=oa);a.shaderSource(N,e);a.compileShader(N);d=a.createProgram();a.attachShader(d,V);a.attachShader(d,N);a.linkProgram(d);a.getShaderParameter(V,a.COMPILE_STATUS)||console.log(a.getShaderInfoLog(V));a.getShaderParameter(N,a.COMPILE_STATUS)||console.log(a.getShaderInfoLog(N));a.getProgramParameter(d,a.LINK_STATUS)||console.log(a.getProgramInfoLog(d));a.useProgram(d);d.drawInProgress=!1;d.texCoordLocation=a.getAttribLocation(d,"a_texCoord");
+a.enableVertexAttribArray(d.texCoordLocation);"multires"!=G?(ka||(ka=a.createBuffer()),a.bindBuffer(a.ARRAY_BUFFER,ka),a.bufferData(a.ARRAY_BUFFER,new Float32Array([-1,1,1,1,1,-1,-1,1,1,-1,-1,-1]),a.STATIC_DRAW),a.vertexAttribPointer(d.texCoordLocation,2,a.FLOAT,!1,0,0),d.aspectRatio=a.getUniformLocation(d,"u_aspectRatio"),a.uniform1f(d.aspectRatio,a.drawingBufferWidth/a.drawingBufferHeight),d.psi=a.getUniformLocation(d,"u_psi"),d.theta=a.getUniformLocation(d,"u_theta"),d.f=a.getUniformLocation(d,
+"u_f"),d.h=a.getUniformLocation(d,"u_h"),d.v=a.getUniformLocation(d,"u_v"),d.vo=a.getUniformLocation(d,"u_vo"),d.rot=a.getUniformLocation(d,"u_rot"),a.uniform1f(d.h,ja/(2*Math.PI)),a.uniform1f(d.v,p/Math.PI),a.uniform1f(d.vo,c/Math.PI*2),"equirectangular"==G&&(d.backgroundColor=a.getUniformLocation(d,"u_backgroundColor"),a.uniform4fv(d.backgroundColor,(t.backgroundColor?t.backgroundColor:[0,0,0]).concat([1]))),d.texture=a.createTexture(),a.bindTexture(h,d.texture),"cubemap"==G?(a.texImage2D(a.TEXTURE_CUBE_MAP_POSITIVE_X,
+0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[1]),a.texImage2D(a.TEXTURE_CUBE_MAP_NEGATIVE_X,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[3]),a.texImage2D(a.TEXTURE_CUBE_MAP_POSITIVE_Y,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[4]),a.texImage2D(a.TEXTURE_CUBE_MAP_NEGATIVE_Y,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[5]),a.texImage2D(a.TEXTURE_CUBE_MAP_POSITIVE_Z,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[0]),a.texImage2D(a.TEXTURE_CUBE_MAP_NEGATIVE_Z,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s[2])):a.texImage2D(h,0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s),a.texParameteri(h,a.TEXTURE_WRAP_S,
+a.CLAMP_TO_EDGE),a.texParameteri(h,a.TEXTURE_WRAP_T,a.CLAMP_TO_EDGE),a.texParameteri(h,a.TEXTURE_MIN_FILTER,a.LINEAR),a.texParameteri(h,a.TEXTURE_MAG_FILTER,a.LINEAR)):(d.vertPosLocation=a.getAttribLocation(d,"a_vertCoord"),a.enableVertexAttribArray(d.vertPosLocation),F||(F=a.createBuffer()),ba||(ba=a.createBuffer()),Da||(Da=a.createBuffer()),a.bindBuffer(a.ARRAY_BUFFER,ba),a.bufferData(a.ARRAY_BUFFER,new Float32Array([0,0,1,0,1,1,0,1]),a.STATIC_DRAW),a.bindBuffer(a.ELEMENT_ARRAY_BUFFER,Da),a.bufferData(a.ELEMENT_ARRAY_BUFFER,
+new Uint16Array([0,1,2,0,2,3]),a.STATIC_DRAW),d.perspUniform=a.getUniformLocation(d,"u_perspMatrix"),d.cubeUniform=a.getUniformLocation(d,"u_cubeMatrix"),d.level=-1,d.currentNodes=[],d.nodeCache=[],d.nodeCacheTimestamp=0);ja=a.getError();if(0!==ja)throw console.log("Error: Something went wrong with WebGL!",ja),{type:"webgl error"};g()}};this.destroy=function(){P!==m&&(A!==m&&P.contains(A)&&P.removeChild(A),R!==m&&P.contains(R)&&P.removeChild(R));if(a){var d=a.getExtension("WEBGL_lose_context");d&&
+d.loseContext()}};this.resize=function(){var h=J.devicePixelRatio||1;A.width=A.clientWidth*h;A.height=A.clientHeight*h;a&&(1286==a.getError()&&ta(),a.viewport(0,0,a.drawingBufferWidth,a.drawingBufferHeight),"multires"!=G&&a.uniform1f(d.aspectRatio,A.clientWidth/A.clientHeight))};this.resize();this.setPose=function(a,d){fa=[a,d]};this.render=function(h,e,f,r){var p;p=0;r===m&&(r={});r.roll&&(p=r.roll);if(fa!==m){var c=fa[0],g=fa[1],t=h,z=e,y=Math.cos(g)*Math.sin(h)*Math.sin(c)+Math.cos(h)*(Math.cos(c)*
+Math.cos(e)+Math.sin(g)*Math.sin(c)*Math.sin(e)),v=-Math.sin(h)*Math.sin(g)+Math.cos(h)*Math.cos(g)*Math.sin(e);h=Math.cos(g)*Math.cos(c)*Math.sin(h)+Math.cos(h)*(-Math.cos(e)*Math.sin(c)+Math.cos(c)*Math.sin(g)*Math.sin(e));h=Math.asin(Math.max(Math.min(h,1),-1));e=Math.atan2(v,y);c=[Math.cos(t)*(Math.sin(g)*Math.sin(c)*Math.cos(z)-Math.cos(c)*Math.sin(z)),Math.cos(t)*Math.cos(g)*Math.cos(z),Math.cos(t)*(Math.cos(c)*Math.sin(g)*Math.cos(z)+Math.sin(z)*Math.sin(c))];g=[-Math.cos(h)*Math.sin(e),Math.cos(h)*
+Math.cos(e)];g=Math.acos(Math.max(Math.min((c[0]*g[0]+c[1]*g[1])/(Math.sqrt(c[0]*c[0]+c[1]*c[1]+c[2]*c[2])*Math.sqrt(g[0]*g[0]+g[1]*g[1])),1),-1));0>c[2]&&(g=2*Math.PI-g);p+=g}if(a||"multires"!=G&&"cubemap"!=G){if("multires"!=G)f=2*Math.atan(Math.tan(0.5*f)/(a.drawingBufferWidth/a.drawingBufferHeight)),f=1/Math.tan(0.5*f),a.uniform1f(d.psi,e),a.uniform1f(d.theta,h),a.uniform1f(d.rot,p),a.uniform1f(d.f,f),!0===va&&"equirectangular"==G&&(a.bindTexture(a.TEXTURE_2D,d.texture),a.texImage2D(a.TEXTURE_2D,
+0,a.RGB,a.RGB,a.UNSIGNED_BYTE,s)),a.drawArrays(a.TRIANGLES,0,6);else{c=a.drawingBufferWidth/a.drawingBufferHeight;g=2*Math.atan(Math.tan(f/2)*a.drawingBufferHeight/a.drawingBufferWidth);g=1/Math.tan(g/2);c=[g/c,0,0,0,0,g,0,0,0,0,100.1/-99.9,20/-99.9,0,0,-1,0];for(g=1;gs.tileResolution*Math.pow(2,g-1)*Math.tan(f/2)*0.707;)g++;d.level=g;g=[1,0,0,0,1,0,0,0,1];g=ra(g,-p,"z");g=ra(g,-h,"x");g=ra(g,e,"y");g=[g[0],g[1],g[2],0,g[3],g[4],g[5],0,g[6],g[7],g[8],0,0,0,0,1];a.uniformMatrix4fv(d.perspUniform,
+!1,new Float32Array(sa(c)));a.uniformMatrix4fv(d.cubeUniform,!1,new Float32Array(sa(g)));c=[c[0]*g[0],c[0]*g[1],c[0]*g[2],0,c[5]*g[4],c[5]*g[5],c[5]*g[6],0,c[10]*g[8],c[10]*g[9],c[10]*g[10],c[11],-g[8],-g[9],-g[10],0];d.nodeCache.sort(bb);if(200d.currentNodes.length+50)for(g=d.nodeCache.splice(200,d.nodeCache.length-200),p=0;pp;p++)t=new X(ua[p],g[p],1,0,0,s.fullpath),
+Y(c,t,h,e,f);d.currentNodes.sort(W);for(p=0;pp;p++)f=R.querySelector(".pnlm-"+e[p]+"face").style,f.webkitTransform=h+r[e[p]],f.transform=h+r[e[p]]};this.isLoading=function(){if(a&&"multires"==G)for(var f=0;f u_h || coord.y < -u_v + u_vo || coord.y > u_v + u_vo)\ngl_FragColor = u_backgroundColor;\nelse\ngl_FragColor = texture2D(u_image, vec2((coord.x + u_h) / (u_h * 2.0), (-coord.y + u_v + u_vo) / (u_v * 2.0)));\n}",
+oa="varying mediump vec2 v_texCoord;uniform sampler2D u_sampler;void main(void) {gl_FragColor = texture2D(u_sampler, v_texCoord);}";return{renderer:function(f,m,r,v){return new Ba(f,m,r,v)}}}(window,document);window.requestAnimationFrame||(window.requestAnimationFrame=function(){return window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(J,f){window.setTimeout(J,1E3/60)}}());
+window.pannellum=function(J,f,m){function Ba(r,v){function Oa(u){J.removeEventListener("deviceorientation",Oa);u&&null!==u.alpha&&null!==u.beta&&null!==u.gamma?(w.container.appendChild(w.orientation),pa=!0,Ya&&Ka()):pa=!1}function Na(){var u=f.createElement("div");u.innerHTML="\x3c!--[if lte IE 9]>u;u++)O.push(new Image),O[u].crossOrigin=b.crossOrigin;n.load.lbox.style.display=
+"block";n.load.lbar.style.display="none"}else if("multires"==b.type)u=JSON.parse(JSON.stringify(b.multiRes)),b.basePath&&b.multiRes.basePath&&!/^(?:[a-z]+:)?\/\//i.test(b.multiRes.basePath)?u.basePath=b.basePath+b.multiRes.basePath:b.multiRes.basePath?u.basePath=b.multiRes.basePath:b.basePath&&(u.basePath=b.basePath),O=u;else if(!0===b.dynamic)O=b.panorama;else{if(b.panorama===m){W(b.strings.noPanoramaError);return}O=new Image}if("cubemap"==b.type)for(var ca=6,c=function(){ca--;0===ca&&P()},d=function(a){var u=
+f.createElement("a");u.href=a.target.src;u.innerHTML=u.href;W(b.strings.fileAccessError.replace("%s",u.outerHTML))},u=0;uc||65536")+12),e=function(a){var u;0<=d.indexOf(a+'="')?(u=d.substring(d.indexOf(a+'="')+a.length+2),u=u.substring(0,u.indexOf('"'))):
+0<=d.indexOf(a+">")&&(u=d.substring(d.indexOf(a+">")+a.length+1),u=u.substring(0,u.indexOf("<")));return u!==m?Number(u):null},ca=e("GPano:FullPanoWidthPixels"),c=e("GPano:CroppedAreaImageWidthPixels"),f=e("GPano:FullPanoHeightPixels"),g=e("GPano:CroppedAreaImageHeightPixels"),h=e("GPano:CroppedAreaTopPixels"),l=e("GPano:PoseHeadingDegrees"),p=e("GPano:PosePitchDegrees"),e=e("GPano:PoseRollDegrees");null!==ca&&null!==c&&null!==f&&null!==g&&null!==h&&(0>da.indexOf("haov")&&(b.haov=c/ca*360),0>da.indexOf("vaov")&&
+(b.vaov=g/f*180),0>da.indexOf("vOffset")&&(b.vOffset=-180*((h+g/2)/f-0.5)),null!==l&&0>da.indexOf("northOffset")&&(b.northOffset=l,!1!==b.compass&&(b.compass=!0)),null!==p&&null!==e&&(0>da.indexOf("horizonPitch")&&(b.horizonPitch=p),0>da.indexOf("horizonRoll")&&(b.horizonRoll=e)))}O.src=J.URL.createObjectURL(a)});k.readAsBinaryString!==m?k.readAsBinaryString(a):k.readAsText(a)}function W(a){a===m&&(a=b.strings.genericWebGLError);n.errorMsg.innerHTML=""+a+"
";w.load.style.display="none";n.load.box.style.display=
+"none";n.errorMsg.style.display="table";Pa=!0;M.style.display="none";ga("error",a)}function X(a){var b=Y(a);ha.style.left=b.x+"px";ha.style.top=b.y+"px";clearTimeout(X.t1);clearTimeout(X.t2);ha.style.display="block";ha.style.opacity=1;X.t1=setTimeout(function(){ha.style.opacity=0},2E3);X.t2=setTimeout(function(){ha.style.display="none"},2500);a.preventDefault()}function Y(a){var b=r.getBoundingClientRect(),c={};c.x=a.clientX-b.left;c.y=a.clientY-b.top;return c}function Ca(a){a.preventDefault();r.focus();
+if(K&&b.draggable){var k=Y(a);if(b.hotSpotDebug){var c=sa(a);console.log("Pitch: "+c[0]+", Yaw: "+c[1]+", Center Pitch: "+b.pitch+", Center Yaw: "+b.yaw+", HFOV: "+b.hfov)}Ja();l();b.roll=0;x.hfov=0;la=!0;S=Date.now();xa=k.x;ya=k.y;Qa=b.yaw;Ra=b.pitch;C.classList.add("pnlm-grabbing");C.classList.remove("pnlm-grab");ga("mousedown",a);F()}}function ra(a){b.minHfov===b.hfov?za.setHfov(wa,1E3):(a=sa(a),za.lookAt(a[0],a[1],b.minHfov,1E3))}function sa(a){var k=Y(a);a=B.getCanvas();var c=a.clientWidth,d=
+a.clientHeight;a=k.x/c*2-1;var d=(1-k.y/d*2)*d/c,e=1/Math.tan(b.hfov*Math.PI/360),f=Math.sin(b.pitch*Math.PI/180),g=Math.cos(b.pitch*Math.PI/180),k=e*g-d*f,c=Math.sqrt(a*a+k*k),d=180*Math.atan((d*g+e*f)/c)/Math.PI;a=180*Math.atan2(a/c,k/c)/Math.PI+b.yaw;-180>a&&(a+=360);180a.wheelDelta?1:-1):a.wheelDelta?(U(b.hfov-0.05*a.wheelDelta),x.hfov=0>a.wheelDelta?1:-1):a.detail&&(U(b.hfov+1.5*a.detail),x.hfov=0Za.indexOf(k)||(a.preventDefault(),
+27==k?Ga&&z():s(k,!0))}function ua(){for(var a=0;10>a;a++)q[a]=!1}function fa(a){var b=a.which||a.keycode;0>Za.indexOf(b)||(a.preventDefault(),s(b,!1))}function s(a,b){var c=!1;switch(a){case 109:case 189:case 17:case 173:q[0]!=b&&(c=!0);q[0]=b;break;case 107:case 187:case 16:case 61:q[1]!=b&&(c=!0);q[1]=b;break;case 38:q[2]!=b&&(c=!0);q[2]=b;break;case 87:q[6]!=b&&(c=!0);q[6]=b;break;case 40:q[3]!=b&&(c=!0);q[3]=b;break;case 83:q[7]!=b&&(c=!0);q[7]=b;break;case 37:q[4]!=b&&(c=!0);q[4]=b;break;case 65:q[8]!=
+b&&(c=!0);q[8]=b;break;case 39:q[5]!=b&&(c=!0);q[5]=b;break;case 68:q[9]!=b&&(c=!0),q[9]=b}c&&b&&(ia="undefined"!==typeof performance&&performance.now()?performance.now():Date.now(),F())}function G(){if(K){var a=!1,k=b.pitch,c=b.yaw,d=b.hfov,e;e="undefined"!==typeof performance&&performance.now()?performance.now():Date.now();ia===m&&(ia=e);var f=(e-ia)*b.hfov/1700,f=Math.min(f,1);q[0]&&!0===b.keyboardZoom&&(U(b.hfov+(0.8*x.hfov+0.5)*f),a=!0);q[1]&&!0===b.keyboardZoom&&(U(b.hfov+(0.8*x.hfov-0.2)*f),
+a=!0);if(q[2]||q[6])b.pitch+=(0.8*x.pitch+0.2)*f,a=!0;if(q[3]||q[7])b.pitch+=(0.8*x.pitch-0.2)*f,a=!0;if(q[4]||q[8])b.yaw+=(0.8*x.yaw-0.2)*f,a=!0;if(q[5]||q[9])b.yaw+=(0.8*x.yaw+0.2)*f,a=!0;a&&(S=Date.now());Date.now();if(b.autoRotate){if(0.001=b.autoRotateStopDelay&&(b.autoRotateStopDelay=!1,$=b.autoRotate,
+b.autoRotate=0))}L.pitch&&(va("pitch"),k=b.pitch);L.yaw&&(va("yaw"),c=b.yaw);L.hfov&&(va("hfov"),d=b.hfov);0k.startPosition&&c>=k.endPosition||k.endPositionb.autoRotateInactivityDelay&&!b.autoRotate&&(b.autoRotate=$,za.lookAt(Ea,m,wa,3E3)),
+requestAnimationFrame(ba);else if(B&&(B.isLoading()||!0===b.dynamic&&$a))requestAnimationFrame(ba);else{Ta=!1;ia=m;var a=b.autoRotateInactivityDelay-(Date.now()-S);0b.yaw&&(b.yaw+=360);a=b.yaw;var k=b.maxYaw-b.minYaw,d=-180,e=180;360>k&&(d=b.minYaw+b.hfov/2,e=b.maxYaw-b.hfov/2,kaa?aa+=1:10===aa?(ab=c[2]/Math.PI*180+b.yaw,aa=!0,requestAnimationFrame(ba)):(b.pitch=c[0]/Math.PI*180,b.roll=-c[1]/Math.PI*180,b.yaw=-c[2]/Math.PI*180+ab)}function h(){try{var a={};b.horizonPitch!==m&&(a.horizonPitch=b.horizonPitch*Math.PI/180);b.horizonRoll!==m&&(a.horizonRoll=b.horizonRoll*Math.PI/180);b.backgroundColor!==m&&(a.backgroundColor=
+b.backgroundColor);B.init(O,b.type,b.dynamic,b.haov*Math.PI/180,b.vaov*Math.PI/180,b.vOffset*Math.PI/180,e,a);!0!==b.dynamic&&(O=m)}catch(c){if("webgl error"==c.type||"no webgl"==c.type)W();else if("webgl size error"==c.type)W(b.strings.textureSizeError.replace("%s",c.width).replace("%s",c.maxWidth));else throw W(b.strings.unknownError),c;}}function e(){if(b.sceneFadeDuration&&B.fadeImg!==m){B.fadeImg.style.opacity=0;var a=B.fadeImg;delete B.fadeImg;setTimeout(function(){M.removeChild(a);ga("scenechangefadedone")},
+b.sceneFadeDuration)}Ha.style.display=b.compass?"inline":"none";ja();n.load.box.style.display="none";qa!==m&&(M.removeChild(qa),qa=m);K=!0;ga("load");F()}function Ia(a){a.pitch=Number(a.pitch)||0;a.yaw=Number(a.yaw)||0;var c=f.createElement("div");c.className="pnlm-hotspot-base";c.className=a.cssClass?c.className+(" "+a.cssClass):c.className+(" pnlm-hotspot pnlm-sprite pnlm-"+D(a.type));var d=f.createElement("span");a.text&&(d.innerHTML=D(a.text));var e;if(a.video){e=f.createElement("video");var g=
+a.video;b.basePath&&!oa(g)&&(g=b.basePath+g);e.src=encodeURI(g);e.controls=!0;e.style.width=a.width+"px";M.appendChild(c);d.appendChild(e)}else if(a.image){g=a.image;b.basePath&&!oa(g)&&(g=b.basePath+g);e=f.createElement("a");e.href=encodeURI(a.URL?a.URL:g);e.target="_blank";d.appendChild(e);var h=f.createElement("img");h.src=encodeURI(g);h.style.width=a.width+"px";h.style.paddingTop="5px";M.appendChild(c);e.appendChild(h);d.style.maxWidth="initial"}else a.URL?(e=f.createElement("a"),e.href=encodeURI(a.URL),
+e.target="_blank",M.appendChild(e),c.style.cursor="pointer",d.style.cursor="pointer",e.appendChild(c)):(a.sceneId&&(c.onclick=c.ontouchend=function(){c.clicked||(c.clicked=!0,I(a.sceneId,a.targetPitch,a.targetYaw,a.targetHfov));return!1},c.style.cursor="pointer",d.style.cursor="pointer"),M.appendChild(c));if(a.createTooltipFunc)a.createTooltipFunc(c,a.createTooltipArgs);else if(a.text||a.video||a.image)c.classList.add("pnlm-tooltip"),c.appendChild(d),d.style.width=d.scrollWidth-20+"px",d.style.marginLeft=
+-(d.scrollWidth-c.offsetWidth)/2+"px",d.style.marginTop=-d.scrollHeight-12+"px";a.clickHandlerFunc&&(c.addEventListener("click",function(b){a.clickHandlerFunc(b,a.clickHandlerArgs)},"false"),c.style.cursor="pointer",d.style.cursor="pointer");a.div=c}function ja(){Va||(b.hotSpots?(b.hotSpots=b.hotSpots.sort(function(a,b){return a.pitch=a.yaw&&-90=h||(90=a.yaw)&&0>=h)a.div.style.visibility="hidden";else{var l=Math.sin((-a.yaw+b.yaw)*Math.PI/180),p=Math.tan(b.hfov*Math.PI/360);a.div.style.visibility="visible";var m=B.getCanvas(),n=m.clientWidth,
+m=m.clientHeight,c=[-n/p*l*d/h/2,-n/p*(c*f-d*g*e)/h/2],d=Math.sin(b.roll*Math.PI/180),e=Math.cos(b.roll*Math.PI/180),c=[c[0]*e-c[1]*d,c[0]*d+c[1]*e];c[0]+=(n-a.div.offsetWidth)/2;c[1]+=(m-a.div.offsetHeight)/2;n="translate("+c[0]+"px, "+c[1]+"px) translateZ(9999px) rotate("+b.roll+"deg)";a.div.style.webkitTransform=n;a.div.style.MozTransform=n;a.div.style.transform=n}}function g(a){b={};var c,d,e="haov vaov vOffset northOffset horizonPitch horizonRoll".split(" ");da=[];for(c in Wa)Wa.hasOwnProperty(c)&&
+(b[c]=Wa[c]);for(c in v.default)if(v.default.hasOwnProperty(c))if("strings"==c)for(d in v.default.strings)v.default.strings.hasOwnProperty(d)&&(b.strings[d]=D(v.default.strings[d]));else b[c]=v.default[c],0<=e.indexOf(c)&&da.push(c);if(null!==a&&""!==a&&v.scenes&&v.scenes[a]){var f=v.scenes[a];for(c in f)if(f.hasOwnProperty(c))if("strings"==c)for(d in f.strings)f.strings.hasOwnProperty(d)&&(b.strings[d]=D(f.strings[d]));else b[c]=f[c],0<=e.indexOf(c)&&da.push(c);b.scene=a}for(c in v)if(v.hasOwnProperty(c))if("strings"==
+c)for(d in v.strings)v.strings.hasOwnProperty(d)&&(b.strings[d]=D(v.strings[d]));else b[c]=v[c],0<=e.indexOf(c)&&da.push(c)}function t(a){if((a=a?a:!1)&&"preview"in b){var c=b.preview;b.basePath&&!oa(c)&&(c=b.basePath+c);qa=f.createElement("div");qa.className="pnlm-preview-img";qa.style.backgroundImage="url('"+encodeURI(c)+"')";M.appendChild(qa)}var c=b.title,d=b.author;a&&("previewTitle"in b&&(b.title=b.previewTitle),"previewAuthor"in b&&(b.author=b.previewAuthor));b.hasOwnProperty("title")||(n.title.innerHTML=
+"");b.hasOwnProperty("author")||(n.author.innerHTML="");b.hasOwnProperty("title")||b.hasOwnProperty("author")||(n.container.style.display="none");w.load.innerHTML=""+b.strings.loadButtonLabel+"
";n.load.boxp.innerHTML=b.strings.loadingLabel;for(var e in b)if(b.hasOwnProperty(e))switch(e){case "title":n.title.innerHTML=D(b[e]);n.container.style.display="inline";break;case "author":n.author.innerHTML=b.strings.bylineLabel.replace("%s",D(b[e]));n.container.style.display="inline";break;case "fallback":n.errorMsg.innerHTML=
+'Your browser does not support WebGL.
Click here to view this panorama in an alternative viewer.
';break;case "hfov":U(Number(b[e]));break;case "autoLoad":!0===b[e]&&B===m&&(n.load.box.style.display="inline",w.load.style.display="none",Na());break;case "showZoomCtrl":w.zoom.style.display=b[e]&&!1!=b.showControls?"block":"none";break;case "showFullscreenCtrl":w.fullscreen.style.display=b[e]&&!1!=b.showControls&&("fullscreen"in f||"mozFullScreen"in
+f||"webkitIsFullScreen"in f||"msFullscreenElement"in f)?"block":"none";break;case "hotSpotDebug":Xa.style.display=b[e]?"block":"none";break;case "showControls":b[e]||(w.orientation.style.display="none",w.zoom.style.display="none",w.fullscreen.style.display="none");break;case "orientationOnByDefault":b[e]&&(pa===m?Ya=!0:!0===pa&&Ka())}a&&(c?b.title=c:delete b.title,d?b.author=d:delete b.author)}function z(){if(K&&!Pa)if(Ga)f.exitFullscreen?f.exitFullscreen():f.mozCancelFullScreen?f.mozCancelFullScreen():
+f.webkitCancelFullScreen?f.webkitCancelFullScreen():f.msExitFullscreen&&f.msExitFullscreen();else try{r.requestFullscreen?r.requestFullscreen():r.mozRequestFullScreen?r.mozRequestFullScreen():r.msRequestFullscreen?r.msRequestFullscreen():r.webkitRequestFullScreen()}catch(a){}}function y(){f.fullscreen||f.mozFullScreen||f.webkitIsFullScreen||f.msFullscreenElement?(w.fullscreen.classList.add("pnlm-fullscreen-toggle-button-active"),Ga=!0):(w.fullscreen.classList.remove("pnlm-fullscreen-toggle-button-active"),
+Ga=!1);B.resize();U(b.hfov);F()}function E(a){var c=b.minHfov;"multires"==b.type&&B&&(c=Math.min(c,B.getCanvas().width/(b.multiRes.cubeResolution/90*0.9)));return c>b.maxHfov?(console.log("HFOV bounds do not make sense (minHfov > maxHfov)."),b.hfov):ab.maxHfov?b.maxHfov:a}function U(a){b.hfov=E(a)}function Ja(){L={};$=b.autoRotate?b.autoRotate:$;b.autoRotate=!1}function Q(){Pa&&(n.load.box.style.display="none",n.errorMsg.style.display="none",Pa=!1,ga("errorcleared"));K=!1;w.load.style.display=
+"none";n.load.box.style.display="inline";Na()}function I(a,c,d,e,f){K=!1;L={};var h,l;if(b.sceneFadeDuration&&!f&&(h=B.render(b.pitch*Math.PI/180,b.yaw*Math.PI/180,b.hfov*Math.PI/180,{returnImage:!0}),h!==m)){f=new Image;f.className="pnlm-fade-img";f.style.transition="opacity "+b.sceneFadeDuration/1E3+"s";f.style.width="100%";f.style.height="100%";f.onload=function(){I(a,c,d,e,!0)};f.src=h;M.appendChild(f);B.fadeImg=f;return}f="same"===c?b.pitch:c;h="same"===d?b.yaw:"sameAzimuth"===d?b.yaw+(b.northOffset||
+0)-(v.scenes[a].northOffset||0):d;l="same"===e?b.hfov:e;p();g(a);x.yaw=x.pitch=x.hfov=0;t();f!==m&&(b.pitch=f);h!==m&&(b.yaw=h);l!==m&&(b.hfov=l);ga("scenechange",a);Q()}function l(){J.removeEventListener("deviceorientation",Ma);w.orientation.classList.remove("pnlm-orientation-button-active");aa=!1}function Ka(){aa=1;J.addEventListener("deviceorientation",Ma);w.orientation.classList.add("pnlm-orientation-button-active")}function D(a){return v.escapeHTML?String(a).split(/&/g).join("&").split('"').join(""").split("'").join("'").split("<").join("<").split(">").join(">").split("/").join("/").split("\n").join("
"):
+String(a).split("\n").join("
")}function ga(a){if(a in T)for(var b=T[a].length;0a?2*a*a:-1+(4-2*a)*a},draggable:!0,disableKeyboardCtrl:!1,crossOrigin:"anonymous",strings:{loadButtonLabel:"Click to
Load
Panorama",loadingLabel:"Loading...",bylineLabel:"by %s",noPanoramaError:"No panorama image was specified.",
+fileAccessError:"The file %s could not be accessed.",malformedURLError:"There is something wrong with the panorama URL.",iOS8WebGLError:"Due to iOS 8's broken WebGL implementation, only progressive encoded JPEGs work for your device (this panorama uses standard encoding).",genericWebGLError:"Your browser does not have the necessary WebGL support to display this panorama.",textureSizeError:"This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)",
+unknownError:"Unknown error. Check developer console."}},Za=[16,17,27,37,38,39,40,61,65,68,83,87,107,109,173,187,189];r="string"===typeof r?f.getElementById(r):r;r.classList.add("pnlm-container");r.tabIndex=0;var C=f.createElement("div");C.className="pnlm-ui";r.appendChild(C);var M=f.createElement("div");M.className="pnlm-render-container";r.appendChild(M);var H=f.createElement("div");H.className="pnlm-dragfix";C.appendChild(H);var ha=f.createElement("span");ha.className="pnlm-about-msg";ha.innerHTML=
+'Pannellum 2.4.1';C.appendChild(ha);H.addEventListener("contextmenu",X);var n={},Xa=f.createElement("div");Xa.className="pnlm-sprite pnlm-hot-spot-debug-indicator";C.appendChild(Xa);n.container=f.createElement("div");n.container.className="pnlm-panorama-info";n.title=f.createElement("div");n.title.className="pnlm-title-box";n.container.appendChild(n.title);n.author=f.createElement("div");n.author.className="pnlm-author-box";n.container.appendChild(n.author);
+C.appendChild(n.container);n.load={};n.load.box=f.createElement("div");n.load.box.className="pnlm-load-box";n.load.boxp=f.createElement("p");n.load.box.appendChild(n.load.boxp);n.load.lbox=f.createElement("div");n.load.lbox.className="pnlm-lbox";n.load.lbox.innerHTML='';n.load.box.appendChild(n.load.lbox);n.load.lbar=f.createElement("div");n.load.lbar.className="pnlm-lbar";n.load.lbarFill=f.createElement("div");n.load.lbarFill.className="pnlm-lbar-fill";n.load.lbar.appendChild(n.load.lbarFill);
+n.load.box.appendChild(n.load.lbar);n.load.msg=f.createElement("p");n.load.msg.className="pnlm-lmsg";n.load.box.appendChild(n.load.msg);C.appendChild(n.load.box);n.errorMsg=f.createElement("div");n.errorMsg.className="pnlm-error-msg pnlm-info-box";C.appendChild(n.errorMsg);var w={};w.container=f.createElement("div");w.container.className="pnlm-controls-container";C.appendChild(w.container);w.load=f.createElement("div");w.load.className="pnlm-load-button";w.load.addEventListener("click",function(){t();
+Q()});C.appendChild(w.load);w.zoom=f.createElement("div");w.zoom.className="pnlm-zoom-controls pnlm-controls";w.zoomIn=f.createElement("div");w.zoomIn.className="pnlm-zoom-in pnlm-sprite pnlm-control";w.zoomIn.addEventListener("click",function(){K&&(U(b.hfov-5),F())});w.zoom.appendChild(w.zoomIn);w.zoomOut=f.createElement("div");w.zoomOut.className="pnlm-zoom-out pnlm-sprite pnlm-control";w.zoomOut.addEventListener("click",function(){K&&(U(b.hfov+5),F())});w.zoom.appendChild(w.zoomOut);w.container.appendChild(w.zoom);
+w.fullscreen=f.createElement("div");w.fullscreen.addEventListener("click",z);w.fullscreen.className="pnlm-fullscreen-toggle-button pnlm-sprite pnlm-fullscreen-toggle-button-inactive pnlm-controls pnlm-control";(f.fullscreenEnabled||f.mozFullScreenEnabled||f.webkitFullscreenEnabled||f.msFullscreenEnabled)&&w.container.appendChild(w.fullscreen);w.orientation=f.createElement("div");w.orientation.addEventListener("click",function(a){aa?l():Ka()});w.orientation.addEventListener("mousedown",function(a){a.stopPropagation()});
+w.orientation.addEventListener("touchstart",function(a){a.stopPropagation()});w.orientation.addEventListener("pointerdown",function(a){a.stopPropagation()});w.orientation.className="pnlm-orientation-button pnlm-orientation-button-inactive pnlm-sprite pnlm-controls pnlm-control";var pa,Ya=!1;J.DeviceOrientationEvent?J.addEventListener("deviceorientation",Oa):pa=!1;var Ha=f.createElement("div");Ha.className="pnlm-compass pnlm-controls pnlm-control";C.appendChild(Ha);v.firstScene?g(v.firstScene):v.default&&
+v.default.firstScene?g(v.default.firstScene):g(null);t(!0);var ma=[],Aa=[];Z.prototype.multiply=function(a){return new Z(this.w*a.w-this.x*a.x-this.y*a.y-this.z*a.z,this.x*a.w+this.w*a.x+this.y*a.z-this.z*a.y,this.y*a.w+this.w*a.y+this.z*a.x-this.x*a.z,this.z*a.w+this.w*a.z+this.x*a.y-this.y*a.x)};Z.prototype.toEulerAngles=function(){var a=Math.atan2(2*(this.w*this.x+this.y*this.z),1-2*(this.x*this.x+this.y*this.y)),b=Math.asin(2*(this.w*this.y-this.z*this.x)),c=Math.atan2(2*(this.w*this.z+this.x*
+this.y),1-2*(this.y*this.y+this.z*this.z));return[a,b,c]};this.isLoaded=function(){return Boolean(K)};this.getPitch=function(){return b.pitch};this.setPitch=function(a,c,d,e){(c=c==m?1E3:Number(c))?L.pitch={startTime:Date.now(),startPosition:b.pitch,endPosition:a,duration:c,callback:d,callbackArgs:e}:b.pitch=a;F();return this};this.getPitchBounds=function(){return[b.minPitch,b.maxPitch]};this.setPitchBounds=function(a){b.minPitch=Math.max(-90,Math.min(a[0],90));b.maxPitch=Math.max(-90,Math.min(a[1],
+90));return this};this.getYaw=function(){return b.yaw};this.setYaw=function(a,c,d,e){c=c==m?1E3:Number(c);a=(a+180)%360-180;c?(180= 7) {
+ var center = Math.pow(2, z - 1),
+ width = Math.pow(2, z - 6),
+ min = center - (width / 2),
+ max = center + (width / 2) - 1;
+ return x >= min && x <= max && y >= min && y <= max;
+ }
+ return false;
+}
+
+/**
+ * localeTimeStamp().
+ */
+function localeTimestamp(s) {
+ if (!s) return null;
+ var detected = utilDetect();
+ var options = {
+ day: 'numeric', month: 'short', year: 'numeric'
+ //hour: 'numeric', minute: 'numeric', second: 'numeric',
+ //timeZone: 'UTC'
+ };
+ var d = new Date(s);
+ if (isNaN(d.getTime())) return null;
+ return d.toLocaleString(detected.locale, options);
+}
+
+/**
+ * getTiles() returns array of d3 geo tiles.
+ * Using d3.geo.tiles.js from lib, gets tile extents for each grid tile in a grid created from
+ * an area around (and including) the current map view extents.
+ */
+function getTiles(projection) {
+ //console.log('getTiles()');
+
+ // s is the current map scale
+ // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground.
+ // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification.
+ // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx.
+ // As used here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels).
+ var s = projection.scale() * 2 * Math.PI,
+ z = Math.max(Math.log(s) / Math.log(2) - 8, 0),
+ ts = 256 * Math.pow(2, z - tileZoom),
+ origin = [
+ s / 2 - projection.translate()[0],
+ s / 2 - projection.translate()[1]];
+ return d3_geoTile()
+ .scaleExtent([tileZoom, tileZoom])
+ .scale(s)
+ .size(projection.clipExtent()[1])
+ .translate(projection.translate())()
+ .map(function (tile) {
+ var x = tile[0] * ts - origin[0],
+ y = tile[1] * ts - origin[1];
+ return {
+ id: tile.toString(),
+ xyz: tile,
+ extent: geoExtent(
+ projection.invert([x, y + ts]),
+ projection.invert([x + ts, y])
+ )
+ };
+ });
+}
+
+/**
+ * loadTiles() wraps the process of generating tiles and then fetching image points for each tile.
+ */
+function loadTiles(which, url, projection) {
+ console.log('loadTiles() for: ', which);
+ var s = projection.scale() * 2 * Math.PI,
+ currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
+
+ // breakup the map view into tiles
+ var tiles = getTiles(projection).filter(function (t) {
+ return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
+ });
+
+ tiles.forEach(function (tile) {
+ loadNextTilePage(which, currZoom, url, tile);
+ });
+}
+
+/**
+ * loadNextTilePage() load data for the next tile page in line.
+ */
+function loadNextTilePage(which, currZoom, url, tile) {
+ console.log('loadNextTilePage()');
+ var cache = _bubbleCache[which],
+ nextPage = cache.nextPage[tile.id] || 0,
+ id = tile.id + ',' + String(nextPage);
+ if (cache.loaded[id] || cache.inflight[id]) return;
+ cache.inflight[id] = getBubbles(url, tile, function(bubbles){
+ console.log("GET Response - bubbles: ", bubbles);
+ cache.loaded[id] = true;
+ delete cache.inflight[id];
+ if (!bubbles) return;
+
+ // [].shift() removes the first element, some statistics info, not a bubble point
+ bubbles.shift();
+ console.log('bubbles.length', bubbles.length);
+ var features = bubbles.map(function (bubble) {
+ var loc = [bubble.lo, bubble.la];
+ var d = {
+ loc: loc,
+ key: bubble.id,
+ ca: bubble.he,
+ captured_at: bubble.cd,
+ captured_by: "microsoft",
+ nbn: bubble.nbn,
+ pbn: bubble.pbn,
+ rn: bubble.rn,
+ pano: true
+ };
+ var feature = {
+ geometry: {
+ coordinates: [bubble.lo, bubble.la],
+ type: "Point"
+ },
+ properties: d,
+ type: "Feature"
+ };
+ var bubbleId = bubble.id;
+ cache.points[bubbleId] = feature;
+ cache.forImageKey[bubbleId] = bubbleId;
+ return {
+ minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d
+ };
+
+ }).filter(Boolean);
+ cache.rtree.load(features);
+ if (which === 'bubbles'){
+ dispatch.call('loadedBubbles');
+ }
+ });
+}
+
+/**
+ * getBubbles() handles the request to the server for a tile extent of 'bubbles' (streetside image locations).
+ */
+function getBubbles(url, tile, callback) {
+ //console.log('services - streetside - getBubbles()');
+ var rect = tile.extent.rectangle();
+ var urlForRequest = url + utilQsString({
+ n: rect[3],
+ s: rect[1],
+ e: rect[2],
+ w: rect[0],
+ appkey: bubbleAppKey,
+ jsCallback: '{callback}'
+ });
+ jsonpRequest(urlForRequest, function (data) {
+ if (!data || data.error) {
+ callback(null);
+ } else {
+ callback(data);
+ }
+ });
+}
+
+/**
+ * partitionViewport() partition viewport into `psize` x `psize` regions.
+ */
+function partitionViewport(psize, projection) {
+ var dimensions = projection.clipExtent()[1];
+ psize = psize || 16;
+ var cols = d3_range(0, dimensions[0], psize),
+ rows = d3_range(0, dimensions[1], psize),
+ partitions = [];
+
+ rows.forEach(function (y) {
+ cols.forEach(function (x) {
+ var min = [x, y + psize],
+ max = [x + psize, y];
+ partitions.push(
+ geoExtent(projection.invert(min), projection.invert(max)));
+ });
+ });
+
+ return partitions;
+}
+
+/**
+ * searchLimited().
+ */
+function searchLimited(psize, limit, projection, rtree) {
+ //console.log('services - streetside - searchLimited()');
+ limit = limit || 3;
+
+ var partitions = partitionViewport(psize, projection);
+ var results;
+
+ // console.time('previous');
+ results = _flatten(_map(partitions, function (extent) {
+ return rtree.search(extent.bbox())
+ .slice(0, limit)
+ .map(function (d) { return d.data; });
+ }));
+
+ return results;
+}
+
+
+
+export default {
+
+ /**
+ * init() initialize streetside.
+ */
+ init: function () {
+ if (!_bubbleCache) {
+ this.reset();
+ }
+
+ this.event = utilRebind(this, dispatch, 'on');
+ },
+
+ /**
+ * reset() reset the cache.
+ */
+ reset: function () {
+ var cache = _bubbleCache;
+
+ if (cache) {
+ if (cache.bubbles && cache.bubbles.inflight) {
+ _forEach(cache.bubbles.inflight, abortRequest);
+ }
+ }
+
+ _bubbleCache = {
+ bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} }
+ };
+ },
+
+ /**
+ * bubbles()
+ */
+ bubbles: function (projection) {
+ //console.log('services - streetside - bubbles()');
+ var psize = 32, limit = 3;
+ return searchLimited(psize, limit, projection, _bubbleCache.bubbles.rtree);
+ },
+
+ /**
+ * loadBubbles()
+ */
+ loadBubbles: function (projection) {
+ //console.log('services - streetside - loadBubbles()');
+ loadTiles('bubbles', bubbleApi, projection);
+ },
+
+ /**
+ * loadViewer() create the streeside viewer.
+ */
+ loadViewer: function (context) {
+ //console.log('services - streetside - loadViewer()');
+
+ // create ms-wrapper, a photo wrapper class
+ var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper')
+ .data([0]);
+
+ // inject ms-wrapper into the photoviewer div (used by all
+ // to house each custom photo viewer)
+ var wrapEnter = wrap.enter()
+ .append('div')
+ .attr('id', 'ms')
+ .attr('class', 'photo-wrapper ms-wrapper')
+ .classed('hide', true);
+
+ // inject div to support streetside viewer (pannellum)
+ wrapEnter
+ .append('div')
+ .attr('id','viewer-streetside');
+
+ // inject div to support photo attribution into ms-wrapper
+ wrapEnter
+ .append('div')
+ .attr('class', 'photo-attribution-streetside fillD');
+
+ // load streetside pannellum viewer css
+ d3_select('head').selectAll('#streetside-viewercss')
+ .data([0])
+ .enter()
+ .append('link')
+ .attr('id', 'streetside-viewercss')
+ .attr('rel', 'stylesheet')
+ .attr('href', context.asset(pannellumViewerCss));
+
+ // load streetside pannellum viewer js
+ d3_select('head').selectAll('#streetside-viewerjs')
+ .data([0])
+ .enter()
+ .append('script')
+ .attr('id', 'streetside-viewerjs')
+ .attr('src', context.asset(pannellumViewer));
+ },
+
+ /**
+ * showViewer()
+ */
+ showViewer: function () {
+ //console.log('services - streetside - showViewer()');
+ var wrap = d3_select('#photoviewer')
+ .classed('hide', false);
+
+ var isHidden = wrap.selectAll('.photo-wrapper.ms-wrapper.hide').size();
+
+ if (isHidden) {
+ wrap
+ .selectAll('.photo-wrapper:not(.ms-wrapper)')
+ .classed('hide', true);
+
+ wrap
+ .selectAll('.photo-wrapper.ms-wrapper')
+ .classed('hide', false);
+ }
+
+ return this;
+ },
+
+ /**
+ * hideViewer()
+ */
+ hideViewer: function () {
+ var viewer = d3_select('#photoviewer');
+ if (!viewer.empty()) viewer.datum(null);
+
+ viewer
+ .classed('hide', true)
+ .selectAll('.photo-wrapper')
+ .classed('hide', true);
+
+ d3_selectAll('.viewfield-group, .sequence, .icon-sign')
+ .classed('selected', false);
+
+ return this.setStyles(null, true);
+ },
+
+ /**
+ * selectImage().
+ */
+ selectImage: function (d) {
+ var viewer = d3_select('#photoviewer');
+ if (!viewer.empty()) viewer.datum(d);
+
+ this.setStyles(null, true);
+
+ var wrap = d3_select('#photoviewer .ms-wrapper');
+ var attribution = wrap.selectAll('.photo-attribution-streetside').html('');
+ var year = (new Date()).getFullYear();
+
+ if (d) {
+ if (d.captured_by) {
+ attribution
+ .append('a')
+ .attr('class', 'captured_by')
+ .attr('target', '_blank')
+ .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
+ .text('©' + year +' Microsoft');
+
+ attribution
+ .append('span')
+ .text('|');
+ }
+
+ if (d.captured_at) {
+ attribution
+ .append('span')
+ .attr('class', 'captured_at')
+ .text(localeTimestamp(d.captured_at));
+ }
+
+ attribution
+ .append('a')
+ .attr('class', 'image_link')
+ .attr('target', '_blank')
+ .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' + encodeURIComponent(d.key) +
+ '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
+ .text('Report a privacy concern with this image');
+
+ var bubbleIdQuadKey = d.key.toString(4);
+ var paddingNeeded = 16 - bubbleIdQuadKey.length;
+ for (var i = 0; i < paddingNeeded ;i++)
+ {
+ bubbleIdQuadKey = "0" + bubbleIdQuadKey;
+ }
+
+ //Order matters here: front=01, right=02, back=03, left=10 up=11,= down=12
+ var imgLocIdxArr = ['01','02','03','10','11','12'];
+ var imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey;
+ var imgUrlSuffix = '.jpg?g=6338&n=z';
+ pannellum.viewer('viewer-streetside', {
+ "type": "cubemap",
+ "cubeMap": [
+ imgUrlPrefix + imgLocIdxArr[0] + imgUrlSuffix,
+ imgUrlPrefix + imgLocIdxArr[1] + imgUrlSuffix,
+ imgUrlPrefix + imgLocIdxArr[2] + imgUrlSuffix,
+ imgUrlPrefix + imgLocIdxArr[3] + imgUrlSuffix,
+ imgUrlPrefix + imgLocIdxArr[4] + imgUrlSuffix,
+ imgUrlPrefix + imgLocIdxArr[5] + imgUrlSuffix
+ ],
+ "showFullscreenCtrl": false,
+ "autoLoad": true
+ });
+ }
+ return this;
+ },
+
+ /**
+ * setStyles().
+ */
+ setStyles: function (hovered, reset) {
+ if (reset) { // reset all layers
+ d3_selectAll('.viewfield-group')
+ .classed('highlighted', false)
+ .classed('hovered', false)
+ .classed('selected', false);
+
+ d3_selectAll('.sequence')
+ .classed('highlighted', false)
+ .classed('selected', false);
+ }
+ var hoveredBubbleKey = hovered && hovered.key;
+ var viewer = d3_select('#photoviewer');
+ var selected = viewer.empty() ? undefined : viewer.datum();
+ var selectedBubbleKey = selected && selected.key;
+ var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey);
+
+ d3_selectAll('.layer-streetside-images .viewfield-group')
+ .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; })
+ .classed('hovered', function (d) { return d.key === hoveredBubbleKey; })
+ .classed('selected', function (d) { return d.key === selectedBubbleKey; });
+
+ d3_selectAll('.layer-streetside-images .sequence')
+ .classed('highlighted', function (d) { return d.properties.key === hoveredSequenceKey; })
+ .classed('selected', function (d) { return d.properties.key === selectedSequenceKey; });
+
+ return this;
+ },
+
+ /**
+ * cache().
+ */
+ cache: function () {
+ return _bubbleCache;
+ }
+};
diff --git a/modules/svg/index.js b/modules/svg/index.js
index 68e2f2f289..29944847d5 100644
--- a/modules/svg/index.js
+++ b/modules/svg/index.js
@@ -6,6 +6,7 @@ export { svgIcon } from './icon.js';
export { svgLabels } from './labels.js';
export { svgLayers } from './layers.js';
export { svgLines } from './lines.js';
+export { svgStreetside } from './streetside.js';
export { svgMapillaryImages } from './mapillary_images.js';
export { svgMapillarySigns } from './mapillary_signs.js';
export { svgMidpoints } from './midpoints.js';
diff --git a/modules/svg/layers.js b/modules/svg/layers.js
index 08f92db184..8e6227dbf1 100644
--- a/modules/svg/layers.js
+++ b/modules/svg/layers.js
@@ -8,6 +8,7 @@ import { select as d3_select } from 'd3-selection';
import { svgDebug } from './debug';
import { svgGpx } from './gpx';
+import { svgStreetside } from './streetside';
import { svgMapillaryImages } from './mapillary_images';
import { svgMapillarySigns } from './mapillary_signs';
import { svgOpenstreetcamImages } from './openstreetcam_images';
@@ -22,6 +23,7 @@ export function svgLayers(projection, context) {
layers = [
{ id: 'osm', layer: svgOsm(projection, context, dispatch) },
{ id: 'gpx', layer: svgGpx(projection, context, dispatch) },
+ { id: 'streetside', layer: svgStreetside(projection, context, dispatch)},
{ id: 'mapillary-images', layer: svgMapillaryImages(projection, context, dispatch) },
{ id: 'mapillary-signs', layer: svgMapillarySigns(projection, context, dispatch) },
{ id: 'openstreetcam-images', layer: svgOpenstreetcamImages(projection, context, dispatch) },
diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js
index fb8a4b4b84..72bbd94c0a 100644
--- a/modules/svg/mapillary_images.js
+++ b/modules/svg/mapillary_images.js
@@ -27,7 +27,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
} else if (!services.mapillary && _mapillary) {
_mapillary = null;
}
-
+
return _mapillary;
}
@@ -76,6 +76,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
function click(d) {
+ console.log("mapillary image feature click: ", d);
var service = getService();
if (!service) return;
diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js
new file mode 100644
index 0000000000..860efe09f6
--- /dev/null
+++ b/modules/svg/streetside.js
@@ -0,0 +1,275 @@
+import _throttle from 'lodash-es/throttle';
+import { select as d3_select } from 'd3-selection';
+import { svgPath, svgPointTransform } from './index';
+import { services } from '../services';
+
+export function svgStreetside(projection, context, dispatch) {
+ var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000);
+ var minZoom = 16;
+ var minMarkerZoom = 16;
+ var minViewfieldZoom = 19;
+ var layer = d3_select(null);
+ var _streetside;
+
+ /**
+ * init().
+ */
+ function init() {
+ if (svgStreetside.initialized) return; // run once
+ svgStreetside.enabled = false;
+ svgStreetside.initialized = true;
+ console.log("svg: streetside initialized....");
+ }
+
+ /**
+ * getService().
+ */
+ function getService() {
+ if (services.streetside && !_streetside) {
+ _streetside = services.streetside;
+ _streetside.event.on('loadedBubbles', throttledRedraw);
+ } else if (!services.streetside && _streetside) {
+ _streetside = null;
+ }
+
+ return _streetside;
+ }
+
+ /**
+ * showLayer().
+ */
+ function showLayer() {
+ console.log('svg - streetside - showLayer()');
+ var service = getService();
+ if (!service) return;
+
+ service.loadViewer(context);
+ editOn();
+
+ layer
+ .style('opacity', 0)
+ .transition()
+ .duration(250)
+ .style('opacity', 1)
+ .on('end', function () { dispatch.call('change'); });
+ }
+
+ /**
+ * hideLayer().
+ */
+ function hideLayer() {
+ var service = getService();
+ if (service) {
+ service.hideViewer();
+ }
+
+ throttledRedraw.cancel();
+
+ layer
+ .transition()
+ .duration(250)
+ .style('opacity', 0)
+ .on('end', editOff);
+ }
+
+ /**
+ * editOn().
+ */
+ function editOn() {
+ layer.style('display', 'block');
+ }
+
+ /**
+ * editOff().
+ */
+ function editOff() {
+ layer.selectAll('.viewfield-group').remove();
+ layer.style('display', 'none');
+ }
+
+ /**
+ * click() Handles 'bubble' point click event.
+ */
+ function click(d) {
+ console.log("svg: map was clicked with streetside on. Passed obj: ", d);
+ var service = getService();
+ if (!service) return;
+
+ service
+ .selectImage(d)
+ .showViewer();
+
+ context.map().centerEase(d.loc);
+ }
+
+ /**
+ * mouseover().
+ */
+ function mouseover(d) {
+ var service = getService();
+ if (service) service.setStyles(d);
+ }
+
+ /**
+ * mouseout().
+ */
+ function mouseout() {
+ var service = getService();
+ if (service) service.setStyles(null);
+ }
+
+ /**
+ * transform().
+ */
+ function transform(d) {
+ var t = svgPointTransform(projection)(d);
+ if (d.ca) {
+ t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
+ }
+ return t;
+ }
+
+ /**
+ * update().
+ */
+ function update() {
+ console.log("svg - update()");
+ var viewer = d3_select('#photoviewer');
+ var selected = viewer.empty() ? undefined : viewer.datum();
+ var z = ~~context.map().zoom();
+ var showMarkers = (z >= minMarkerZoom);
+ var showViewfields = (z >= minViewfieldZoom);
+ var service = getService();
+
+ // gets the features from service cache
+ var bubbles = (service && showMarkers ? service.bubbles(projection) : []);
+ var groups = layer.selectAll('.markers').selectAll('.viewfield-group')
+ .data(bubbles, function(d) { return d.key; });
+
+ // exit
+ groups.exit()
+ .remove();
+
+ // enter
+ var groupsEnter = groups.enter()
+ .append('g')
+ .attr('class', 'viewfield-group')
+ .on('mouseover', mouseover)
+ .on('mouseout', mouseout)
+ .on('click', click);
+
+ groupsEnter
+ .append('g')
+ .attr('class', 'viewfield-scale');
+
+ // update
+ var markers = groups
+ .merge(groupsEnter)
+ .sort(function(a, b) {
+ return (a === selected) ? 1
+ : (b === selected) ? -1
+ : b.loc[1] - a.loc[1];
+ })
+ .attr('transform', transform)
+ .select('.viewfield-scale');
+
+
+ markers.selectAll('circle')
+ .data([0])
+ .enter()
+ .append('circle')
+ .attr('dx', '0')
+ .attr('dy', '0')
+ .attr('r', '6');
+
+ var viewfields = markers.selectAll('.viewfield')
+ .data(showViewfields ? [0] : []);
+
+ viewfields.exit()
+ .remove();
+
+ // viewfields may or may not be drawn...
+ // but if they are, draw below the circles
+ viewfields.enter()
+ .insert('path', 'circle')
+ .attr('class', 'viewfield')
+ .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
+ .attr('d', viewfieldPath);
+
+ function viewfieldPath() {
+ var d = this.parentNode.__data__;
+ if (d.pano) {
+ return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+ } else {
+ return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+ }
+ }
+ }
+
+ /**
+ * drawImages()
+ * drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called.
+ * 'svgStreetside()' is called from index.js
+ */
+ function drawImages(selection) {
+ //console.log("svg - streetside - drawImages(); selection: ", selection);
+ var enabled = svgStreetside.enabled,
+ service = getService();
+
+ layer = selection.selectAll('.layer-streetside-images')
+ .data(service ? [0] : []);
+
+ layer.exit()
+ .remove();
+
+ var layerEnter = layer.enter()
+ .append('g')
+ .attr('class', 'layer-streetside-images')
+ .style('display', enabled ? 'block' : 'none');
+
+ layerEnter
+ .append('g')
+ .attr('class', 'markers');
+
+ layer = layerEnter
+ .merge(layer);
+
+ if (enabled) {
+ if (service && ~~context.map().zoom() >= minZoom) {
+ editOn();
+ update();
+
+ service.loadBubbles(projection);
+ } else {
+ editOff();
+ }
+ }
+ }
+
+ /**
+ * drawImages.enabled().
+ */
+ drawImages.enabled = function(_) {
+ //console.log('svg - streetside - drawImages.enabled()');
+ if (!arguments.length) return svgStreetside.enabled;
+ svgStreetside.enabled = _;
+ if (svgStreetside.enabled) {
+ showLayer();
+ } else {
+ hideLayer();
+ }
+ dispatch.call('change');
+ return this;
+ };
+
+ /**
+ * drawImages.supported().
+ */
+ drawImages.supported = function() {
+ return !!getService();
+ };
+
+ init();
+
+ return drawImages;
+}
diff --git a/modules/ui/init.js b/modules/ui/init.js
index adeb376fb4..26548c6fd6 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -249,6 +249,7 @@ export function uiInit(context) {
.append('button')
.attr('class', 'thumb-hide')
.on('click', function () {
+ if (services.streetside) { services.streetside.hideViewer(); }
if (services.mapillary) { services.mapillary.hideViewer(); }
if (services.openstreetcam) { services.openstreetcam.hideViewer(); }
})
diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js
index 457a43be53..3e61f4669c 100644
--- a/modules/ui/map_data.js
+++ b/modules/ui/map_data.js
@@ -86,7 +86,7 @@ export function uiMapData(context) {
function drawPhotoItems(selection) {
- var photoKeys = ['mapillary-images', 'mapillary-signs', 'openstreetcam-images'];
+ var photoKeys = ['streetside','mapillary-images', 'mapillary-signs', 'openstreetcam-images'];
var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; });
var data = photoLayers.filter(function(obj) { return obj.layer.supported(); });
diff --git a/package.json b/package.json
index a819e512d9..b6db64bf1a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
"clean": "shx rm -f dist/*.js dist/*.map dist/*.css dist/img/*.svg",
"dist": "npm-run-all -p dist:**",
"dist:mapillary": "shx mkdir -p dist/mapillary-js && shx cp -R node_modules/mapillary-js/dist/* dist/mapillary-js/",
+ "dist:pannellum": "shx mkdir -p dist/pannellum-streetside && shx cp -R node_modules/pannellum/build/* dist/pannellum-streetside/",
"dist:min": "uglifyjs dist/iD.js -c warnings=false -m -o dist/iD.min.js",
"dist:svg:maki": "svg-sprite --symbol --symbol-dest . --symbol-sprite dist/img/maki-sprite.svg node_modules/@mapbox/maki/icons/*.svg",
"dist:svg:id": "node svg/spriteify.js --svg svg/iD-sprite.src.svg --json svg/iD-sprite.json > dist/img/iD-sprite.svg",
@@ -36,7 +37,8 @@
"node-diff3": "1.0.0",
"osm-auth": "1.0.2",
"rbush": "2.0.2",
- "wmf-sitematrix": "0.1.4"
+ "wmf-sitematrix": "0.1.4",
+ "pannellum": "2.4.1"
},
"devDependencies": {
"@mapbox/maki": "^4.0.0",
diff --git a/test/spec/svg/layers.js b/test/spec/svg/layers.js
index 75c957daaf..b0af6a0384 100644
--- a/test/spec/svg/layers.js
+++ b/test/spec/svg/layers.js
@@ -29,6 +29,7 @@ describe('iD.svgLayers', function () {
expect(nodes.length).to.eql(6);
expect(d3.select(nodes[0]).classed('data-layer-osm')).to.be.true;
expect(d3.select(nodes[1]).classed('data-layer-gpx')).to.be.true;
+ expect(d3.select(nodes[2]).classed('data-layer-streetside')).to.be.true;
expect(d3.select(nodes[2]).classed('data-layer-mapillary-images')).to.be.true;
expect(d3.select(nodes[3]).classed('data-layer-mapillary-signs')).to.be.true;
expect(d3.select(nodes[4]).classed('data-layer-openstreetcam-images')).to.be.true;