├── CONTRIBUTING
├── LICENSE
├── README.md
├── UDF
    ├── bigquery_udf_legacySql.js
    ├── bigquery_udf_legacySql.sql
    └── bigquery_udf_standardSql.sql
├── img
    └── loader.gif
├── index.html
├── step1
    └── map.html
├── step2
    └── map.html
├── step3
    └── map.html
├── step4
    └── map.html
├── step5
    ├── map.html
    └── map_legacySql.html
├── step6
    ├── map.html
    └── map_legacySql.html
├── step7
    ├── map.html
    └── map_legacySql.html
├── step8
    └── map.html
├── third_party
    └── point_in_polygon.js
└── work
    ├── .gitignore
    └── app.yaml


/CONTRIBUTING:
--------------------------------------------------------------------------------
 1 | Want to contribute? Great! First, read this page (including the small print at the end).
 2 | 
 3 | ### Before you contribute
 4 | Before we can use your code, you must sign the
 5 | [Google Individual Contributor License Agreement]
 6 | (https://cla.developers.google.com/about/google-individual)
 7 | (CLA), which you can do online. The CLA is necessary mainly because you own the
 8 | copyright to your changes, even after your contribution becomes part of our
 9 | codebase, so we need your permission to use and distribute your code. We also
10 | need to be sure of various other things—for instance that you'll tell us if you
11 | know that your code infringes on other people's patents. You don't have to sign
12 | the CLA until after you've submitted your code for review and a member has
13 | approved it, but you must do it before we can put your code into our codebase.
14 | Before you start working on a larger contribution, you should get in touch with
15 | us first through the issue tracker with your idea so that we can help out and
16 | possibly guide you. Coordinating up front makes it much easier to avoid
17 | frustration later on.
18 | 
19 | ### Code reviews
20 | All submissions, including submissions by project members, require review. We
21 | use GitHub pull requests for this purpose.
22 | 
23 | ### The small print
24 | Contributions made by corporations are covered by a different agreement than
25 | the one above, the
26 | [Software Grant and Corporate Contributor License Agreement]
27 | (https://cla.developers.google.com/about/google-corporate).
28 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "{}"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright {yyyy} {name of copyright owner}
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Google Maps API and BigQuery Codelab
 2 | 
 3 | ## Synopsis
 4 | 
 5 | This is not an official Google product.
 6 | 
 7 | This project demonstrates how to perform simple geospatial queries against a Google BigQuery table that contains latitude, longitude data in columns. It also shows how to use the Google Maps Platform's Maps JavaScript API to present a visual interface for the queries and the query results. The code accompanies a codelab which can be found [on the Codelabs page at the Google Developers site](https://codelabs.developers.google.com/codelabs/bigquery-maps-api). The files are arranged in sequential order to demonstrate progress through the codelab, but if you want you can jump [straight in to the finished example](step7/map.html "Finished example").
 8 | 
 9 | ## Motivation
10 | 
11 | The project and accompanying Codelab aim to illustrate some ways to work with and visualize geospatial and location data in BigQuery tables without needing specialized libraries, ETL workflows or spatial data formats.
12 | 
13 | ## Installation
14 | 
15 | The repo consists of static HTML files that can be run from a local computer or any web server.
16 | 
17 | To get it working, you'll need to sign up for BigQuery and the Google Maps API. See the codelab for more detailed instructions, but the basic steps to get this running are:
18 | - Sign up for a [Google Cloud Platform account](https://cloud.google.com/) and create or use an existing project.
19 | - Enable the [BigQuery API](https://cloud.google.com/bigquery/bigquery-api-quickstart "BigQuery API quick start instructions") and the [Google Maps Javascript API](https://developers.google.com/maps/documentation/javascript/ "Google Maps API documentation") in the Developer Console.
20 | - Enable the [Maps JavaScript API](https://console.cloud.google.com/marketplace/details/google/maps-backend.googleapis.com)) for your project.
21 | - Create a new API Key for use with the Google Maps Platform, with a Browser restriction.
22 | - Create OAuth 2.0 credentials for use with BigQuery.
23 | - Choose a BigQuery dataset to query. There are several public datasets with latitude/longitude data.
24 | - modify the code to replace the placeholders for API keys, OAuth 2.0 credentials, and BigQuery dataset and table name parameters with your own specific values for these.
25 | 
26 | 
27 | ## API Reference
28 | 
29 | For a general overview of Google BigQuery see [What Is BigQuery?](https://cloud.google.com/bigquery/what-is-bigquery "What is BigQuery?")
30 | 
31 | You may find it helpful to refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation "Google Maps API documentation"), the Google BigQuery reference, and the [Google Client API for JavaScript](https://github.com/google/google-api-javascript-client "Google Client API for JavaScript") reference.
32 | 
33 | ## License
34 | 
35 | This project is licensed under the [Apache 2.0 license](http://www.apache.org/licenses/LICENSE-2.0.txt "Apache 2.0 license").
36 | 


--------------------------------------------------------------------------------
/UDF/bigquery_udf_legacySql.js:
--------------------------------------------------------------------------------
 1 | //JavaScript UDF for point in polygon calculation using Legacy SQL approach
 2 | bigquery.defineFunction("pointInPolygon",
 3 |   ["pickup_latitude", "pickup_longitude", "pickup_datetime"],
 4 |   [
 5 |     {name: "latitude", type: "float"},
 6 |     {name: "longitude", type: "float"},
 7 |     {name:"pickup_datetime", type:"string"}
 8 |   ],
 9 |   inPoly
10 | );
11 | 
12 | function pointInPoly(polygon, point){
13 |   var vertx = [];
14 |   var verty = [];
15 |   var nvert = 0;
16 |   var testx = point[0];
17 |   var testy = point[1];
18 |   for(coord in polygon){
19 |     vertx[nvert] = polygon[coord][0];
20 |     verty[nvert] = polygon[coord][1];
21 |     nvert ++;
22 |   }
23 |   var i, j, c = 0;
24 |   for (i = 0, j = nvert-1; i < nvert; j = i++) {
25 |     if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
26 |     {c = !c;}
27 |   }
28 |   return c;
29 | }
30 | 
31 | function inPoly(row, emit){
32 |   var poly=[
33 |     [-73.98925602436066,40.743249676056955],
34 |     [-73.98836016654968,40.74280666503313],
35 |     [-73.98915946483612,40.741676770346295],
36 |     [-73.98967981338501,40.74191656974406]
37 |   ];
38 |   var pt = [row.pickup_longitude,row.pickup_latitude];
39 |   var result = pointInPoly(poly, pt);
40 |   if(result) {
41 |     emit({latitude: pt[1], longitude: pt[0]});
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/UDF/bigquery_udf_legacySql.sql:
--------------------------------------------------------------------------------
1 | SELECT latitude,longitude FROM pointInPolygon(
2 |   SELECT pickup_longitude, pickup_latitude, pickup_datetime
3 |   FROM [bigquery-public-data:new_york.tlc_yellow_trips_2016]
4 |   WHERE pickup_datetime BETWEEN TIMESTAMP("2016-01-01 00:00:01") AND TIMESTAMP("2016-01-29 23:59:59")
5 | )
6 | LIMIT 100
7 | 


--------------------------------------------------------------------------------
/UDF/bigquery_udf_standardSql.sql:
--------------------------------------------------------------------------------
 1 | CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64)
 2 | RETURNS BOOL LANGUAGE js AS """
 3 |   var polygon=[[-73.98925602436066,40.743249676056955],[-73.98836016654968,40.74280666503313],[-73.98915946483612,40.741676770346295],[-73.98967981338501,40.74191656974406]];
 4 | 
 5 |   var vertx = [];
 6 |   var verty = [];
 7 |   var nvert = 0;
 8 |   var testx = longitude;
 9 |   var testy = latitude;
10 | 
11 |   for(coord in polygon){
12 |     vertx[nvert] = polygon[coord][0];
13 |     verty[nvert] = polygon[coord][1];
14 |     nvert ++;
15 |   }
16 |   var i, j, c = 0;
17 |   for (i = 0, j = nvert-1; i < nvert; j = i++) {
18 |     if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){
19 |       c = !c;
20 |     }
21 |   }
22 |   return c;
23 | """;
24 | 
25 | SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime
26 | FROM `bigquery-public-data.new_york.tlc_yellow_trips_2016`
27 | WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE
28 | AND (pickup_datetime BETWEEN TIMESTAMP("2016-01-01 00:00:01") AND TIMESTAMP("2016-02-28 23:59:59"))
29 | LIMIT 100
30 | 


--------------------------------------------------------------------------------
/img/loader.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/googlemaps-samples/codelab-locator-bigquery-maps-js/b20f46b5507d5451a021db55713a4ec5948d10d4/img/loader.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Simple Map</title>
 5 |     <meta name="viewport" content="initial-scale=1.0">
 6 |     <meta charset="utf-8">
 7 |     <style>
 8 |       /* Always set the map height explicitly to define the size of the div
 9 |        * element that contains the map. */
10 |       #map {
11 |         height: 100%;
12 |       }
13 |       /* Optional: Makes the sample page fill the window. */
14 |       html, body {
15 |         height: 100%;
16 |         margin: 0;
17 |         padding: 0;
18 |       }
19 |     </style>
20 |   </head>
21 |   <body>
22 |     <div id="map"></div>
23 |     <script>
24 |       var map;
25 |       function initMap() {
26 |         map = new google.maps.Map(document.getElementById('map'), {
27 |           center: {lat: -34.397, lng: 150.644},
28 |           zoom: 8
29 |         });
30 |       }
31 |     </script>
32 |     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
33 |     async defer></script>
34 |   </body>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/step1/map.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <!--
 4 | Copyright 2016 Google Inc.
 5 | 
 6 | Licensed under the Apache License, Version 2.0 (the "License");
 7 | you may not use this file except in compliance with the License.
 8 | You may obtain a copy of the License at
 9 | 
10 |     http://www.apache.org/licenses/LICENSE-2.0
11 | 
12 | Unless required by applicable law or agreed to in writing, software
13 | distributed under the License is distributed on an "AS IS" BASIS,
14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | See the License for the specific language governing permissions and
16 | limitations under the License.
17 | -->
18 |   <head>
19 |     <title>Simple Map</title>
20 |     <meta name="viewport" content="initial-scale=1.0">
21 |     <meta charset="utf-8">
22 |     <style>
23 |       html, body {
24 |         height: 100%;
25 |         margin: 0;
26 |         padding: 0;
27 |       }
28 |       #map {
29 |         height: 100%;
30 |       }
31 |     </style>
32 |     <script>
33 |       let map;
34 |       function initMap() {
35 |         map = new google.maps.Map(document.getElementById('map'), {
36 |           center: {lat: -34.397, lng: 150.644}, //Sydney, Australia
37 |           zoom: 8
38 |         });
39 |       }
40 |     </script>
41 |   </head>
42 |   <body>
43 |     <div id="map"></div>
44 |     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
45 |   </body>
46 | </html>
47 | 


--------------------------------------------------------------------------------
/step2/map.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <!--
 4 | Copyright 2016 Google Inc.
 5 | 
 6 | Licensed under the Apache License, Version 2.0 (the "License");
 7 | you may not use this file except in compliance with the License.
 8 | You may obtain a copy of the License at
 9 | 
10 |     http://www.apache.org/licenses/LICENSE-2.0
11 | 
12 | Unless required by applicable law or agreed to in writing, software
13 | distributed under the License is distributed on an "AS IS" BASIS,
14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | See the License for the specific language governing permissions and
16 | limitations under the License.
17 | -->
18 |   <head>
19 |     <title>Simple Map</title>
20 |     <meta name="viewport" content="initial-scale=1.0">
21 |     <meta charset="utf-8">
22 |     <style>
23 |       html, body {
24 |         height: 100%;
25 |         margin: 0;
26 |         padding: 0;
27 |       }
28 |       #map {
29 |         height: 100%;
30 |       }
31 |     </style>
32 |     <script type="text/javascript">
33 |     let map;
34 | 
35 |     // Map-related functions.
36 | 
37 |     function initMap() {
38 |       map = new google.maps.Map(document.getElementById('map'), {
39 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
40 |         zoom: 12
41 |       });
42 | 
43 |       setUpDrawingTools();
44 |     }
45 | 
46 |     // Add the DrawingManager and set up drawing event handlers.
47 |     function setUpDrawingTools(){
48 |       // Initialize drawing manager
49 |       drawingManager = new google.maps.drawing.DrawingManager({
50 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
51 |         drawingControl: true,
52 |         drawingControlOptions: {
53 |           position: google.maps.ControlPosition.TOP_LEFT,
54 |           drawingModes: [
55 |             google.maps.drawing.OverlayType.CIRCLE,
56 |             google.maps.drawing.OverlayType.POLYGON,
57 |             google.maps.drawing.OverlayType.RECTANGLE
58 |           ]
59 |         },
60 |         circleOptions: {
61 |           fillOpacity: 0
62 |         },
63 |         polygonOptions: {
64 |           fillOpacity: 0
65 |         },
66 |         rectangleOptions: {
67 |           fillOpacity: 0
68 |         }
69 |       });
70 |       drawingManager.setMap(map);
71 | 
72 |       //Handle the drawing events
73 |       google.maps.event.addListener(drawingManager, 'rectanglecomplete', rectangle => {
74 |           // We will add code here in a later step.
75 |       });
76 |       google.maps.event.addListener(drawingManager, 'circlecomplete', circle => {
77 |         // We will add code here in a later step.
78 |       });
79 | 
80 |       google.maps.event.addListener(drawingManager, 'polygoncomplete', polygon => {
81 |         // We will add code here in a later step.
82 |       });
83 | 
84 |     }
85 |     </script>
86 |   </head>
87 |   <body>
88 |     <div id="map"></div>
89 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY&callback=initMap"
90 |     async defer></script>
91 |   </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/step3/map.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the "License");
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an "AS IS" BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     let clientId = 'YOUR_CLIENT_ID';
 35 |     let map;
 36 |     let scopes = 'https://www.googleapis.com/auth/bigquery';
 37 | 
 38 |     // Check if the user is authorized.
 39 |     function authorize(event) {
 40 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 41 |       return false;
 42 |     }
 43 | 
 44 |     // If authorized, load BigQuery API
 45 |     function handleAuthResult(authResult) {
 46 |       if (authResult && !authResult.error) {
 47 |         loadApi();
 48 |         return;
 49 |       }        
 50 |       console.error('Not authorized.')      
 51 |     }
 52 | 
 53 |     // Load BigQuery client API and then initialize the map.
 54 |     function loadApi(){
 55 |       gapi.client.load('bigquery', 'v2').then(
 56 |         () => initMap()
 57 |       );
 58 |     }
 59 | 
 60 |     // Map-related functions.
 61 | 
 62 |     function initMap() {
 63 |       map = new google.maps.Map(document.getElementById('map'), {
 64 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
 65 |         zoom: 12
 66 |       });
 67 |       setUpDrawingTools();
 68 |     }
 69 | 
 70 |     // Add the DrawingManager and set up drawing event handlers.
 71 |     function setUpDrawingTools(){
 72 |       // Initialize drawing manager
 73 |       drawingManager = new google.maps.drawing.DrawingManager({
 74 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
 75 |         drawingControl: true,
 76 |         drawingControlOptions: {
 77 |           position: google.maps.ControlPosition.TOP_LEFT,
 78 |           drawingModes: [
 79 |             google.maps.drawing.OverlayType.CIRCLE,
 80 |             google.maps.drawing.OverlayType.POLYGON,
 81 |             google.maps.drawing.OverlayType.RECTANGLE
 82 |           ]
 83 |         },
 84 |         circleOptions: {
 85 |           fillOpacity: 0
 86 |         },
 87 |         polygonOptions: {
 88 |           fillOpacity: 0
 89 |         },
 90 |         rectangleOptions: {
 91 |           fillOpacity: 0
 92 |         }
 93 |       });
 94 |       drawingManager.setMap(map);
 95 | 
 96 |       //Handle the drawing events
 97 |       drawingManager.addListener('rectanglecomplete', rectangle => {
 98 |           // We will add code here in a later step.
 99 |       });
100 |       drawingManager.addListener('circlecomplete', circle => {
101 |         // We will add code here in a later step.
102 |       });
103 | 
104 |       drawingManager.addListener('polygoncomplete', polygon => {
105 |         // We will add code here in a later step.
106 |       });
107 | 
108 |     }
109 |     </script>
110 |   </head>
111 |   <body>
112 |     <div id="map"></div>
113 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
114 |     async defer></script>
115 |     <script src="https://apis.google.com/js/client.js"></script>
116 |     <script type="text/javascript">
117 |       gapi.load('client:auth', authorize);
118 |     </script>
119 |   </body>
120 | </html>
121 | 


--------------------------------------------------------------------------------
/step4/map.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the 'License');
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an 'AS IS' BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     let clientId = 'YOUR_CLIENT_ID';
 35 |     let scopes = 'https://www.googleapis.com/auth/bigquery';
 36 |     // BigQuery settings. Replace these with your project, dataset and table names.
 37 |     let gcpProjectId = 'YOUR_PROJECT_ID';
 38 |     let bigQueryProjectId = 'bigquery-public-data';
 39 |     let datasetId = 'new_york';
 40 |     let tableName = 'tlc_yellow_trips_2016';
 41 |     
 42 |     let map;
 43 |     let jobCheckTimer;
 44 | 
 45 |     // Check if the user is authorized.
 46 |     function authorize(event) {
 47 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 48 |       return false;
 49 |     }
 50 | 
 51 |     // If authorized, load BigQuery API
 52 |     function handleAuthResult(authResult) {
 53 |       if (authResult && !authResult.error) {
 54 |         loadApi();
 55 |         return;
 56 |       }
 57 |       console.error('Not authorized.')      
 58 |     }
 59 | 
 60 |     // Load BigQuery client API and then initialize the map.
 61 |     function loadApi(){
 62 |       gapi.client.load('bigquery', 'v2').then(
 63 |         function() {
 64 |           initMap();
 65 |         }
 66 |       );
 67 |     }
 68 | 
 69 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 70 |     function sendQuery(queryString){
 71 |       let request = gapi.client.bigquery.jobs.query({
 72 |           'query': queryString,
 73 |           'timeoutMs': 30000,
 74 |           'datasetId': datasetId,
 75 |           'projectId': gcpProjectId,
 76 |           'useLegacySql':false
 77 |       });
 78 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
 79 |     }
 80 | 
 81 |     // Poll a job to see if it has finished executing.
 82 |     function checkJobStatus(jobId){
 83 |       let request = gapi.client.bigquery.jobs.get({
 84 |         'projectId': gcpProjectId,
 85 |         'jobId': jobId
 86 |       });
 87 |       request.execute(response => {
 88 |         if (response.status.errorResult){
 89 |           // Handle any errors
 90 |           console.log(response.status.error);
 91 |           return;
 92 |         }
 93 |         if (response.status.state == 'DONE'){
 94 |           // Get the results
 95 |           clearTimeout(jobCheckTimer);
 96 |           getQueryResults(jobId);
 97 |           return;
 98 |         }
 99 |         // Not finished, check again in a moment
100 |         jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);       
101 |       });
102 |     }
103 | 
104 |     // When a BigQuery job has completed, fetch the results.
105 |     function getQueryResults(jobId){
106 |       let request = gapi.client.bigquery.jobs.getQueryResults({
107 |         'projectId': gcpProjectId,
108 |         'jobId': jobId
109 |       });
110 |       request.execute(response => {
111 |         // Do something with the results
112 |       })
113 |     }
114 | 
115 |     // Map-related functions.
116 | 
117 |     function initMap() {
118 |       map = new google.maps.Map(document.getElementById('map'), {
119 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York
120 |         zoom: 12
121 |       });
122 |       setUpDrawingTools();
123 |     }
124 | 
125 |     // Add the DrawingManager and set up drawing event handlers.
126 |     function setUpDrawingTools(){
127 |       // Initialize drawing manager
128 |       drawingManager = new google.maps.drawing.DrawingManager({
129 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
130 |         drawingControl: true,
131 |         drawingControlOptions: {
132 |           position: google.maps.ControlPosition.TOP_LEFT,
133 |           drawingModes: [
134 |             google.maps.drawing.OverlayType.CIRCLE,
135 |             google.maps.drawing.OverlayType.POLYGON,
136 |             google.maps.drawing.OverlayType.RECTANGLE
137 |           ]
138 |         },
139 |         circleOptions: {
140 |           fillOpacity: 0
141 |         },
142 |         polygonOptions: {
143 |           fillOpacity: 0
144 |         },
145 |         rectangleOptions: {
146 |           fillOpacity: 0
147 |         }
148 |       });
149 |       drawingManager.setMap(map);
150 | 
151 |       // Handle the drawing events.
152 |       drawingManager.addListener('rectanglecomplete', rectangle => rectangleQuery(rectangle.getBounds()));
153 | 
154 |       drawingManager.addListener('circlecomplete', circle => {
155 |         // We will add code here in a later step.
156 |       });
157 | 
158 |       drawingManager.addListener('polygoncomplete', polygon => {
159 |         // We will add code here in a later step.
160 |       });
161 |     }
162 | 
163 |     // Query-related functions.
164 | 
165 |     // Query locations by rectangular area.
166 |     function rectangleQuery(latLngBounds){
167 |       let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
168 |       sendQuery(queryString);
169 |     }
170 | 
171 |     function rectangleSQL(ne, sw){
172 |       let queryString = 'SELECT pickup_latitude, pickup_longitude '
173 |       queryString +=  'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '`'
174 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
175 |       queryString += ' AND pickup_latitude < ' + ne.lat();
176 |       queryString += ' AND pickup_longitude > ' + sw.lng();
177 |       queryString += ' AND pickup_longitude < ' + ne.lng();
178 |       return queryString;
179 |     }
180 |     </script>
181 |   </head>
182 |   <body>
183 |     <div id="map"></div>
184 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
185 |     async defer></script>
186 |     <script src="https://apis.google.com/js/client.js"></script>
187 |     <script type="text/javascript">
188 |       gapi.load('client:auth', authorize);
189 |     </script>
190 |   </body>
191 | </html>
192 | 


--------------------------------------------------------------------------------
/step5/map.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the 'License');
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an 'AS IS' BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     let clientId = 'YOUR_CLIENT_ID';
 35 |     let scopes = 'https://www.googleapis.com/auth/bigquery';
 36 | 
 37 |     // BigQuery settings. Replace these with your project, dataset and table names.
 38 |     let gcpProjectId = 'YOUR_PROJECT_ID';
 39 |     let bigQueryProjectId = 'bigquery-public-data';
 40 |     let datasetId = 'new_york';
 41 |     let tableName = 'tlc_yellow_trips_2016';
 42 |     
 43 |     // Limit the number of records that a query will return.    var recordLimit = 10000;
 44 |     let recordLimit = 10000;
 45 |     let jobCheckTimer;
 46 | 
 47 |     let map;
 48 |     let drawingManager;
 49 |     let heatmap;
 50 | 
 51 |     // Check if the user is authorized.
 52 |     function authorize(event) {
 53 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 54 |       return false;
 55 |     }
 56 | 
 57 |     // If authorized, load BigQuery API
 58 |     function handleAuthResult(authResult) {
 59 |       if (authResult && !authResult.error) {
 60 |         loadApi();
 61 |         return;
 62 |       }
 63 |       console.error('Not authorized.')      
 64 |     }
 65 | 
 66 |     // Load BigQuery client API and then initialize the map.
 67 |     function loadApi(){
 68 |       gapi.client.load('bigquery', 'v2').then(
 69 |         () => initMap()        
 70 |       );
 71 |     }
 72 | 
 73 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 74 |     function sendQuery(queryString){
 75 |       let request = gapi.client.bigquery.jobs.query({
 76 |           'query': queryString,
 77 |           'timeoutMs': 30000,
 78 |           'datasetId': datasetId,
 79 |           'projectId': gcpProjectId,
 80 |           'useLegacySql':false
 81 |       });
 82 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
 83 |     }
 84 | 
 85 |     // Poll a job to see if it has finished executing.
 86 |     function checkJobStatus(jobId){
 87 |       let request = gapi.client.bigquery.jobs.get({
 88 |         'projectId': gcpProjectId,
 89 |         'jobId': jobId
 90 |       });
 91 |       request.execute(response => {
 92 |         if (response.status.errorResult){
 93 |           // Handle any errors
 94 |           console.log(response.status.error);
 95 |           return;
 96 |         }
 97 |         if (response.status.state == 'DONE'){
 98 |           // Get the results
 99 |           clearTimeout(jobCheckTimer);
100 |           getQueryResults(jobId);
101 |           return;
102 |         }
103 |         // Not finished, check again in a moment
104 |         jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);        
105 |       });
106 |     }
107 | 
108 |     // When a BigQuery job has completed, fetch the results.
109 |     function getQueryResults(jobId){
110 |       let request = gapi.client.bigquery.jobs.getQueryResults({
111 |         'projectId': gcpProjectId,
112 |         'jobId': jobId
113 |       });
114 |       request.execute(response => doHeatMap(response.result.rows))
115 |     }
116 | 
117 |     // Map-related functions.
118 | 
119 |     function initMap() {
120 |       map = new google.maps.Map(document.getElementById('map'), {
121 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
122 |         zoom: 12
123 |       });
124 |       setUpDrawingTools();
125 |     }
126 | 
127 |     // Add the DrawingManager and set up drawing event handlers.
128 |     function setUpDrawingTools(){
129 |       // Initialize drawing manager
130 |       drawingManager = new google.maps.drawing.DrawingManager({
131 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
132 |         drawingControl: true,
133 |         drawingControlOptions: {
134 |           position: google.maps.ControlPosition.TOP_LEFT,
135 |           drawingModes: [
136 |             google.maps.drawing.OverlayType.CIRCLE,
137 |             google.maps.drawing.OverlayType.POLYGON,
138 |             google.maps.drawing.OverlayType.RECTANGLE
139 |           ]
140 |         },
141 |         circleOptions: {
142 |           fillOpacity: 0
143 |         },
144 |         polygonOptions: {
145 |           fillOpacity: 0
146 |         },
147 |         rectangleOptions: {
148 |           fillOpacity: 0
149 |         }
150 |       });
151 |       drawingManager.setMap(map);
152 | 
153 |       // Handle the drawing events
154 |       drawingManager.addListener('rectanglecomplete', rectangle => rectangleQuery(rectangle.getBounds()));
155 | 
156 |       drawingManager.addListener('circlecomplete', circle => {
157 |         // We will add code here in a later step.
158 |       });
159 | 
160 |       drawingManager.addListener('polygoncomplete', polygon => {
161 |         // We will add code here in a later step.
162 |       });
163 |     }
164 | 
165 |     // Query-related functions.
166 | 
167 |     // Query locations by rectangular area.
168 |     function rectangleQuery(latLngBounds){
169 |       let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
170 |       sendQuery(queryString);
171 |     }
172 | 
173 |     function rectangleSQL(ne, sw){
174 |       let queryString = 'SELECT pickup_latitude, pickup_longitude '
175 |       queryString +=  'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '`'
176 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
177 |       queryString += ' AND pickup_latitude < ' + ne.lat();
178 |       queryString += ' AND pickup_longitude > ' + sw.lng();
179 |       queryString += ' AND pickup_longitude < ' + ne.lng();
180 |       queryString += ' LIMIT ' + recordLimit;
181 |       return queryString;
182 |     }
183 | 
184 |     // Show query results as a Heatmap.
185 |     function doHeatMap(rows){
186 |       let heatmapData = [];
187 |       if (heatmap!=null){
188 |         heatmap.setMap(null);
189 |       }
190 |       for (let i = 0; i < rows.length; i++) {
191 |           let f = rows[i].f;
192 |           let coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
193 |           let latLng = new google.maps.LatLng(coords);
194 |           heatmapData.push(latLng);
195 |       }
196 |       heatmap = new google.maps.visualization.HeatmapLayer({
197 |           data: heatmapData
198 |       });
199 |       heatmap.setMap(map);
200 |     }
201 |     </script>
202 |   </head>
203 |   <body>
204 |     <div id="map"></div>
205 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
206 |     async defer></script>
207 |     <script src="https://apis.google.com/js/client.js"></script>
208 |     <script type="text/javascript">
209 |       gapi.load('client:auth', authorize);
210 |     </script>
211 |   </body>
212 | </html>
213 | 


--------------------------------------------------------------------------------
/step5/map_legacySql.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the 'License');
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an 'AS IS' BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     var clientId = 'YOUR_CLIENT_ID';
 35 | 
 36 |     // BigQuery settings. Replace these with your project, dataset and table names.
 37 |     var gcpProjectId = 'YOUR_PROJECT_ID';
 38 |     var bigQueryProjectId = 'bigquery-public-data';
 39 |     var datasetId = 'new_york';
 40 |     var tableName = 'tlc_yellow_trips_2016';
 41 |     var scopes = 'https://www.googleapis.com/auth/bigquery';
 42 | 
 43 |     // Limit the number of records that a query will return.    var recordLimit = 10000;
 44 |     var recordLimit = 10000;
 45 |     var jobCheckTimer;
 46 | 
 47 |     var map;
 48 |     var drawingManager;
 49 |     var heatmap;
 50 | 
 51 |     // Check if the user is authorized.
 52 |     function authorize(event) {
 53 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 54 |       return false;
 55 |     }
 56 | 
 57 |     // If authorized, load BigQuery API
 58 |     function handleAuthResult(authResult) {
 59 |       if (authResult && !authResult.error) {
 60 |         loadApi();
 61 |       } else {
 62 |         console.error('Not authorized.')
 63 |       }
 64 |     }
 65 | 
 66 |     // Load BigQuery client API and then initialize the map.
 67 |     function loadApi(){
 68 |       gapi.client.load('bigquery', 'v2').then(
 69 |         function() {
 70 |           initMap();
 71 |         }
 72 |       );
 73 |     }
 74 | 
 75 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 76 |     function sendQuery(queryString){
 77 |       var request = gapi.client.bigquery.jobs.query({
 78 |           'query': queryString,
 79 |           'timeoutMs': 30000,
 80 |           'datasetId': datasetId,
 81 |           'projectId': gcpProjectId,
 82 |           'useLegacySql':true
 83 |       });
 84 |       request.execute(function(response) {
 85 |           checkJobStatus(response.jobReference.jobId);
 86 |       });
 87 |     }
 88 | 
 89 |     // Poll a job to see if it has finished executing.
 90 |     function checkJobStatus(jobId){
 91 |       var request = gapi.client.bigquery.jobs.get({
 92 |         'projectId': gcpProjectId,
 93 |         'jobId': jobId
 94 |       });
 95 |       request.execute(function(response){
 96 |         if (response.status.errorResult){
 97 |           // Handle any errors
 98 |           console.log(response.status.error);
 99 |         } else {
100 |           if (response.status.state == 'DONE'){
101 |             // Get the results
102 |             clearTimeout(jobCheckTimer);
103 |             getQueryResults(jobId);
104 |           } else {
105 |             // Not finished, check again in a moment
106 |             jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);
107 |           }
108 |         }
109 |       });
110 |     }
111 | 
112 |     // When a BigQuery job has completed, fetch the results.
113 |     function getQueryResults(jobId){
114 |       var request = gapi.client.bigquery.jobs.getQueryResults({
115 |         'projectId': gcpProjectId,
116 |         'jobId': jobId
117 |       });
118 |       request.execute(function(response){
119 |         doHeatMap(response.result.rows);
120 |       })
121 |     }
122 | 
123 |     // Map-related functions.
124 | 
125 |     function initMap() {
126 |       map = new google.maps.Map(document.getElementById('map'), {
127 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
128 |         zoom: 12
129 |       });
130 |       setUpDrawingTools();
131 |     }
132 | 
133 |     // Add the DrawingManager and set up drawing event handlers.
134 |     function setUpDrawingTools(){
135 |       // Initialize drawing manager
136 |       drawingManager = new google.maps.drawing.DrawingManager({
137 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
138 |         drawingControl: true,
139 |         drawingControlOptions: {
140 |           position: google.maps.ControlPosition.TOP_LEFT,
141 |           drawingModes: [
142 |             google.maps.drawing.OverlayType.CIRCLE,
143 |             google.maps.drawing.OverlayType.POLYGON,
144 |             google.maps.drawing.OverlayType.RECTANGLE
145 |           ]
146 |         },
147 |         circleOptions: {
148 |           fillOpacity: 0
149 |         },
150 |         polygonOptions: {
151 |           fillOpacity: 0
152 |         },
153 |         rectangleOptions: {
154 |           fillOpacity: 0
155 |         }
156 |       });
157 |       drawingManager.setMap(map);
158 | 
159 |       // Handle the drawing events
160 |       drawingManager.addListener('rectanglecomplete', function (rectangle) {
161 |         rectangleQuery(rectangle.getBounds());
162 |       });
163 | 
164 |       drawingManager.addListener('circlecomplete', function (circle) {
165 |         // We will add code here in a later step.
166 |       });
167 | 
168 |       drawingManager.addListener('polygoncomplete', function (polygon) {
169 |         // We will add code here in a later step.
170 |       });
171 |     }
172 | 
173 |     // Query-related functions.
174 | 
175 |     // Query locations by rectangular area.
176 |     function rectangleQuery(latLngBounds){
177 |       var queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
178 |       sendQuery(queryString);
179 |     }
180 | 
181 |     function rectangleSQL(ne, sw){
182 |       var queryString = 'SELECT pickup_latitude, pickup_longitude '
183 |       queryString +=  'FROM [' + bigQueryProjectId +':' + datasetId + '.' + tableName + ']'
184 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
185 |       queryString += ' AND pickup_latitude < ' + ne.lat();
186 |       queryString += ' AND pickup_longitude > ' + sw.lng();
187 |       queryString += ' AND pickup_longitude < ' + ne.lng();
188 |       queryString += ' LIMIT ' + recordLimit;
189 |       return queryString;
190 |     }
191 | 
192 |     // Show query results as a Heatmap.
193 |     function doHeatMap(rows){
194 |       var heatmapData = [];
195 |       if (heatmap!=null){
196 |         heatmap.setMap(null);
197 |       }
198 |       for (var i = 0; i < rows.length; i++) {
199 |           var f = rows[i].f;
200 |           var coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
201 |           var latLng = new google.maps.LatLng(coords);
202 |           heatmapData.push(latLng);
203 |       }
204 |       heatmap = new google.maps.visualization.HeatmapLayer({
205 |           data: heatmapData
206 |       });
207 |       heatmap.setMap(map);
208 |     }
209 |     </script>
210 |   </head>
211 |   <body>
212 |     <div id="map"></div>
213 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
214 |     async defer></script>
215 |     <script src="https://apis.google.com/js/client.js"></script>
216 |     <script type="text/javascript">
217 |       gapi.load('client:auth', authorize);
218 |     </script>
219 |   </body>
220 | </html>
221 | 


