import { Panorama } from './Panorama';
import { ImagePanorama } from './ImagePanorama';
import { GoogleStreetviewLoader } from '../loaders/GoogleStreetviewLoader';
import * as THREE from 'three';
import { EVENTS } from '../Constants';
/**
* @classdesc Google streetview panorama
* @description [How to get Panorama ID]{@link http://stackoverflow.com/questions/29916149/google-maps-streetview-how-to-get-panorama-id}
* @constructor
* @param {string} panoId - Panorama id from Google Streetview
* @param {string} [apiKey] - Google Street View API Key
*/
function GoogleStreetviewPanorama ( panoId, apiKey ) {
ImagePanorama.call( this );
this.panoId = panoId;
this.gsvLoader = null;
this.loadRequested = false;
this.setupGoogleMapAPI( apiKey );
this.type = 'google_streetview_panorama';
}
GoogleStreetviewPanorama.prototype = Object.assign( Object.create( ImagePanorama.prototype ), {
constructor: GoogleStreetviewPanorama,
/**
* Load Google Street View by panorama id
* @param {string} panoId - Gogogle Street View panorama id
* @memberOf GoogleStreetviewPanorama
* @instance
*/
load: function ( panoId ) {
Panorama.prototype.load.call( this, false );
this.loadRequested = true;
panoId = ( panoId || this.panoId ) || {};
if ( panoId && this.gsvLoader ) {
this.loadGSVLoader( panoId );
}
},
/**
* Setup Google Map API
* @param {string} apiKey
* @memberOf GoogleStreetviewPanorama
* @instance
*/
setupGoogleMapAPI: function ( apiKey ) {
const scriptId = 'panolens-gmapscript';
const onScriptLoaded = this.setGSVLoader.bind( this );
if( document.querySelector( `#${scriptId}` ) ) {
onScriptLoaded();
return;
}
const script = document.createElement( 'script' );
script.id = scriptId;
script.src = 'https://maps.googleapis.com/maps/api/js?';
script.src += apiKey ? 'key=' + apiKey : '';
if( script.readyState ) { // IE
script.onreadystatechange = function() {
if ( script.readyState === EVENTS.LOADED || script.readyState === 'complete' ) {
script.onreadystatechange = null;
onScriptLoaded();
}
};
} else {
script.onload = onScriptLoaded;
}
document.querySelector( 'head' ).appendChild( script );
},
/**
* Set GSV Loader
* @memberOf GoogleStreetviewPanorama
* @instance
*/
setGSVLoader: function () {
this.gsvLoader = new GoogleStreetviewLoader();
if ( this.loadRequested ) {
this.load();
}
},
/**
* Get GSV Loader
* @memberOf GoogleStreetviewPanorama
* @instance
* @return {GoogleStreetviewLoader} GSV Loader instance
*/
getGSVLoader: function () {
return this.gsvLoader;
},
/**
* Load GSV Loader
* @param {string} panoId - Gogogle Street View panorama id
* @memberOf GoogleStreetviewPanorama
* @instance
*/
loadGSVLoader: function ( panoId ) {
this.loadRequested = false;
this.gsvLoader.onProgress = this.onProgress.bind( this );
this.gsvLoader.onPanoramaLoad = this.onLoad.bind( this );
this.gsvLoader.setZoom( this.getZoomLevel() );
this.gsvLoader.load( panoId );
this.gsvLoader.loaded = true;
},
/**
* This will be called when panorama is loaded
* @param {HTMLCanvasElement} canvas - Canvas where the tiles have been drawn
* @memberOf GoogleStreetviewPanorama
* @instance
*/
onLoad: function ( canvas ) {
ImagePanorama.prototype.onLoad.call( this, new THREE.Texture( canvas ) );
},
/**
* Reset
* @memberOf GoogleStreetviewPanorama
* @instance
*/
reset: function () {
this.gsvLoader = undefined;
ImagePanorama.prototype.reset.call( this );
}
} );
export { GoogleStreetviewPanorama };