Index: polymer_1.0.4/bower_components/google-streetview-pano/google-streetview-pano.html |
diff --git a/polymer_1.0.4/bower_components/google-streetview-pano/google-streetview-pano.html b/polymer_1.0.4/bower_components/google-streetview-pano/google-streetview-pano.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5aa0a1afaea616bab5057e9168540524fabd18aa |
--- /dev/null |
+++ b/polymer_1.0.4/bower_components/google-streetview-pano/google-streetview-pano.html |
@@ -0,0 +1,233 @@ |
+<link rel="import" href="../polymer/polymer.html"> |
+<link rel="import" href="../google-apis/google-maps-api.html"> |
+ |
+<!-- |
+Element for generating a Google Maps Street View Panorama. |
+ |
+##### Example |
+ |
+ <google-streetview-pano |
+ pano-id="CWskcsTEZBNXaD8gG-zATA" |
+ heading="330" |
+ pitch="-2" |
+ zoom="0.8" |
+ disable-default-ui> |
+ </google-streetview-pano> |
+ |
+There are tons of great panoramas on the [Google Maps | Views page](https://www.google.com/maps/views/home?gl=us) |
+ |
+To grab a panorama, look at its url in the address bar. For example: |
+ |
+google.com/maps/views/view/102684927602131521305/photo/**1szTnskrdKIAAAGuu3fZRw** |
+ |
+The hash in bold is the `pano-id`. You'll often need to dial in the `heading`, `pitch` and `zoom` manually. |
+ |
+@demo |
+--> |
+ |
+<dom-module id="google-streetview-pano"> |
+ <style> |
+ :host { |
+ display: block; |
+ } |
+ #pano { |
+ height: 100%; |
+ } |
+ </style> |
+ <template> |
+ <google-maps-api api-key="{{apiKey}}" version="{{version}}" |
+ libraries="{{libraries}}" |
+ client-id="{{clientId}}" |
+ language="{{language}}" |
+ client |
+ on-api-load="_mapApiLoaded"></google-maps-api> |
+ <div id="pano" on-mouseenter="_autoStop" |
+ on-mouseleave="_autoUpdate"></div> |
+ </template> |
+</dom-module> |
+ |
+<script> |
+ "use strict"; |
+ |
+ Polymer({ |
+ is: 'google-streetview-pano', |
+ properties: { |
+ /** |
+ * A Maps API key. To obtain an API key, see developers.google.com/maps/documentation/javascript/tutorial#api_key. |
+ */ |
+ apiKey: String, |
+ |
+ /** |
+ * A Maps API for Business Client ID. To obtain a Maps API for Business Client ID, see developers.google.com/maps/documentation/business/. |
+ * If set, a Client ID will take precedence over an API Key. |
+ */ |
+ clientId: String, |
+ |
+ /** |
+ * The localized language to load the Maps API with. For more information |
+ * see https://developers.google.com/maps/documentation/javascript/basics#Language |
+ * |
+ * Note: the Maps API defaults to the preferred language setting of the browser. |
+ * Use this parameter to override that behavior. |
+ * |
+ */ |
+ language: String, |
+ |
+ /** |
+ * A comma separated list (e.g. "places,geometry") of libraries to load |
+ * with this map. Defaults to "places". For more information see |
+ * https://developers.google.com/maps/documentation/javascript/libraries. |
+ * |
+ */ |
+ libraries: { |
+ type: String, |
+ value: "places" |
+ }, |
+ |
+ /** |
+ * Version of the Google Maps API to use. |
+ * |
+ */ |
+ version: { |
+ type: String, |
+ value: '3.exp' |
+ }, |
+ |
+ /** |
+ * Specifies which photosphere to load |
+ * |
+ * **Required** |
+ */ |
+ panoId: { |
+ type: String, |
+ observer: '_panoIdChanged' |
+ }, |
+ |
+ /** |
+ * The camera heading in degrees relative to true north. True north is 0°, east is 90°, south is 180°, west is 270°. |
+ */ |
+ heading: { |
+ type: Number, |
+ value: 45 |
+ }, |
+ |
+ /** |
+ * The camera pitch in degrees, relative to the street view vehicle. Ranges from 90° (directly upwards) to -90° (directly downwards). |
+ */ |
+ pitch: { |
+ type: Number, |
+ value: -2 |
+ }, |
+ |
+ /** |
+ * Sets the zoom level of the panorama. Fully zoomed-out is level 0, where the field of view is 180 degrees. |
+ */ |
+ zoom: { |
+ type: Number, |
+ value: 1 |
+ }, |
+ |
+ /** |
+ * If true, disables all default UI. |
+ */ |
+ disableDefaultUi: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ /** |
+ * If true, disables the auto panning animation |
+ */ |
+ disableAutoPan: { |
+ type: Boolean, |
+ value: false |
+ }, |
+ |
+ }, |
+ |
+ pano: null, |
+ rAFid: null, |
+ _mapApiLoaded: function() { |
+ this.pano = new google.maps.StreetViewPanorama( |
+ this.$.pano, |
+ this._getPanoOptions()); |
+ this.pano.setVisible(true); |
+ |
+ if (this.disableAutoPan) { |
+ return; |
+ } |
+ // Kickoff the rotating animation |
+ this.rAFid = requestAnimationFrame(this.update.bind(this)); |
+ }, |
+ |
+ /** |
+ * Returns the an object with the current panorama configurations. |
+ */ |
+ _getPanoOptions: function() { |
+ var panoOptions = { |
+ pano: this.panoId, |
+ pov: { |
+ heading: this.heading, |
+ pitch: this.pitch |
+ }, |
+ disableDefaultUI: this.disableDefaultUi, |
+ zoom: this.zoom |
+ }; |
+ |
+ return panoOptions; |
+ }, |
+ |
+ /** |
+ * Fired every rAF. Updates the heading to create a slow pan effect |
+ * Will be canceled by mouse enter or calling stop() |
+ */ |
+ update: function() { |
+ this.rAFid = requestAnimationFrame(this.update.bind(this)); |
+ var pov = this.pano.getPov(); |
+ pov.heading += 0.03; |
+ this.pano.setPov(pov); |
+ }, |
+ |
+ _autoUpdate: function() { |
+ if (this.disableAutoPan) { |
+ return; |
+ } |
+ |
+ this.update(); |
+ }, |
+ |
+ /** |
+ * Reset the pov for the panorama. |
+ * @method reset |
+ */ |
+ reset: function() { |
+ var pov = this.pano.getPov(); |
+ pov.heading = this.heading; |
+ pov.pitch = this.pitch; |
+ this.pano.setPov(pov); |
+ }, |
+ |
+ /** |
+ * Cancel the slow panning animation. |
+ * @method stop |
+ */ |
+ stop: function() { |
+ cancelAnimationFrame(this.rAFid); |
+ }, |
+ |
+ _autoStop: function() { |
+ if (this.disableAutoPan) { |
+ return; |
+ } |
+ |
+ this.stop(); |
+ }, |
+ |
+ _panoIdChanged: function(newVal, oldVal) { |
+ if (this.pano) { |
+ this.pano.setPano(newVal); |
+ this.reset(); |
+ } |
+ } |
+ }); |
+</script> |