--------------------------------------------------------------------------------
/step6/map.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the "License");
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an "AS IS" BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     let clientId = 'YOUR_CLIENT_ID';
 35 |     let scopes = 'https://www.googleapis.com/auth/bigquery';
 36 | 
 37 |     // BigQuery settings. Replace these with your project, dataset and table names.
 38 |     let gcpProjectId = 'YOUR_PROJECT_ID';
 39 |     let bigQueryProjectId = 'bigquery-public-data';
 40 |     let datasetId = 'new_york';
 41 |     let tableName = 'tlc_yellow_trips_2016';
 42 |     
 43 |     // Limit the number of records that a query will return.
 44 |     let recordLimit = 10000;
 45 |     let jobCheckTimer ;
 46 | 
 47 |     let map;
 48 |     let drawingManager;
 49 |     let heatmap;
 50 | 
 51 |     // Check if the user is authorized.
 52 |     function authorize(event) {
 53 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 54 |       return false;
 55 |     }
 56 | 
 57 |     // If authorized, load BigQuery API
 58 |     function handleAuthResult(authResult) {
 59 |       if (authResult && !authResult.error) {
 60 |         loadApi();
 61 |         return;
 62 |       }
 63 |       console.error('Not authorised.')      
 64 |     }
 65 | 
 66 |     // Load BigQuery client API
 67 |     function loadApi(){
 68 |       gapi.client.load('bigquery', 'v2').then(
 69 |         () => initMap()
 70 |       );
 71 |     }
 72 | 
 73 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 74 |     function sendQuery(queryString){
 75 |       let request = gapi.client.bigquery.jobs.query({
 76 |           'query': queryString,
 77 |           'timeoutMs': 30000,
 78 |           'datasetId': datasetId,
 79 |           'projectId': gcpProjectId,
 80 |           'useLegacySql':false
 81 |       });
 82 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
 83 |     }
 84 | 
 85 |     // Poll a job to see if it has finished executing.
 86 |     function checkJobStatus(jobId){
 87 |       let request = gapi.client.bigquery.jobs.get({
 88 |         'projectId': gcpProjectId,
 89 |         'jobId': jobId
 90 |       });
 91 |       request.execute(response => {
 92 |         if (response.status.errorResult){
 93 |           // Handle any errors.
 94 |           console.log(response.status.error);
 95 |           return;
 96 |         }
 97 |         if (response.status.state == 'DONE'){
 98 |           // Get the results.
 99 |           clearTimeout(jobCheckTimer);
100 |           getQueryResults(jobId);
101 |           return;
102 |         }
103 |         // Not finished, check again in a moment.
104 |         jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);       
105 |       });
106 |     }
107 | 
108 |     // When a BigQuery job has completed, fetch the results.
109 |     function getQueryResults(jobId){
110 |       let request = gapi.client.bigquery.jobs.getQueryResults({
111 |         'projectId': gcpProjectId,
112 |         'jobId': jobId
113 |       });
114 |       request.execute(response => doHeatMap(response.result.rows))
115 |     }
116 | 
117 |     // Map-related functions.
118 | 
119 |     function initMap() {
120 |       map = new google.maps.Map(document.getElementById('map'), {
121 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
122 |         zoom: 12
123 |       });
124 |       setUpDrawingTools();
125 |     }
126 | 
127 |     // Add the DrawingManager and set up drawing event handlers.
128 |     function setUpDrawingTools(){
129 |       // Initialize drawing manager.
130 |       drawingManager = new google.maps.drawing.DrawingManager({
131 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
132 |         drawingControl: true,
133 |         drawingControlOptions: {
134 |           position: google.maps.ControlPosition.TOP_LEFT,
135 |           drawingModes: [
136 |             google.maps.drawing.OverlayType.CIRCLE,
137 |             google.maps.drawing.OverlayType.POLYGON,
138 |             google.maps.drawing.OverlayType.RECTANGLE
139 |           ]
140 |         },
141 |         circleOptions: {
142 |           fillOpacity: 0
143 |         },
144 |         polygonOptions: {
145 |           fillOpacity: 0
146 |         },
147 |         rectangleOptions: {
148 |           fillOpacity: 0
149 |         }
150 |       });
151 |       drawingManager.setMap(map);
152 | 
153 |       // Handle the drawing events.
154 |       drawingManager.addListener('rectanglecomplete', rectangle => rectangleQuery(rectangle.getBounds()));
155 | 
156 |       drawingManager.addListener('circlecomplete', circle => {
157 |         circleQuery(circle);
158 |       });
159 | 
160 |       drawingManager.addListener('polygoncomplete', polygon => {
161 |         // We will add code here in a later step.
162 |       });
163 |     }
164 | 
165 |     // Query-related functions.
166 | 
167 |     // Query locations by rectangular area.
168 |     function rectangleQuery(latLngBounds){
169 |       let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
170 |       sendQuery(queryString);
171 |     }
172 | 
173 |     function rectangleSQL(ne, sw){
174 |       let queryString = 'SELECT pickup_latitude, pickup_longitude '
175 |       queryString +=  'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '`'
176 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
177 |       queryString += ' AND pickup_latitude < ' + ne.lat();
178 |       queryString += ' AND pickup_longitude > ' + sw.lng();
179 |       queryString += ' AND pickup_longitude < ' + ne.lng();
180 |       queryString += ' LIMIT ' + recordLimit;
181 |       return queryString;
182 |     }
183 | 
184 |     // Query an area by point & radius.
185 |     function circleQuery(circle){
186 |       let queryString = haversineSQL(circle.getCenter(), circle.radius);
187 |       sendQuery(queryString);
188 |     }
189 | 
190 |     function haversineSQL(center, radius){
191 |       let queryString;
192 |       let centerLat = center.lat();
193 |       let centerLng = center.lng();
194 |       let kmPerDegree = 111.045;
195 | 
196 |       queryString = 'CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 LANGUAGE js AS ';
197 |       queryString += '""" ';
198 |       queryString += 'return (radians*180)/(22/7);';
199 |       queryString += '"""; ';
200 | 
201 |       queryString += 'CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) RETURNS FLOAT64 LANGUAGE js AS';
202 |       queryString += '""" ';
203 |       queryString += 'return (degrees*(22/7))/180;';
204 |       queryString += '"""; ';
205 | 
206 |       queryString += 'SELECT pickup_latitude, pickup_longitude '
207 |       queryString += 'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '` ';
208 |       queryString += 'WHERE '
209 |       queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
210 |       queryString += centerLat;
211 |       queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
212 |       queryString += ' pickup_longitude ';
213 |       queryString += ') ) + SIN( RADIANS('
214 |       queryString += centerLat;
215 |       queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) ';
216 | 
217 |       queryString += ' < ' + radius/1000;
218 |       queryString += ' LIMIT ' + recordLimit;
219 |       return queryString;
220 |     }
221 | 
222 |     // Show query results as a Heatmap.
223 |     function doHeatMap(rows){
224 |       let heatmapData = [];
225 |       if (heatmap!=null){
226 |         heatmap.setMap(null);
227 |       }
228 |       for (let i = 0; i < rows.length; i++) {
229 |           let f = rows[i].f;
230 |           let coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
231 |           let latLng = new google.maps.LatLng(coords);
232 |           heatmapData.push(latLng);
233 |       }
234 |       heatmap = new google.maps.visualization.HeatmapLayer({
235 |           data: heatmapData
236 |       });
237 |       heatmap.setMap(map);
238 |     }
239 | 
240 |     </script>
241 |   </head>
242 |   <body>
243 |     <div id="map"></div>
244 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
245 |     async defer></script>
246 |     <script src="https://apis.google.com/js/client.js"></script>
247 |     <script type="text/javascript">
248 |       gapi.load('client:auth', authorize);
249 |     </script>
250 |   </body>
251 | </html>
252 | 


--------------------------------------------------------------------------------
/step6/map_legacySql.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the "License");
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an "AS IS" BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     var clientId = 'YOUR_CLIENT_ID';
 35 | 
 36 |     // BigQuery settings. Replace these with your project, dataset and table names.
 37 |     var gcpProjectId = 'YOUR_PROJECT_ID';
 38 |     var bigQueryProjectId = 'bigquery-public-data';
 39 |     var datasetId = 'new_york';
 40 |     var tableName = 'tlc_yellow_trips_2016';
 41 |     var scopes = 'https://www.googleapis.com/auth/bigquery';
 42 | 
 43 |     // Limit the number of records that a query will return.
 44 |     var recordLimit = 10000;
 45 |     var jobCheckTimer ;
 46 | 
 47 |     var map;
 48 |     var drawingManager;
 49 |     var heatmap;
 50 | 
 51 |     // Check if the user is authorized.
 52 |     function authorize(event) {
 53 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 54 |       return false;
 55 |     }
 56 | 
 57 |     // If authorized, load BigQuery API
 58 |     function handleAuthResult(authResult) {
 59 |       if (authResult && !authResult.error) {
 60 |         loadApi();
 61 |       } else {
 62 |         console.error('Not authorised.')
 63 |       }
 64 |     }
 65 | 
 66 |     // Load BigQuery client API
 67 |     function loadApi(){
 68 |       gapi.client.load('bigquery', 'v2').then(
 69 |         function() {
 70 |           initMap();
 71 |         }
 72 |       );
 73 |     }
 74 | 
 75 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 76 |     function sendQuery(queryString){
 77 |       var request = gapi.client.bigquery.jobs.query({
 78 |           'query': queryString,
 79 |           'timeoutMs': 30000,
 80 |           'datasetId': datasetId,
 81 |           'projectId': gcpProjectId,
 82 |           'useLegacySql': true
 83 |       });
 84 |       request.execute(function(response) {
 85 |           checkJobStatus(response.jobReference.jobId);
 86 |       });
 87 |     }
 88 | 
 89 |     // Poll a job to see if it has finished executing.
 90 |     function checkJobStatus(jobId){
 91 |       var request = gapi.client.bigquery.jobs.get({
 92 |         'projectId': gcpProjectId,
 93 |         'jobId': jobId
 94 |       });
 95 |       request.execute(function(response){
 96 |         if (response.status.errorResult){
 97 |           // Handle any errors.
 98 |           console.log(response.status.error);
 99 |         } else {
100 |           if (response.status.state == 'DONE'){
101 |             // Get the results.
102 |             clearTimeout(jobCheckTimer);
103 |             getQueryResults(jobId);
104 |           } else {
105 |             // Not finished, check again in a moment.
106 |             jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);
107 |           }
108 |         }
109 |       });
110 |     }
111 | 
112 |     // When a BigQuery job has completed, fetch the results.
113 |     function getQueryResults(jobId){
114 |       var request = gapi.client.bigquery.jobs.getQueryResults({
115 |         'projectId': gcpProjectId,
116 |         'jobId': jobId
117 |       });
118 |       request.execute(function(response){
119 |         doHeatMap(response.result.rows);
120 |       })
121 |     }
122 | 
123 |     // Map-related functions.
124 | 
125 |     function initMap() {
126 |       map = new google.maps.Map(document.getElementById('map'), {
127 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
128 |         zoom: 12
129 |       });
130 |       setUpDrawingTools();
131 |     }
132 | 
133 |     // Add the DrawingManager and set up drawing event handlers.
134 |     function setUpDrawingTools(){
135 |       // Initialize drawing manager.
136 |       drawingManager = new google.maps.drawing.DrawingManager({
137 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
138 |         drawingControl: true,
139 |         drawingControlOptions: {
140 |           position: google.maps.ControlPosition.TOP_LEFT,
141 |           drawingModes: [
142 |             google.maps.drawing.OverlayType.CIRCLE,
143 |             google.maps.drawing.OverlayType.POLYGON,
144 |             google.maps.drawing.OverlayType.RECTANGLE
145 |           ]
146 |         },
147 |         circleOptions: {
148 |           fillOpacity: 0
149 |         },
150 |         polygonOptions: {
151 |           fillOpacity: 0
152 |         },
153 |         rectangleOptions: {
154 |           fillOpacity: 0
155 |         }
156 |       });
157 |       drawingManager.setMap(map);
158 | 
159 |       // Handle the drawing events.
160 |       drawingManager.addListener('rectanglecomplete', function (rectangle) {
161 |         rectangleQuery(rectangle.getBounds());
162 |       });
163 | 
164 |       drawingManager.addListener('circlecomplete', function (circle) {
165 |         circleQuery(circle);
166 |       });
167 | 
168 |       drawingManager.addListener('polygoncomplete', function (polygon) {
169 |         // We will add code here in a later step.
170 |       });
171 |     }
172 | 
173 |     // Query-related functions.
174 | 
175 |     // Query locations by rectangular area.
176 |     function rectangleQuery(latLngBounds){
177 |       var queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
178 |       sendQuery(queryString);
179 |     }
180 | 
181 |     function rectangleSQL(ne, sw){
182 |       var queryString = 'SELECT pickup_latitude, pickup_longitude '
183 |       queryString +=  'FROM [' + bigQueryProjectId +':' + datasetId + '.' + tableName + ']'
184 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
185 |       queryString += ' AND pickup_latitude < ' + ne.lat();
186 |       queryString += ' AND pickup_longitude > ' + sw.lng();
187 |       queryString += ' AND pickup_longitude < ' + ne.lng();
188 |       queryString += ' LIMIT ' + recordLimit;
189 |       return queryString;
190 |     }
191 | 
192 |     // Query an area by point & radius.
193 |     function circleQuery(circle){
194 |       var queryString = haversineSQL(circle.getCenter(), circle.radius);
195 |       sendQuery(queryString);
196 |     }
197 | 
198 |     function haversineSQL(center, radius){
199 |       var queryString;
200 |       var centerLat = center.lat();
201 |       var centerLng = center.lng();
202 |       var kmPerDegree = 111.045;
203 | 
204 |       queryString = 'SELECT pickup_latitude, pickup_longitude, '
205 |       queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
206 |       queryString += centerLat;
207 |       queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
208 |       queryString += ' pickup_longitude ';
209 |       queryString += ') ) + SIN( RADIANS('
210 |       queryString += centerLat;
211 |       queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) AS distance ';
212 |       queryString += 'FROM [' + bigQueryProjectId +':' + datasetId + '.' + tableName + '] ';
213 |       queryString += 'HAVING distance < ' + radius/1000;
214 |       queryString += ' LIMIT ' + recordLimit;
215 |       return queryString;
216 |     }
217 | 
218 |     // Show query results as a Heatmap.
219 |     function doHeatMap(rows){
220 |       var heatmapData = [];
221 |       if (heatmap!=null){
222 |         heatmap.setMap(null);
223 |       }
224 |       for (var i = 0; i < rows.length; i++) {
225 |           var f = rows[i].f;
226 |           var coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
227 |           var latLng = new google.maps.LatLng(coords);
228 |           heatmapData.push(latLng);
229 |       }
230 |       heatmap = new google.maps.visualization.HeatmapLayer({
231 |           data: heatmapData
232 |       });
233 |       heatmap.setMap(map);
234 |     }
235 | 
236 |     </script>
237 |   </head>
238 |   <body>
239 |     <div id="map"></div>
240 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
241 |     async defer></script>
242 |     <script src="https://apis.google.com/js/client.js"></script>
243 |     <script type="text/javascript">
244 |       gapi.load('client:auth', authorize);
245 |     </script>
246 |   </body>
247 | </html>
248 | 


--------------------------------------------------------------------------------
/step7/map.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the "License");
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an "AS IS" BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     let clientId = 'YOUR_CLIENT_ID';
 35 |     let scopes = 'https://www.googleapis.com/auth/bigquery';
 36 | 
 37 |     // BigQuery settings. Replace these with your project, dataset and table names.
 38 |     let gcpProjectId = 'YOUR_PROJECT_ID';
 39 |     let bigQueryProjectId = 'bigquery-public-data';
 40 |     let datasetId = 'new_york';
 41 |     let tableName = 'tlc_yellow_trips_2016';
 42 |     
 43 |     // Limit the number of records that a query will return.
 44 |     let recordLimit = 10000;
 45 |     let jobCheckTimer ;
 46 | 
 47 |     let map;
 48 |     let drawingManager;
 49 |     let heatmap;
 50 | 
 51 |     // Check if the user is authorized.
 52 |     function authorize(event) {
 53 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 54 |       return false;
 55 |     }
 56 | 
 57 |     // If authorized, load BigQuery API.
 58 |     function handleAuthResult(authResult) {
 59 |       if (authResult && !authResult.error) {
 60 |         loadApi();
 61 |         return;
 62 |       }
 63 |       console.error('Not authorized.')
 64 |     }
 65 | 
 66 |     // Load BigQuery client API and then initialize the map.
 67 |     function loadApi(){
 68 |       gapi.client.load('bigquery', 'v2').then(
 69 |         () => initMap()
 70 |       );
 71 |     }
 72 | 
 73 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 74 |     function sendQuery(queryString){
 75 |       let request = gapi.client.bigquery.jobs.query({
 76 |           'query': queryString,
 77 |           'timeoutMs': 30000,
 78 |           'datasetId': datasetId,
 79 |           'projectId': gcpProjectId,
 80 |           'useLegacySql':false
 81 |       });
 82 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
 83 |     }
 84 | 
 85 |     // Poll a job to see if it has finished executing.
 86 |     function checkJobStatus(jobId){
 87 |       let request = gapi.client.bigquery.jobs.get({
 88 |         'projectId': gcpProjectId,
 89 |         'jobId': jobId
 90 |       });
 91 |       request.execute(response => {
 92 |         if (response.status.errorResult){
 93 |           // Handle any errors.
 94 |           console.log(response.status.error);
 95 |           return;
 96 |         }
 97 |         if (response.status.state == 'DONE'){
 98 |           // Get the results.
 99 |           clearTimeout(jobCheckTimer);
100 |           getQueryResults(jobId);
101 |           return;
102 |         }
103 |         // Not finished, check again in a moment.
104 |         jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);       
105 |       });
106 |     }
107 | 
108 |     // When a BigQuery job has completed, fetch the results.
109 |     function getQueryResults(jobId){
110 |       let request = gapi.client.bigquery.jobs.getQueryResults({
111 |         'projectId': gcpProjectId,
112 |         'jobId': jobId
113 |       });
114 |       request.execute(response => doHeatMap(response.result.rows))
115 |     }
116 | 
117 |     // Map-related functions.
118 | 
119 |     function initMap() {
120 |       map = new google.maps.Map(document.getElementById('map'), {
121 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
122 |         zoom: 12
123 |       });
124 |       setUpDrawingTools();
125 |     }
126 | 
127 |     // Add the DrawingManager and set up drawing event handlers.
128 |     function setUpDrawingTools(){
129 |       // Initialize drawing manager.
130 |       drawingManager = new google.maps.drawing.DrawingManager({
131 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
132 |         drawingControl: true,
133 |         drawingControlOptions: {
134 |           position: google.maps.ControlPosition.TOP_LEFT,
135 |           drawingModes: [
136 |             google.maps.drawing.OverlayType.CIRCLE,
137 |             google.maps.drawing.OverlayType.POLYGON,
138 |             google.maps.drawing.OverlayType.RECTANGLE
139 |           ]
140 |         },
141 |         circleOptions: {
142 |           fillOpacity: 0
143 |         },
144 |         polygonOptions: {
145 |           fillOpacity: 0
146 |         },
147 |         rectangleOptions: {
148 |           fillOpacity: 0
149 |         }
150 |       });
151 |       drawingManager.setMap(map);
152 | 
153 |       // Handle the drawing events.
154 |       drawingManager.addListener('rectanglecomplete', rectangle => rectangleQuery(rectangle.getBounds()));
155 | 
156 |       drawingManager.addListener('circlecomplete', circle => circleQuery(circle));
157 | 
158 |       drawingManager.addListener('polygoncomplete', polygon => {
159 |         let path = polygon.getPath().getArray();
160 |         let queryPolygon = path.map(element => {
161 |           return [element.lng(), element.lat()];
162 |         });
163 |         polygonQuery(queryPolygon);
164 |       });
165 |     }
166 | 
167 |     // Query-related functions.
168 | 
169 |     // Query locations by rectangular area.
170 |     function rectangleQuery(latLngBounds){
171 |       let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
172 |       sendQuery(queryString);
173 |     }
174 | 
175 |     function rectangleSQL(ne, sw){
176 |       let queryString = 'SELECT pickup_latitude, pickup_longitude '
177 |       queryString +=  'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '`'
178 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
179 |       queryString += ' AND pickup_latitude < ' + ne.lat();
180 |       queryString += ' AND pickup_longitude > ' + sw.lng();
181 |       queryString += ' AND pickup_longitude < ' + ne.lng();
182 |       queryString += ' LIMIT ' + recordLimit;
183 |       return queryString;
184 |     }
185 | 
186 |     // Query an area by point & radius.
187 |     function circleQuery(circle){
188 |       let queryString = haversineSQL(circle.getCenter(), circle.radius);
189 |       sendQuery(queryString);
190 |     }
191 | 
192 |     // Calculate a circular area on the surface of a sphere based on a center and radius.
193 |     function haversineSQL(center, radius){
194 |       let queryString;
195 |       let centerLat = center.lat();
196 |       let centerLng = center.lng();
197 |       let kmPerDegree = 111.045;
198 | 
199 |       queryString = 'CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 LANGUAGE js AS ';
200 |       queryString += '""" ';
201 |       queryString += 'return (radians*180)/(22/7);';
202 |       queryString += '"""; ';
203 | 
204 |       queryString += 'CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) RETURNS FLOAT64 LANGUAGE js AS';
205 |       queryString += '""" ';
206 |       queryString += 'return (degrees*(22/7))/180;';
207 |       queryString += '"""; ';
208 | 
209 |       queryString += 'SELECT pickup_latitude, pickup_longitude '
210 |       queryString += 'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '` ';
211 |       queryString += 'WHERE '
212 |       queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
213 |       queryString += centerLat;
214 |       queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
215 |       queryString += ' pickup_longitude ';
216 |       queryString += ') ) + SIN( RADIANS('
217 |       queryString += centerLat;
218 |       queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) ';
219 | 
220 |       queryString += ' < ' + radius/1000;
221 |       queryString += ' LIMIT ' + recordLimit;
222 |       return queryString;
223 |     }
224 | 
225 |     // Query an arbitrary shape drawn by the user.
226 |     function polygonQuery(polygon) {
227 |      let request = gapi.client.bigquery.jobs.insert({
228 |         'projectId' : gcpProjectId,
229 |         'resource' : {
230 |           'configuration':
231 |           {
232 |             'query':
233 |             {
234 |               'query': polygonSQL(polygon),
235 |               'useLegacySql': false
236 |             }
237 |           }
238 |         }
239 |       });
240 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
241 |     }
242 | 
243 |     //Build a BigQuery User Defined Function based SQL Query
244 |     //This uses Standard SQL - see map_legacySql.html for a version that uses BigQuery Legacy SQL
245 |     function polygonSQL(poly){
246 |       let queryString = 'CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64) ';
247 |       queryString += 'RETURNS BOOL LANGUAGE js AS """ ';
248 |       queryString += 'var polygon=' + JSON.stringify(poly) + ';';
249 |       queryString += 'var vertx = [];';
250 |       queryString += 'var verty = [];';
251 |       queryString += 'var nvert = 0;';
252 |       queryString += 'var testx = longitude;';
253 |       queryString += 'var testy = latitude;';
254 |       queryString += 'for(coord in polygon){';
255 |       queryString += '  vertx[nvert] = polygon[coord][0];';
256 |       queryString += '  verty[nvert] = polygon[coord][1];';
257 |       queryString += '  nvert ++;';
258 |       queryString += '}';
259 |       queryString += 'var i, j, c = 0;';
260 |       queryString += 'for (i = 0, j = nvert-1; i < nvert; j = i++) {';
261 |       queryString += '  if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){';
262 |       queryString += '    c = !c;';
263 |       queryString += '  }';
264 |       queryString += '}';
265 |       queryString += 'return c;';
266 |       queryString += '"""; ';
267 |       queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime ';
268 |       queryString += 'FROM `' + bigQueryProjectId + '.' + datasetId + '.' + tableName + '` ';
269 |       queryString += 'WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE ';
270 |       queryString += 'LIMIT ' + recordLimit;
271 |       return queryString;
272 |     }
273 | 
274 |     // Show query results as a Heatmap.
275 |     function doHeatMap(rows){
276 |       let heatmapData = [];
277 |       if (heatmap!=null){
278 |         heatmap.setMap(null);
279 |       }
280 |       for (let i = 0; i < rows.length; i++) {
281 |           let f = rows[i].f;
282 |           let coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
283 |           let latLng = new google.maps.LatLng(coords);
284 |           heatmapData.push(latLng);
285 |       }
286 |       heatmap = new google.maps.visualization.HeatmapLayer({
287 |           data: heatmapData
288 |       });
289 |       heatmap.setMap(map);
290 |     }
291 |     </script>
292 |   </head>
293 |   <body>
294 |     <div id="map"></div>
295 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
296 |     async defer></script>
297 |     <script src="https://apis.google.com/js/client.js"></script>
298 |     <script type="text/javascript">
299 |       gapi.load('client:auth', authorize);
300 |     </script>
301 |   </body>
302 | </html>
303 | 


--------------------------------------------------------------------------------
/step7/map_legacySql.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the "License");
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an "AS IS" BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 |     </style>
 32 |     <script type="text/javascript">
 33 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 34 |     var clientId = 'YOUR_CLIENT_ID';
 35 | 
 36 |     // BigQuery settings. Replace these with your project, dataset and table names.
 37 |     var gcpProjectId = 'YOUR_PROJECT_ID';
 38 |     var bigQueryProjectId = 'bigquery-public-data';
 39 |     var datasetId = 'new_york';
 40 |     var tableName = 'tlc_yellow_trips_2016';
 41 |     var scopes = 'https://www.googleapis.com/auth/bigquery';
 42 | 
 43 |     // Limit the number of records that a query will return.
 44 |     var recordLimit = 10000;
 45 |     var jobCheckTimer;
 46 | 
 47 |     var map;
 48 |     var drawingManager;
 49 |     var heatmap;
 50 | 
 51 |     // The BigQuery User Defined Function definition.
 52 |     var bigqueryDefine = 'bigquery.defineFunction(' +
 53 |       '"pointInPolygon", ' +
 54 |       '["pickup_latitude", "pickup_longitude", "pickup_datetime"],' +
 55 |       '[' +
 56 |         '{name: "latitude", type: "float"},' +
 57 |         '{name: "longitude", type: "float"},' +
 58 |         '{name:"pickup_datetime", type:"string"}' +
 59 |       '], inPoly); ';
 60 | 
 61 |     // Check if the user is authorized.
 62 |     function authorize(event) {
 63 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 64 |       return false;
 65 |     }
 66 | 
 67 |     // If authorized, load BigQuery API.
 68 |     function handleAuthResult(authResult) {
 69 |       if (authResult && !authResult.error) {
 70 |         loadApi();
 71 |       } else {
 72 |         console.error('Not authorized.')
 73 |       }
 74 |     }
 75 | 
 76 |     // Load BigQuery client API and then initialize the map.
 77 |     function loadApi(){
 78 |       gapi.client.load('bigquery', 'v2').then(
 79 |         function() {
 80 |           initMap();
 81 |         }
 82 |       );
 83 |     }
 84 | 
 85 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 86 |     function sendQuery(queryString){
 87 |       var request = gapi.client.bigquery.jobs.query({
 88 |           'query': queryString,
 89 |           'timeoutMs': 30000,
 90 |           'datasetId': datasetId,
 91 |           'projectId': gcpProjectId,
 92 |           'useLegacySql':true
 93 |       });
 94 |       request.execute(function(response) {
 95 |           checkJobStatus(response.jobReference.jobId);
 96 |       });
 97 |     }
 98 | 
 99 |     // Poll a job to see if it has finished executing.
100 |     function checkJobStatus(jobId){
101 |       var request = gapi.client.bigquery.jobs.get({
102 |         'projectId': gcpProjectId,
103 |         'jobId': jobId
104 |       });
105 |       request.execute(function(response){
106 |         if (response.status.errorResult){
107 |           // Handle any errors.
108 |           console.log(response.status.error);
109 |         } else {
110 |           if (response.status.state == 'DONE'){
111 |             // Get the results.
112 |             clearTimeout(jobCheckTimer);
113 |             getQueryResults(jobId);
114 |           } else {
115 |             // Not finished, check again in a moment.
116 |             jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);
117 |           }
118 |         }
119 |       });
120 |     }
121 | 
122 |     // When a BigQuery job has completed, fetch the results.
123 |     function getQueryResults(jobId){
124 |       var request = gapi.client.bigquery.jobs.getQueryResults({
125 |         'projectId': gcpProjectId,
126 |         'jobId': jobId
127 |       });
128 |       request.execute(function(response){
129 |         doHeatMap(response.result.rows);
130 |       })
131 |     }
132 | 
133 |     // Map-related functions.
134 | 
135 |     function initMap() {
136 |       map = new google.maps.Map(document.getElementById('map'), {
137 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
138 |         zoom: 12
139 |       });
140 |       setUpDrawingTools();
141 |     }
142 | 
143 |     // Add the DrawingManager and set up drawing event handlers.
144 |     function setUpDrawingTools(){
145 |       // Initialize drawing manager.
146 |       drawingManager = new google.maps.drawing.DrawingManager({
147 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
148 |         drawingControl: true,
149 |         drawingControlOptions: {
150 |           position: google.maps.ControlPosition.TOP_LEFT,
151 |           drawingModes: [
152 |             google.maps.drawing.OverlayType.CIRCLE,
153 |             google.maps.drawing.OverlayType.POLYGON,
154 |             google.maps.drawing.OverlayType.RECTANGLE
155 |           ]
156 |         },
157 |         circleOptions: {
158 |           fillOpacity: 0
159 |         },
160 |         polygonOptions: {
161 |           fillOpacity: 0
162 |         },
163 |         rectangleOptions: {
164 |           fillOpacity: 0
165 |         }
166 |       });
167 |       drawingManager.setMap(map);
168 | 
169 |       // Handle the drawing events.
170 |       drawingManager.addListener('rectanglecomplete', function (rectangle) {
171 |         rectangleQuery(rectangle.getBounds());
172 |       });
173 | 
174 |       drawingManager.addListener('circlecomplete', function (circle) {
175 |         circleQuery(circle);
176 |       });
177 | 
178 |       drawingManager.addListener('polygoncomplete', function (polygon) {
179 |         var path = polygon.getPaths().getAt(0);
180 |         var queryPolygon = path.map(function(element) {
181 |           return [element.lng(), element.lat()];
182 |         });
183 |         polygonQuery(queryPolygon);
184 |       });
185 |     }
186 | 
187 |     // Query-related functions.
188 | 
189 |     // Query locations by rectangular area.
190 |     function rectangleQuery(latLngBounds){
191 |       var queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
192 |       sendQuery(queryString);
193 |     }
194 | 
195 |     function rectangleSQL(ne, sw){
196 |       var queryString = 'SELECT pickup_latitude, pickup_longitude '
197 |       queryString +=  'FROM [' + bigQueryProjectId +':' + datasetId + '.' + tableName + ']'
198 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
199 |       queryString += ' AND pickup_latitude < ' + ne.lat();
200 |       queryString += ' AND pickup_longitude > ' + sw.lng();
201 |       queryString += ' AND pickup_longitude < ' + ne.lng();
202 |       queryString += ' LIMIT ' + recordLimit;
203 |       return queryString;
204 |     }
205 | 
206 |     // Query an area by point & radius.
207 |     function circleQuery(circle){
208 |       var queryString = haversineSQL(circle.getCenter(), circle.radius);
209 |       sendQuery(queryString);
210 |     }
211 | 
212 |     // Calculate a circular area on the surface of a sphere based on a center and radius.
213 |     function haversineSQL(center, radius){
214 |       var queryString;
215 |       var centerLat = center.lat();
216 |       var centerLng = center.lng();
217 |       var kmPerDegree = 111.045;
218 | 
219 |       queryString = 'SELECT pickup_latitude, pickup_longitude, '
220 |       queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
221 |       queryString += centerLat;
222 |       queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
223 |       queryString += ' pickup_longitude ';
224 |       queryString += ') ) + SIN( RADIANS('
225 |       queryString += centerLat;
226 |       queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) AS distance ';
227 |       queryString += 'FROM [' + bigQueryProjectId +':' + datasetId + '.' + tableName + '] ';
228 |       queryString += 'HAVING distance < ' + radius/1000;
229 |       queryString += ' LIMIT ' + recordLimit;
230 |       return queryString;
231 |     }
232 | 
233 |     // Query an arbitrary shape drawn by the user.
234 |     function polygonQuery(polygon) {
235 |      var request = gapi.client.bigquery.jobs.insert({
236 |         'projectId' : gcpProjectId,
237 |         'resource' : {
238 |           'configuration':
239 |           {
240 |             'query':
241 |             {
242 |               'userDefinedFunctionResources':
243 |               [
244 |                 {
245 |                   'inlineCode': buildUDF(polygon)
246 |                 }
247 |               ],
248 |               'query': polygonSQL()
249 |             }
250 |           }
251 |         }
252 |       });
253 |       request.execute(function(response) {
254 |           checkJobStatus(response.jobReference.jobId);
255 |       });
256 |     }
257 | 
258 |     // Construct a User Defined Function for BigQuery.
259 |     function buildUDF(poly){
260 |       // JavaScript function for point in polygon is loaded from external script third_party/point_in_polygon.js.
261 |       var UDFjs = bigqueryDefine + inLineJs;
262 |       UDFjs += 'function inPoly(row, emit){var poly=' + JSON.stringify(poly);
263 |       UDFjs += ';var pt = [row.pickup_longitude,row.pickup_latitude];';
264 |       UDFjs += 'var result = pointInPoly(poly, pt);if(result) emit({latitude: pt[1], longitude: pt[0]});}'
265 |       return UDFjs;
266 |     }
267 | 
268 |     function polygonSQL(){
269 |       var queryString = 'SELECT latitude,longitude ';
270 |       queryString += 'FROM pointInPolygon(';
271 |       queryString += '  SELECT pickup_longitude, pickup_latitude, pickup_datetime ';
272 |       queryString += '  FROM [' + bigQueryProjectId + ':' + datasetId + '.' + tableName + '] ) ';
273 |       return queryString;
274 |     }
275 | 
276 |     // Show query results as a Heatmap.
277 |     function doHeatMap(rows){
278 |       var heatmapData = [];
279 |       if (heatmap!=null){
280 |         heatmap.setMap(null);
281 |       }
282 |       for (var i = 0; i < rows.length; i++) {
283 |           var f = rows[i].f;
284 |           var coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
285 |           var latLng = new google.maps.LatLng(coords);
286 |           heatmapData.push(latLng);
287 |       }
288 |       heatmap = new google.maps.visualization.HeatmapLayer({
289 |           data: heatmapData
290 |       });
291 |       heatmap.setMap(map);
292 |     }
293 |     </script>
294 |   </head>
295 |   <body>
296 |     <div id="map"></div>
297 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
298 |     async defer></script>
299 |     <script src="https://apis.google.com/js/client.js"></script>
300 |     <script src="../third_party/point_in_polygon.js"></script>
301 |     <script type="text/javascript">
302 |       gapi.load('client:auth', authorize);
303 |     </script>
304 |   </body>
305 | </html>
306 | 


--------------------------------------------------------------------------------
/step8/map.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <!--
  4 | Copyright 2016 Google Inc.
  5 | 
  6 | Licensed under the Apache License, Version 2.0 (the "License");
  7 | you may not use this file except in compliance with the License.
  8 | You may obtain a copy of the License at
  9 | 
 10 |     http://www.apache.org/licenses/LICENSE-2.0
 11 | 
 12 | Unless required by applicable law or agreed to in writing, software
 13 | distributed under the License is distributed on an "AS IS" BASIS,
 14 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 15 | See the License for the specific language governing permissions and
 16 | limitations under the License.
 17 | -->
 18 |   <head>
 19 |     <title>Simple Map</title>
 20 |     <meta name="viewport" content="initial-scale=1.0">
 21 |     <meta charset="utf-8">
 22 |     <style>
 23 |       html, body {
 24 |         height: 100%;
 25 |         margin: 0;
 26 |         padding: 0;
 27 |       }
 28 |       #map {
 29 |         height: 100%;
 30 |       }
 31 | 
 32 |       #menu {
 33 |         position: absolute;
 34 |         background: rgba(255, 255, 255, 0.8);
 35 |         z-index: 1000;
 36 |         top: 50px;
 37 |         left: 10px;
 38 |         padding: 15px;
 39 |       }
 40 |       #menu h1 {
 41 |         margin: 0 0 10px 0;
 42 |         font-size: 1.75em;
 43 |       }
 44 |       #menu div {
 45 |         margin: 5px 0px;
 46 |       }
 47 |       #spinner {
 48 |           position: absolute;
 49 |           top: 50%;
 50 |           left: 50%;
 51 |           margin-left: -32px;
 52 |           margin-top: -32px;
 53 |           opacity: 0;
 54 |           z-index: -1000;
 55 |       }
 56 |     </style>
 57 |     <script type="text/javascript">
 58 |     // Client ID for OAuth 2.0 authorization against BigQuery.
 59 |     let clientId = 'YOUR_CLIENT_ID';
 60 |     let scopes = 'https://www.googleapis.com/auth/bigquery';
 61 | 
 62 |     // BigQuery settings. Replace these with your project, dataset and table names.
 63 |     let gcpProjectId = 'YOUR_PROJECT_ID';
 64 |     let bigQueryProjectId = 'bigquery-public-data';
 65 |     let datasetId = 'new_york';
 66 |     let tableName = 'tlc_yellow_trips_2016';
 67 |     
 68 |     // Limit the number of records that a query will return.
 69 |     let recordLimit = 10000;
 70 |     let jobCheckTimer ;
 71 | 
 72 |     let map;
 73 |     let drawingManager;
 74 |     let heatmap;
 75 | 
 76 |     // Check if the user is authorized.
 77 |     function authorize(event) {
 78 |       gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
 79 |       return false;
 80 |     }
 81 | 
 82 |     // If authorized, load BigQuery API.
 83 |     function handleAuthResult(authResult) {
 84 |       if (authResult && !authResult.error) {
 85 |         loadApi();
 86 |       } else {
 87 |         console.error('Not authorized.')
 88 |       }
 89 |     }
 90 | 
 91 |     // Load BigQuery client API and then initialize the map.
 92 |     function loadApi(){
 93 |       gapi.client.load('bigquery', 'v2').then(
 94 |         () => initMap()
 95 |       );
 96 |     }
 97 | 
 98 |     // Send a query to BigQuery using the Google Client API for JavaScript.
 99 |     function sendQuery(queryString){
100 |       let request = gapi.client.bigquery.jobs.query({
101 |           'query': queryString,
102 |           'timeoutMs': 30000,
103 |           'datasetId': datasetId,
104 |           'projectId': gcpProjectId,
105 |           'useLegacySql':false
106 |       });
107 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
108 |     }
109 | 
110 |     // Poll a job to see if it has finished executing.
111 |     function checkJobStatus(jobId){
112 |       let request = gapi.client.bigquery.jobs.get({
113 |         'projectId': gcpProjectId,
114 |         'jobId': jobId
115 |       });
116 |       request.execute(response => {
117 |         //Show progress to the user
118 |         updateStatus(response);
119 | 
120 |         if (response.status.errorResult){
121 |           // Handle any errors.
122 |           console.log(response.status.error);
123 |           return;
124 |         }
125 |         if (response.status.state == 'DONE'){
126 |           // Get the results.
127 |           clearTimeout(jobCheckTimer);
128 |           getQueryResults(jobId);
129 |           return;
130 |         }
131 |         // Not finished, check again in a moment.
132 |         jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);       
133 |       });
134 |     }
135 | 
136 |     // When a BigQuery job has completed, fetch the results.
137 |     function getQueryResults(jobId){
138 |       let request = gapi.client.bigquery.jobs.getQueryResults({
139 |         'projectId': gcpProjectId,
140 |         'jobId': jobId
141 |       });
142 |       request.execute(response => {
143 |         doHeatMap(response.result.rows);
144 |         //hide the animation.
145 |         fadeToggle(document.getElementById('spinner'));
146 |         updateStatus(response);
147 |       })
148 |     }
149 | 
150 |     // Map-related functions.
151 | 
152 |     function initMap() {
153 |       map = new google.maps.Map(document.getElementById('map'), {
154 |         center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
155 |         zoom: 12,
156 |         styles:
157 |           [
158 |             {
159 |               "elementType": "geometry",
160 |               "stylers": [
161 |                 {
162 |                   "color": "#f5f5f5"
163 |                 }
164 |               ]
165 |             },
166 |             {
167 |               "elementType": "labels.icon",
168 |               "stylers": [
169 |                 {
170 |                   "visibility": "on"
171 |                 }
172 |               ]
173 |             },
174 |             {
175 |               "elementType": "labels.text.fill",
176 |               "stylers": [
177 |                 {
178 |                   "color": "#616161"
179 |                 }
180 |               ]
181 |             },
182 |             {
183 |               "elementType": "labels.text.stroke",
184 |               "stylers": [
185 |                 {
186 |                   "color": "#f5f5f5"
187 |                 }
188 |               ]
189 |             },
190 |             {
191 |               "featureType": "administrative.land_parcel",
192 |               "elementType": "labels.text.fill",
193 |               "stylers": [
194 |                 {
195 |                   "color": "#bdbdbd"
196 |                 }
197 |               ]
198 |             },
199 |             {
200 |               "featureType": "poi",
201 |               "elementType": "geometry",
202 |               "stylers": [
203 |                 {
204 |                   "color": "#eeeeee"
205 |                 }
206 |               ]
207 |             },
208 |             {
209 |               "featureType": "poi",
210 |               "elementType": "labels.text.fill",
211 |               "stylers": [
212 |                 {
213 |                   "color": "#757575"
214 |                 }
215 |               ]
216 |             },
217 |             {
218 |               "featureType": "poi.park",
219 |               "elementType": "geometry",
220 |               "stylers": [
221 |                 {
222 |                   "color": "#e5e5e5"
223 |                 }
224 |               ]
225 |             },
226 |             {
227 |               "featureType": "poi.park",
228 |               "elementType": "labels.text.fill",
229 |               "stylers": [
230 |                 {
231 |                   "color": "#9e9e9e"
232 |                 }
233 |               ]
234 |             },
235 |             {
236 |               "featureType": "road",
237 |               "elementType": "geometry",
238 |               "stylers": [
239 |                 {
240 |                   "color": "#ffffff"
241 |                 }
242 |               ]
243 |             },
244 |             {
245 |               "featureType": "road.arterial",
246 |               "elementType": "labels.text.fill",
247 |               "stylers": [
248 |                 {
249 |                   "color": "#757575"
250 |                 }
251 |               ]
252 |             },
253 |             {
254 |               "featureType": "road.highway",
255 |               "elementType": "geometry",
256 |               "stylers": [
257 |                 {
258 |                   "color": "#dadada"
259 |                 }
260 |               ]
261 |             },
262 |             {
263 |               "featureType": "road.highway",
264 |               "elementType": "labels.text.fill",
265 |               "stylers": [
266 |                 {
267 |                   "color": "#616161"
268 |                 }
269 |               ]
270 |             },
271 |             {
272 |               "featureType": "road.local",
273 |               "elementType": "labels.text.fill",
274 |               "stylers": [
275 |                 {
276 |                   "color": "#9e9e9e"
277 |                 }
278 |               ]
279 |             },
280 |             {
281 |               "featureType": "transit.line",
282 |               "elementType": "geometry",
283 |               "stylers": [
284 |                 {
285 |                   "color": "#e5e5e5"
286 |                 }
287 |               ]
288 |             },
289 |             {
290 |               "featureType": "transit.station",
291 |               "elementType": "geometry",
292 |               "stylers": [
293 |                 {
294 |                   "color": "#eeeeee"
295 |                 }
296 |               ]
297 |             },
298 |             {
299 |               "featureType": "water",
300 |               "elementType": "geometry",
301 |               "stylers": [
302 |                 {
303 |                   "color": "#c9c9c9"
304 |                 }
305 |               ]
306 |             },
307 |             {
308 |               "featureType": "water",
309 |               "elementType": "labels.text.fill",
310 |               "stylers": [
311 |                 {
312 |                   "color": "#9e9e9e"
313 |                 }
314 |               ]
315 |             }
316 |           ]
317 |       });
318 |       setUpDrawingTools();
319 |     }
320 | 
321 |     // Add the DrawingManager and set up drawing event handlers.
322 |     function setUpDrawingTools(){
323 |       // Initialize drawing manager.
324 |       drawingManager = new google.maps.drawing.DrawingManager({
325 |         drawingMode: google.maps.drawing.OverlayType.CIRCLE,
326 |         drawingControl: true,
327 |         drawingControlOptions: {
328 |           position: google.maps.ControlPosition.TOP_LEFT,
329 |           drawingModes: [
330 |             google.maps.drawing.OverlayType.CIRCLE,
331 |             google.maps.drawing.OverlayType.POLYGON,
332 |             google.maps.drawing.OverlayType.RECTANGLE
333 |           ]
334 |         },
335 |         circleOptions: {
336 |           fillOpacity: 0
337 |         },
338 |         polygonOptions: {
339 |           fillOpacity: 0
340 |         },
341 |         rectangleOptions: {
342 |           fillOpacity: 0
343 |         }
344 |       });
345 |       drawingManager.setMap(map);
346 | 
347 |       // Handle the drawing events.
348 |       drawingManager.addListener('rectanglecomplete', rectangle => {
349 |         //show an animation to indicate that something is happening.
350 |         fadeToggle(document.getElementById('spinner'));
351 |         rectangleQuery(rectangle.getBounds());
352 |       });
353 | 
354 |       drawingManager.addListener('circlecomplete', circle => {
355 |         //show an animation to indicate that something is happening.
356 |         fadeToggle(document.getElementById('spinner'));
357 |         circleQuery(circle);
358 |       });
359 | 
360 |       drawingManager.addListener('polygoncomplete', polygon => {
361 |         let path = polygon.getPath().getArray();
362 |         let queryPolygon = path.map(element => {
363 |           return [element.lng(), element.lat()];
364 |         });
365 |         //show an animation to indicate that something is happening.
366 |         fadeToggle(document.getElementById('spinner'));
367 |         polygonQuery(queryPolygon);
368 |       });
369 |     }
370 | 
371 |     // Query-related functions.
372 | 
373 |     // Query locations by rectangular area.
374 |     function rectangleQuery(latLngBounds){
375 |       let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
376 |       sendQuery(queryString);
377 |     }
378 | 
379 |     function rectangleSQL(ne, sw){
380 |       let queryString = 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude '
381 |       queryString +=  'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '`'
382 |       queryString += ' WHERE pickup_latitude > ' + sw.lat();
383 |       queryString += ' AND pickup_latitude < ' + ne.lat();
384 |       queryString += ' AND pickup_longitude > ' + sw.lng();
385 |       queryString += ' AND pickup_longitude < ' + ne.lng();
386 |       queryString += ' LIMIT ' + recordLimit;
387 |       return queryString;
388 |     }
389 | 
390 |     // Query an area by point & radius.
391 |     function circleQuery(circle){
392 |       let queryString = haversineSQL(circle.getCenter(), circle.radius);
393 |       sendQuery(queryString);
394 |     }
395 | 
396 |     // Calculate a circular area on the surface of a sphere based on a center and radius.
397 |     function haversineSQL(center, radius){
398 |       let queryString;
399 |       let centerLat = center.lat();
400 |       let centerLng = center.lng();
401 |       let kmPerDegree = 111.045;
402 | 
403 |       queryString = 'CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 LANGUAGE js AS ';
404 |       queryString += '""" ';
405 |       queryString += 'return (radians*180)/(22/7);';
406 |       queryString += '"""; ';
407 | 
408 |       queryString += 'CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) RETURNS FLOAT64 LANGUAGE js AS';
409 |       queryString += '""" ';
410 |       queryString += 'return (degrees*(22/7))/180;';
411 |       queryString += '"""; ';
412 | 
413 |       queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude '
414 |       queryString += 'FROM `' + bigQueryProjectId +'.' + datasetId + '.' + tableName + '` ';
415 |       queryString += 'WHERE '
416 |       queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
417 |       queryString += centerLat;
418 |       queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
419 |       queryString += ' pickup_longitude ';
420 |       queryString += ') ) + SIN( RADIANS('
421 |       queryString += centerLat;
422 |       queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) ';
423 | 
424 |       queryString += ' < ' + radius/1000;
425 |       queryString += ' LIMIT ' + recordLimit;
426 |       return queryString;
427 |     }
428 | 
429 |     // Query an arbitrary shape drawn by the user.
430 |     function polygonQuery(polygon) {
431 |      let request = gapi.client.bigquery.jobs.insert({
432 |         'projectId' : gcpProjectId,
433 |         'resource' : {
434 |           'configuration':
435 |           {
436 |             'query':
437 |             {
438 |               'query': polygonSQL(polygon),
439 |               'useLegacySql': false
440 |             }
441 |           }
442 |         }
443 |       });
444 |       request.execute(response => checkJobStatus(response.jobReference.jobId));
445 |     }
446 | 
447 |     //Build a BigQuery User Defined Function based SQL Query
448 |     //This uses Standard SQL - see map_legacySql.html for a version that uses BigQuery Legacy SQL
449 |     function polygonSQL(poly){
450 |       let queryString = 'CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64) ';
451 |       queryString += 'RETURNS BOOL LANGUAGE js AS """ ';
452 |       queryString += 'var polygon=' + JSON.stringify(poly) + ';';
453 |       queryString += 'var vertx = [];';
454 |       queryString += 'var verty = [];';
455 |       queryString += 'var nvert = 0;';
456 |       queryString += 'var testx = longitude;';
457 |       queryString += 'var testy = latitude;';
458 |       queryString += 'for(coord in polygon){';
459 |       queryString += '  vertx[nvert] = polygon[coord][0];';
460 |       queryString += '  verty[nvert] = polygon[coord][1];';
461 |       queryString += '  nvert ++;';
462 |       queryString += '}';
463 |       queryString += 'var i, j, c = 0;';
464 |       queryString += 'for (i = 0, j = nvert-1; i < nvert; j = i++) {';
465 |       queryString += '  if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){';
466 |       queryString += '    c = !c;';
467 |       queryString += '  }';
468 |       queryString += '}';
469 |       queryString += 'return c;';
470 |       queryString += '"""; ';
471 |       queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime ';
472 |       queryString += 'FROM `' + bigQueryProjectId + '.' + datasetId + '.' + tableName + '` ';
473 |       queryString += 'WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE ';
474 |       queryString += 'LIMIT ' + recordLimit;
475 |       return queryString;
476 |     }
477 | 
478 |     // Show query results as a Heatmap.
479 |     function doHeatMap(rows){
480 |       let latCol = 2;
481 |       let lngCol = 3;
482 |       let heatmapData = [];
483 |       if (heatmap!=null){
484 |         heatmap.setMap(null);
485 |       }
486 |       for (let i = 0; i < rows.length; i++) {
487 |           let f = rows[i].f;
488 |           let coords = { lat: parseFloat(f[latCol].v), lng: parseFloat(f[lngCol].v) };
489 |           let latLng = new google.maps.LatLng(coords);
490 |           heatmapData.push(latLng);
491 |       }
492 |       heatmap = new google.maps.visualization.HeatmapLayer({
493 |           data: heatmapData,
494 |           maxIntensity: 20
495 |       });
496 |       heatmap.setMap(map);
497 |     }
498 | 
499 |     function updateStatus(response){
500 |       if(response.statistics){
501 |         let durationMs = response.statistics.endTime - response.statistics.startTime;
502 |         let durationS = durationMs/1000;
503 |         let suffix = (durationS ==1) ? '':'s';
504 |         let durationTd = document.getElementById("duration");
505 |         durationTd.innerHTML = durationS + ' second' + suffix;
506 |       }
507 |       if(response.totalRows){
508 |         let rowsTd = document.getElementById("rowCount");
509 |         rowsTd.innerHTML = response.totalRows;
510 |       }
511 |       if(response.totalBytesProcessed){
512 |         let bytesTd = document.getElementById("bytes");
513 |         bytesTd.innerHTML = (response.totalBytesProcessed/1073741824) + ' GB';
514 |       }
515 |     }
516 | 
517 |     //toggle the opacity of an HTML element to make it appear/disappear
518 |     function fadeToggle(obj){
519 |         if(obj.style.opacity==1){
520 |             obj.style.opacity = 0;
521 |             setTimeout(() => { 
522 |               obj.style.zIndex = -1000;
523 |             }, 1000);
524 |         } else {
525 |             obj.style.zIndex = 1000;
526 |             obj.style.opacity = 1;
527 |         }
528 |     }
529 | 
530 |     </script>
531 |   </head>
532 |   <body>
533 |     <div id="map"></div>
534 | 
535 |     <!-- LOADING SPINNER -->
536 |     <img id="spinner" class="fade" src="../img/loader.gif">
537 |     <!-- MENU -->
538 |     <div id="menu">
539 |         <div id="stats">
540 |             <h3>Statistics:</h3>
541 |             <table>
542 |                 <tr>
543 |                     <td>Total Locations:</td><td id="rowCount"> - </td>
544 |                 </tr>
545 |                 <tr>
546 |                     <td>Query Execution:</td><td id="duration"> - </td>
547 |                 </tr>
548 |                 <tr>
549 |                     <td>Data Processed:</td><td id="bytes"> - </td>
550 |                 </tr>
551 |             </table>
552 |         </div>
553 |     </div>
554 |     <!-- MENU END -->
555 | 
556 |     <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&key=YOUR_API_KEY"
557 |     async defer></script>
558 |     <script src="https://apis.google.com/js/client.js"></script>
559 |     <script type="text/javascript">
560 |       gapi.load('client:auth', authorize);
561 |     </script>
562 |   </body>
563 | </html>
564 | 


--------------------------------------------------------------------------------
/third_party/point_in_polygon.js:
--------------------------------------------------------------------------------
 1 | // Point in polygon code.
 2 | // Based in part on the C implementation at https://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
 3 | // Uses a ray-tracing algorithm, see https://en.wikipedia.org/wiki/Point_in_polygon
 4 | var inLineJs = 'function pointInPoly(polygon, point){' +
 5 |   'var vertx = [];' +
 6 |   'var verty = [];' +
 7 |   'var nvert = 0;' +
 8 |   'var testx = point[0];' +
 9 |   'var testy = point[1];' +
10 |   'for(coord in polygon){' +
11 |     'vertx[nvert] = polygon[coord][0];' +
12 |     'verty[nvert] = polygon[coord][1];' +
13 |     'nvert ++;' +
14 |   '}' +
15 |   'var i, j, c = 0;' +
16 |   'for (i = 0, j = nvert-1; i < nvert; j = i++) {' +
17 |     'if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){' +
18 |       'c = !c;' +
19 |     '}' +
20 |   '}' +
21 |   'return c;' +
22 | '}';
23 | 


--------------------------------------------------------------------------------
/work/.gitignore:
--------------------------------------------------------------------------------
1 | # Ignore everything in this directory
2 | *
3 | # Except this file
4 | !.gitignore
5 | !app.yaml
6 | 


--------------------------------------------------------------------------------
/work/app.yaml:
--------------------------------------------------------------------------------
 1 | runtime: python27
 2 | api_version: 1
 3 | threadsafe: true
 4 | handlers:
 5 | - url: /
 6 |   static_files: index.html
 7 |   upload: index.html
 8 |   secure: always
 9 | - url: /index\.html
10 |   static_files: index.html
11 |   upload: index.html
12 |   secure: always


--------------------------------------------------------------------------------