Google Maps Platform (JavaScript) की मदद से, BigQuery में जगह की जानकारी वाले डेटा को क्वेरी करना और उसे विज़ुअलाइज़ करना

1. खास जानकारी

डेटासेट में मौजूद पैटर्न को विज़ुअलाइज़ करने के लिए, मैप एक बहुत ही बेहतरीन टूल हो सकता है. ये पैटर्न, किसी न किसी तरह से जगह की जानकारी से जुड़े होते हैं. यह संबंध किसी जगह का नाम, अक्षांश और देशांतर की कोई वैल्यू या किसी ऐसे इलाके का नाम हो सकता है जिसकी कोई सीमा तय हो. जैसे, जनगणना क्षेत्र या पिन कोड.

जब ये डेटासेट बहुत बड़े हो जाते हैं, तो पारंपरिक टूल का इस्तेमाल करके क्वेरी करना और उन्हें विज़ुअलाइज़ करना मुश्किल हो सकता है. डेटा को क्वेरी करने के लिए Google BigQuery और क्वेरी बनाने और आउटपुट को विज़ुअलाइज़ करने के लिए Google Maps API का इस्तेमाल करके, अपने डेटा में भौगोलिक पैटर्न को तुरंत एक्सप्लोर किया जा सकता है. इसके लिए, आपको बहुत कम सेटअप या कोडिंग की ज़रूरत होती है. साथ ही, आपको बहुत बड़े डेटासेट को सेव करने के लिए किसी सिस्टम को मैनेज करने की ज़रूरत नहीं होती.

आपको क्या बनाना है

इस कोडलैब में, आपको कुछ क्वेरी लिखनी और उन्हें चलाना होगा. इससे यह पता चलेगा कि BigQuery का इस्तेमाल करके, बहुत बड़े सार्वजनिक डेटासेट में जगह के हिसाब से अहम जानकारी कैसे दी जाती है. आपको एक ऐसा वेब पेज भी बनाना होगा जो Google Maps Platform JavaScript API का इस्तेमाल करके मैप लोड करता हो. इसके बाद, Google APIs Client Library for Javascript और BigQuery API का इस्तेमाल करके, उसी बड़े सार्वजनिक डेटासेट के ख़िलाफ़ स्पेशल क्वेरी चलाता हो और उन्हें दिखाता हो.

आपको क्या सीखने को मिलेगा

• BigQuery, SQL क्वेरी, उपयोगकर्ता के तय किए गए फ़ंक्शन , और BigQuery API का इस्तेमाल करके, पेटाबाइट के साइज़ वाले लोकेशन डेटासेट को कुछ ही सेकंड में क्वेरी करने का तरीका
• वेब पेज में Google Map जोड़ने और उपयोगकर्ताओं को उस पर शेप बनाने की सुविधा देने के लिए, Google Maps Platform का इस्तेमाल कैसे करें
• Google Maps पर बड़े डेटासेट के ख़िलाफ़ क्वेरी को कैसे विज़ुअलाइज़ करें. उदाहरण के लिए, नीचे दी गई इमेज में दिखाया गया है कि साल 2016 में, एंपायर स्टेट बिल्डिंग के आस-पास के ब्लॉक से शुरू हुई यात्राओं के दौरान, टैक्सी से उतरने की जगहों की डेंसिटी कितनी थी.

आपको किन चीज़ों की ज़रूरत होगी

• एचटीएमएल, सीएसएस, JavaScript, एसक्यूएल, और Chrome DevTools की बुनियादी जानकारी
• कोई आधुनिक वेब ब्राउज़र, जैसे कि Chrome, Firefox, Safari या Edge का नया वर्शन.
• अपनी पसंद का टेक्स्ट एडिटर या आईडीई

टेक्नोलॉजी

BigQuery

BigQuery, Google की डेटा विश्लेषण सेवा है. इसका इस्तेमाल बहुत बड़े डेटासेट के लिए किया जाता है. इसमें RESTful API है और यह SQL में लिखी गई क्वेरी के साथ काम करता है. अगर आपके पास अक्षांश और देशांतर की वैल्यू वाला डेटा है, तो उसका इस्तेमाल जगह के हिसाब से अपने डेटा को क्वेरी करने के लिए किया जा सकता है. इसका फ़ायदा यह है कि आपको किसी सर्वर या डेटाबेस इन्फ़्रास्ट्रक्चर को मैनेज करने की ज़रूरत नहीं होती. साथ ही, पैटर्न देखने के लिए बहुत बड़े डेटासेट को विज़ुअली एक्सप्लोर किया जा सकता है. BigQuery की बेहतर स्केलेबिलिटी और मैनेज किए गए इन्फ़्रास्ट्रक्चर की मदद से, अपनी टेबल के साइज़ के बावजूद कुछ ही सेकंड में अपने सवालों के जवाब पाए जा सकते हैं.

Google Maps Platform

Google Maps Platform, Google के मैप, जगह, और रास्ते के डेटा को प्रोग्राम के हिसाब से ऐक्सेस करने की सुविधा देता है. फ़िलहाल, 20 लाख से ज़्यादा वेबसाइटें और ऐप्लिकेशन इसका इस्तेमाल करते हैं. इससे वे अपने उपयोगकर्ताओं को एम्बेड किए गए मैप और जगह के हिसाब से क्वेरी की सुविधा देते हैं.

Google Maps Platform JavaScript API की ड्रॉइंग लेयर की मदद से, मैप पर ड्रॉइंग बनाई जा सकती हैं. इन्हें BigQuery टेबल के लिए इनपुट में बदला जा सकता है. इन टेबल में, कॉलम में अक्षांश और देशांतर की वैल्यू सेव होती हैं.

शुरू करने के लिए, आपको BigQuery और Maps API चालू किए गए Google Cloud Platform प्रोजेक्ट की ज़रूरत होगी.

2. सेट अप करना

Google खाता

अगर आपके पास पहले से कोई Google खाता (Gmail या Google Apps) नहीं है, तो आपको एक खाता बनाना होगा.

प्रोजेक्ट बनाना

अहम जानकारी: जिस प्रोजेक्ट का इस्तेमाल किया जा रहा है उस पर बिलिंग की सुविधा चालू होनी चाहिए. अगर आपको किसी मौजूदा प्रोजेक्ट का इस्तेमाल करना है, तो पक्का करें कि उस पर बिलिंग चालू की जा सकती हो.

Google Cloud Platform Console ( console.cloud.google.com) में साइन इन करें और एक नया प्रोजेक्ट बनाएं. स्क्रीन पर सबसे ऊपर, प्रोजेक्ट ड्रॉप-डाउन मेन्यू होता है:

इस प्रोजेक्ट ड्रॉप-डाउन मेन्यू पर क्लिक करने के बाद, आपको एक मेन्यू आइटम दिखेगा. इसकी मदद से, नया प्रोजेक्ट बनाया जा सकता है:

"अपने प्रोजेक्ट के लिए नया नाम डालें" बॉक्स में, अपने नए प्रोजेक्ट का नाम डालें. उदाहरण के लिए, "BigQuery Codelab":

आपके लिए एक प्रोजेक्ट आईडी जनरेट किया जाएगा. प्रोजेक्ट आईडी, Google Cloud के सभी प्रोजेक्ट के लिए एक यूनीक नाम होता है. अपने प्रोजेक्ट आईडी को याद रखें, क्योंकि आपको इसका इस्तेमाल बाद में करना होगा. ऊपर दिया गया नाम पहले से मौजूद है और इसका इस्तेमाल नहीं किया जा सकता. इस कोडलैब में जहां भी YOUR_PROJECT_ID दिखे, वहां अपना प्रोजेक्ट आईडी डालें.

बिलिंग चालू करें

BigQuery के लिए साइन अप करने के लिए, पिछले चरण में चुने गए या बनाए गए प्रोजेक्ट का इस्तेमाल करें. इस प्रोजेक्ट पर बिलिंग की सुविधा चालू होनी चाहिए. बिलिंग की सुविधा चालू होने के बाद, BigQuery API को चालू किया जा सकता है.

ध्यान दें: इस कोडलैब में चलाई गई क्वेरी के लिए, आपसे शुल्क नहीं लिया जाएगा. हालांकि, अगर आपने BigQuery के मुफ़्त टियर (हर महीने 1 टीबी डेटा क्वेरी) या Maps API के लिए रोज़ाना के मुफ़्त कोटे की ज़्यादा से ज़्यादा सीमा (हर दिन 25,000 मैप लोड) से ज़्यादा का इस्तेमाल किया है, तो हो सकता है कि आपसे शुल्क लिया जाए.

बिलिंग की सुविधा चालू करने का तरीका इस बात पर निर्भर करता है कि आपको नया प्रोजेक्ट बनाना है या किसी मौजूदा प्रोजेक्ट के लिए बिलिंग की सुविधा फिर से चालू करनी है.

Google, Google Cloud Platform को 12 महीनों तक बिना किसी शुल्क के इस्तेमाल करने की सुविधा देता है. इसके लिए, आपको 300 डॉलर तक का क्रेडिट मिलता है. इस क्रेडिट का इस्तेमाल इस कोडलैब के लिए किया जा सकता है. ज़्यादा जानकारी के लिए, https://cloud.google.com/free/ पर जाएं.

नए प्रोजेक्ट

नया प्रोजेक्ट बनाते समय, आपसे यह चुनने के लिए कहा जाता है कि आपको अपने किस बिलिंग खाते को प्रोजेक्ट से लिंक करना है. अगर आपके पास सिर्फ़ एक बिलिंग खाता है, तो वह खाता आपके प्रोजेक्ट से अपने-आप लिंक हो जाता है.

अगर आपके पास बिलिंग खाता नहीं है, तो आपको एक खाता बनाना होगा. साथ ही, Google Cloud Platform की कई सुविधाओं का इस्तेमाल करने से पहले, आपको अपने प्रोजेक्ट के लिए बिलिंग की सुविधा चालू करनी होगी. नया बिलिंग खाता बनाने और अपने प्रोजेक्ट के लिए बिलिंग की सुविधा चालू करने के लिए, नया बिलिंग खाता बनाना में दिए गए निर्देशों का पालन करें.

मौजूदा प्रोजेक्ट

अगर आपने किसी प्रोजेक्ट के लिए बिलिंग की सुविधा को कुछ समय के लिए बंद कर दिया है, तो बिलिंग की सुविधा को फिर से चालू किया जा सकता है. इसके लिए:

1. Cloud Platform Console पर जाएं.
2. प्रोजेक्ट की सूची में से, वह प्रोजेक्ट चुनें जिसके लिए बिलिंग की सुविधा फिर से चालू करनी है.
3. कंसोल के बाईं ओर मौजूद मेन्यू खोलें और बिलिंग को चुनें. आपको बिलिंग खाता चुनने के लिए कहा जाएगा.
4. खाता सेट करें पर क्लिक करें.

नया बिलिंग खाता बनाना

नया बिलिंग खाता बनाने के लिए:

1. Cloud Platform Console पर जाएं और साइन इन करें. अगर आपके पास पहले से कोई खाता नहीं है, तो साइन अप करें.
2. कंसोल के बाईं ओर मौजूद मेन्यू खोलें और बिलिंग चुनें
3. नया बिलिंग खाता बटन पर क्लिक करें. (ध्यान दें कि अगर यह आपका पहला बिलिंग खाता नहीं है, तो आपको सबसे पहले बिलिंग खातों की सूची खोलनी होगी. इसके लिए, पेज में सबसे ऊपर मौजूद अपने मौजूदा बिलिंग खाते के नाम पर क्लिक करें. इसके बाद, बिलिंग खाते मैनेज करें पर क्लिक करें.)
4. बिलिंग खाते का नाम डालें और बिलिंग की जानकारी डालें. आपको दिखने वाले विकल्प, आपके बिलिंग पते वाले देश के हिसाब से तय होते हैं. ध्यान दें कि अमेरिका में मौजूद खातों के लिए, खाता बनाने के बाद टैक्स की स्थिति नहीं बदली जा सकती.
5. सबमिट करें और बिलिंग चालू करें पर क्लिक करें.

डिफ़ॉल्ट रूप से, बिलिंग खाता बनाने वाला व्यक्ति, उस खाते का बिलिंग एडमिन होता है.

बैंक खातों की पुष्टि करने और पेमेंट के बैकअप तरीके जोड़ने के बारे में जानकारी पाने के लिए, पेमेंट का तरीका जोड़ना, हटाना या अपडेट करना लेख पढ़ें.

BigQuery API चालू करना

अपने प्रोजेक्ट में BigQuery API चालू करने के लिए, कंसोल में BigQuery API पेज Marketplace पर जाएं और ‘चालू करें' नीले बटन पर क्लिक करें.

ध्यान दें: अगर आपने अब तक अपने ईमेल पते की पुष्टि नहीं की है, तो आपको नए बिलिंग खाते का इस्तेमाल शुरू करने से पहले ऐसा करना पड़ सकता है. अपने ईमेल पते की पुष्टि करने के बारे में जानकारी पाने के लिए, यह विषय देखें: अपने ईमेल पते की पुष्टि करना.

3. BigQuery में जगह की जानकारी से जुड़े डेटा को क्वेरी करना

BigQuery में अक्षांश और देशांतर की वैल्यू के तौर पर सेव किए गए जगह की जानकारी वाले डेटा को क्वेरी करने के तीन तरीके हैं.

• रेक्टैंगल क्वेरी: इसमें दिलचस्पी वाले इलाके को ऐसी क्वेरी के तौर पर तय किया जाता है जो अक्षांश और देशांतर की कम से कम और ज़्यादा से ज़्यादा सीमा के अंदर मौजूद सभी लाइनों को चुनती है.
• रेडियस क्वेरी: पृथ्वी की आकृति को मॉडल करने के लिए, हैवरसाइन फ़ॉर्मूले और गणित के फ़ंक्शन का इस्तेमाल करके, किसी पॉइंट के चारों ओर एक सर्कल बनाकर, दिलचस्पी वाले इलाके के बारे में बताएं.
• पॉलीगॉन क्वेरी: कस्टम शेप तय करें और उपयोगकर्ता के तय किए गए फ़ंक्शन का इस्तेमाल करके, पॉइंट-इन-पॉलीगॉन लॉजिक को दिखाएं. इससे यह जांच की जा सकेगी कि हर लाइन का अक्षांश और देशांतर, शेप के अंदर आता है या नहीं.

शुरू करने के लिए, Google Cloud Platform कंसोल के BigQuery सेक्शन में मौजूद क्वेरी एडिटर का इस्तेमाल करें. इससे, NYC टैक्सी के डेटा के ख़िलाफ़ यहां दी गई क्वेरी चलाई जा सकती हैं.

स्टैंडर्ड एसक्यूएल बनाम लेगसी एसक्यूएल

BigQuery, एसक्यूएल के दो वर्शन के साथ काम करता है: लेगसी एसक्यूएल और स्टैंडर्ड एसक्यूएल. बाद वाला, 2011 का एएनएसआई स्टैंडर्ड है. इस ट्यूटोरियल के लिए, हम स्टैंडर्ड एसक्यूएल का इस्तेमाल करेंगे, क्योंकि यह बेहतर मानकों के मुताबिक है.

अगर आपको BigQuery एडिटर में लेगसी एसक्यूएल का इस्तेमाल करना है, तो यह तरीका अपनाएं:

1. 'ज़्यादा' बटन पर क्लिक करें
2. ड्रॉपडाउन मेन्यू से, ‘क्वेरी सेटिंग' चुनें
3. ‘SQL dialect' में जाकर, ‘Legacy' रेडियो बटन चुनें
4. ‘सेव करें' बटन पर क्लिक करें

आयत के आकार वाली क्वेरी

BigQuery में रेक्टैंगल क्वेरी बनाना बहुत आसान है. आपको सिर्फ़ एक WHERE क्लॉज़ जोड़ना होगा. इससे, अक्षांश और देशांतर की कम से कम और ज़्यादा से ज़्यादा वैल्यू के बीच की जगहों के नतीजे ही दिखेंगे.

BigQuery कंसोल में, यहाँ दिया गया उदाहरण आज़माएँ. इस क्वेरी में, रेक्टैंगुलर एरिया में शुरू हुई यात्राओं के लिए, यात्रा के कुछ औसत आंकड़ों के बारे में पूछा गया है. इस रेक्टैंगुलर एरिया में मिडटाउन और लोअर मैनहैटन शामिल है. आपके पास दो अलग-अलग जगहों के लिए क्वेरी आज़माने का विकल्प है. JFK हवाई अड्डे से शुरू होने वाली राइड के लिए क्वेरी चलाने के लिए, दूसरे WHERE क्लॉज़ से टिप्पणी हटाने का विकल्प चुनें.

SELECT 
ROUND(AVG(tip_amount),2) as avg_tip, 
ROUND(AVG(fare_amount),2) as avg_fare, 
ROUND(AVG(trip_distance),2) as avg_distance, 
ROUND(AVG(tip_proportion),2) as avg_tip_pc, 
ROUND(AVG(fare_per_mile),2) as avg_fare_mile FROM

(SELECT 

pickup_latitude, pickup_longitude, tip_amount, fare_amount, trip_distance, (tip_amount / fare_amount)*100.0 as tip_proportion, fare_amount / trip_distance as fare_per_mile

FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2015`

WHERE trip_distance > 0.01 AND fare_amount <100 AND payment_type = "1" AND fare_amount > 0
)

--Manhattan
WHERE pickup_latitude < 40.7679 AND pickup_latitude > 40.7000 AND pickup_longitude < -73.97 and pickup_longitude > -74.01

--JFK
--WHERE pickup_latitude < 40.654626 AND pickup_latitude > 40.639547 AND pickup_longitude < -73.771497 and pickup_longitude > -73.793755

दोनों क्वेरी के नतीजों से पता चलता है कि दोनों जगहों पर पिक अप करने के लिए, यात्रा की औसत दूरी, किराया, और टिप में काफ़ी अंतर है.

Manhattan

avg_tip	avg_fare	avg_distance	avg_tip_pc	avg_fare_mile
2.52	12.03	9.97	22.39	5.97

JFK

avg_tip	avg_fare	avg_distance	avg_tip_pc	avg_fare_mile
9.22	48.49	41.19	22.48	4.36

रेडियस क्वेरी

अगर आपको गणित की थोड़ी-बहुत जानकारी है, तो एसक्यूएल में रेडियस क्वेरी बनाना भी आसान है. BigQuery के लेगसी एसक्यूएल गणित के फ़ंक्शन का इस्तेमाल करके, हैवर्सिन फ़ॉर्मूला का इस्तेमाल करके एक एसक्यूएल क्वेरी बनाई जा सकती है. यह फ़ॉर्मूला, पृथ्वी की सतह पर गोलाकार क्षेत्र या स्फ़ेरिकल कैप का अनुमान लगाता है.

यहां 0.1 कि॰मी॰ के दायरे वाले 40.73943, -73.99585 पर केंद्रित सर्कल क्वेरी के लिए, BigQuery एसक्यूएल स्टेटमेंट का एक उदाहरण दिया गया है.

यह एक डिग्री से तय की गई दूरी का अनुमान लगाने के लिए, 111.045 किलोमीटर की वैल्यू का इस्तेमाल करता है.

यह उदाहरण, http://www.plumislandmedia.net/mysql/haversine-mysql-nearest-loc/ पर मौजूद है:

SELECT pickup_latitude, pickup_longitude, 
    (111.045 * DEGREES( 
      ACOS( 
        COS( RADIANS(40.73943) ) * 
        COS( RADIANS( pickup_latitude ) ) * 
        COS( 
          RADIANS( -73.99585 ) - 
          RADIANS( pickup_longitude ) 
        ) + 
        SIN( RADIANS(40.73943) ) * 
        SIN( RADIANS( pickup_latitude ) ) 
      ) 
     ) 
    ) AS distance FROM `project.dataset.tableName` 
    HAVING distance < 0.1 

Haversine फ़ॉर्मूले के लिए एसक्यूएल का इस्तेमाल करना मुश्किल लगता है. हालांकि, आपको सिर्फ़ सर्कल के सेंटर का कोऑर्डिनेट, रेडियस, और BigQuery के लिए प्रोजेक्ट, डेटासेट, और टेबल के नाम डालने होते हैं.

ध्यान दें: इस फ़ॉर्मूले में यह माना जाता है कि पृथ्वी पूरी तरह से गोल है, जबकि असल में यह थोड़ी चपटी है. इसलिए, पृथ्वी के आकार में स्थानीय अंतर की वजह से, इस फ़ॉर्मूले से मिलने वाले नतीजों में थोड़ी गड़बड़ी हो सकती है. यहां दिखाए गए उदाहरणों में, दूरी का अंतर बहुत कम होगा. इसलिए, इससे नतीजों पर कोई असर नहीं पड़ेगा.

BigQuery, एसक्यूएल के दो वर्शन के साथ काम करता है: लेगसी एसक्यूएल और स्टैंडर्ड एसक्यूएल. बाद वाला, 2011 का एएनएसआई स्टैंडर्ड है.

यहां एक उदाहरण क्वेरी दी गई है. यह क्वेरी, एंपायर स्टेट बिल्डिंग के 100 मीटर के दायरे में पिकअप की गई यात्राओं के कुछ औसत आंकड़े दिखाती है. नतीजे देखने के लिए, इसे BigQuery वेब कंसोल में कॉपी करके चिपकाएं. ब्रॉन्क्स जैसी अन्य जगहों से तुलना करने के लिए, अक्षांश और देशांतर बदलें.

#standardSQL
CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 AS
(
  (radians*180)/(22/7)
);

CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) AS (
  (degrees*(22/7))/180
);

CREATE TEMPORARY FUNCTION DistanceKm(lat FLOAT64, lon FLOAT64, lat1 FLOAT64, lon1 FLOAT64) AS (
     Degrees( 
      ACOS( 
        COS( Radians(lat1) ) * 
        COS( Radians(lat) ) *  
        COS( Radians(lon1 ) -  
        Radians( lon ) ) +  
        SIN( Radians(lat1) ) *  
        SIN( Radians( lat ) ) 
        ) 
    ) * 111.045
);

SELECT 

ROUND(AVG(tip_amount),2) as avg_tip,
ROUND(AVG(fare_amount),2) as avg_fare,
ROUND(AVG(trip_distance),2) as avg_distance,
ROUND(AVG(tip_proportion), 2) as avg_tip_pc,
ROUND(AVG(fare_per_mile),2) as avg_fare_mile

FROM

-- EMPIRE STATE BLDG 40.748459, -73.985731
-- BRONX 40.895597, -73.856085

(SELECT pickup_latitude, pickup_longitude, tip_amount, fare_amount, trip_distance, tip_amount/fare_amount*100 as tip_proportion, fare_amount / trip_distance as fare_per_mile, DistanceKm(pickup_latitude, pickup_longitude, 40.748459, -73.985731)


FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2015`

WHERE 
  DistanceKm(pickup_latitude, pickup_longitude, 40.748459, -73.985731) < 0.1
  AND fare_amount > 0 and trip_distance > 0
  )
WHERE fare_amount < 100

क्वेरी के नतीजे यहां दिए गए हैं. आपको दिखेगा कि औसत टिप, किराया, यात्रा की दूरी, किराये के हिसाब से टिप का अनुपात, और प्रति मील के हिसाब से औसत किराये में काफ़ी अंतर है.

एंपायर स्टेट बिल्डिंग:

avg_tip	avg_fare	avg_distance	avg_tip_pc	avg_fare_mile
1.17	11.08	45.28	10.53	6.42

धर्मशाला स्टेडियम

avg_tip	avg_fare	avg_distance	avg_tip_pc	avg_fare_mile
0.52	17.63	4.75	4.74	10.9

पॉलीगॉन क्वेरी

SQL, आयतों और वृत्तों के अलावा किसी अन्य आकार का इस्तेमाल करके क्वेरी करने की सुविधा नहीं देता. BigQuery में कोई नेटिव ज्यामिति डेटा टाइप या स्पैटियल इंडेक्स नहीं होता. इसलिए, पॉलीगॉन शेप का इस्तेमाल करके क्वेरी चलाने के लिए, आपको सामान्य एसक्यूएल क्वेरी से अलग तरीके का इस्तेमाल करना होगा. इसके लिए, JavaScript में एक जियोमेट्री फ़ंक्शन तय किया जा सकता है. साथ ही, इसे BigQuery में उपयोगकर्ता के तय किए गए फ़ंक्शन (यूडीएफ़) के तौर पर लागू किया जा सकता है.

ज्यामिति से जुड़ी कई कार्रवाइयों को JavaScript में लिखा जा सकता है. इसलिए, अक्षांश और देशांतर की वैल्यू वाली BigQuery टेबल के लिए, किसी कार्रवाई को आसानी से चुना और लागू किया जा सकता है. आपको यूडीएफ़ के ज़रिए कस्टम पॉलीगॉन पास करना होगा. साथ ही, हर लाइन के लिए टेस्ट करना होगा. इससे सिर्फ़ वे लाइनें दिखेंगी जिनमें अक्षांश और देशांतर, पॉलीगॉन के अंदर आते हैं. BigQuery के रेफ़रंस में यूडीएफ़ के बारे में ज़्यादा जानें.

पॉइंट इन पॉलीगॉन एल्गोरिदम

JavaScript में यह पता लगाने के कई तरीके हैं कि कोई पॉइंट, पॉलीगॉन के अंदर है या नहीं. यहां C से पोर्ट किया गया एक ऐसा लोकप्रिय तरीका बताया गया है जो रे-ट्रेसिंग एल्गोरिदम का इस्तेमाल करता है. इससे यह पता चलता है कि कोई पॉइंट, पॉलीगॉन के अंदर है या बाहर. इसके लिए, यह गिना जाता है कि एक बहुत लंबी लाइन, शेप की सीमा को कितनी बार पार करती है. इसमें कोड की कुछ ही लाइनें होती हैं:

function pointInPoly(nvert, vertx, verty, testx, testy){
  var i, j, c = 0;
  for (i = 0, j = nvert-1; i < nvert; j = i++) {
    if ( ((verty[i]>testy) != (verty[j]>testy)) &&
                (testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) )
      c = !c;
  }
  return c;
}

JavaScript में पोर्ट करना

इस एल्गोरिदम का JavaScript वर्शन ऐसा दिखता है:

/* This function includes a port of C code to calculate point in polygon
* see http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html for license
*/

function pointInPoly(polygon, point){
    // Convert a JSON poly into two arrays and a vertex count.
    let vertx = [],
        verty = [],
        nvert = 0,
        testx = point[0],
        testy = point[1];
    for (let coord of polygon){
      vertx[nvert] = coord[0];
      verty[nvert] = coord[1];
      nvert ++;
    }

        
    // The rest of this function is the ported implementation.
    for (let i = 0, let j = nvert - 1; i < nvert; j = i++) {
      if ( ((verty[i] > testy) != (verty[j] > testy)) &&
         (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i]) )
        c = !c;
    }
    return c;
}

BigQuery में स्टैंडर्ड एसक्यूएल का इस्तेमाल करते समय, यूडीएफ़ के लिए सिर्फ़ एक स्टेटमेंट की ज़रूरत होती है. हालांकि, यूडीएफ़ को स्टेटमेंट में अस्थायी फ़ंक्शन के तौर पर तय किया जाना चाहिए. यहां एक उदाहरण दिया गया है. नीचे दिए गए एसक्यूएल स्टेटमेंट को क्वेरी एडिटर विंडो में चिपकाएं.

CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64)
RETURNS BOOL LANGUAGE js AS """
  let polygon=[[-73.98925602436066,40.743249676056955],[-73.98836016654968,40.74280666503313],[-73.98915946483612,40.741676770346295],[-73.98967981338501,40.74191656974406]];

  let vertx = [],
    verty = [],
    nvert = 0,
    testx = longitude,
    testy = latitude,
    c = false,
    j = nvert - 1;

  for (let coord of polygon){
    vertx[nvert] = coord[0];
    verty[nvert] = coord[1];
    nvert ++;
  }

  // The rest of this function is the ported implementation.
  for (let i = 0; i < nvert; j = i++) {
    if ( ((verty[i] > testy) != (verty[j] > testy)) &&
 (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i]) ) {
      c = !c;
    }
  }

  return c;
""";

SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime
FROM `bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2016`
WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE
AND (pickup_datetime BETWEEN CAST("2016-01-01 00:00:01" AS DATETIME) AND CAST("2016-02-28 23:59:59" AS DATETIME))
LIMIT 1000

बधाई हो!

अब आपने BigQuery का इस्तेमाल करके, तीन तरह की स्पेशल क्वेरी चलाई हैं. जैसा कि आपने देखा, इस डेटासेट के ख़िलाफ़ की गई क्वेरी के नतीजे के डेटा पर जगह का बहुत असर पड़ता है. हालांकि, जब तक आपको यह पता नहीं चलता कि क्वेरी कहां चलानी है, तब तक सिर्फ़ एसक्यूएल क्वेरी का इस्तेमाल करके, ज़रूरत के हिसाब से स्पैटियल पैटर्न का पता लगाना मुश्किल होता है.

अगर हम डेटा को मैप पर विज़ुअलाइज़ कर सकें और अपनी पसंद के हिसाब से किसी भी इलाके को चुनकर डेटा एक्सप्लोर कर सकें, तो कितना अच्छा हो! Google Maps API का इस्तेमाल करके, ऐसा किया जा सकता है. सबसे पहले, आपको Maps API चालू करना होगा. इसके बाद, अपनी लोकल मशीन पर चलने वाला एक सामान्य वेब पेज सेट अप करना होगा. साथ ही, अपने वेब पेज से क्वेरी भेजने के लिए, BigQuery API का इस्तेमाल शुरू करना होगा.

4. Google Maps API के साथ काम करना

कुछ आसान स्पैटियल क्वेरी चलाने के बाद, अगला चरण आउटपुट को विज़ुअलाइज़ करना है, ताकि पैटर्न देखे जा सकें. इसके लिए, आपको Maps API चालू करना होगा. इसके बाद, एक ऐसा वेब पेज बनाना होगा जो मैप से BigQuery को क्वेरी भेजे और फिर मैप पर नतीजे दिखाए.

Maps JavaScript API चालू करना

इस कोडलैब के लिए, आपको अपने प्रोजेक्ट में Google Maps Platform के Maps JavaScript API को चालू करना होगा. ऐसा करने के लिए, निम्नलिखित करें:

1. Google Cloud Platform Console में, Marketplace पर जाएं
2. Marketplace में, ‘Maps JavaScript API' खोजें
3. खोज के नतीजों में, Maps JavaScript API के लिए मौजूद टाइल पर क्लिक करें
4. 'चालू करें' बटन पर क्लिक करें

एपीआई पासकोड जनरेट करना

Google Maps Platform से अनुरोध करने के लिए, आपको एक एपीआई पासकोड जनरेट करना होगा. साथ ही, इसे सभी अनुरोधों के साथ भेजना होगा. एपीआई कुंजी जनरेट करने के लिए, यह तरीका अपनाएं:

1. Google Cloud Platform कंसोल में, हैमबर्गर मेन्यू पर क्लिक करके बाईं ओर मौजूद नेविगेशन बार खोलें
2. ‘एपीआई और सेवा' > ‘क्रेडेंशियल' को चुनें
3. ‘क्रेडेंशियल बनाएं' बटन पर क्लिक करें. इसके बाद, ‘एपीआई कुंजी' चुनें
4. नई एपीआई पासकोड कॉपी करें

कोड डाउनलोड करना और वेब सर्वर सेट अप करना

इस कोडलैब के लिए, पूरा कोड डाउनलोड करने के लिए, इस बटन पर क्लिक करें:

कोड डाउनलोड करें

डाउनलोड की गई ज़िप फ़ाइल को अनपैक करें. इससे एक रूट फ़ोल्डर (bigquery) अनपैक होगा. इसमें इस कोडलैब के हर चरण के लिए एक फ़ोल्डर होगा. साथ ही, इसमें वे सभी संसाधन होंगे जिनकी आपको ज़रूरत होगी.

stepN फ़ोल्डर में, इस कोडलैब के हर चरण की आखिरी स्थिति होती है. ये सिर्फ़ रेफ़रंस के लिए हैं. हमारा सारा कोडिंग का काम work नाम की डायरेक्ट्री में किया जाएगा.

लोकल वेब सर्वर सेट अप करना

आपके पास अपने वेब सर्वर का इस्तेमाल करने का विकल्प होता है. हालांकि, यह कोडलैब Chrome Web Server के साथ अच्छी तरह से काम करने के लिए डिज़ाइन किया गया है. अगर आपने अब तक यह ऐप्लिकेशन इंस्टॉल नहीं किया है, तो इसे Chrome Web Store से इंस्टॉल किया जा सकता है.

Web Server for Chrome इंस्टॉल करना

ऐप्लिकेशन इंस्टॉल होने के बाद, उसे खोलें. Chrome में, इसे इस तरह खोला जा सकता है:

ज़्यादा मदद: Chrome ऐप्लिकेशन जोड़ना और खोलना

1. Chrome खोलें
2. सबसे ऊपर मौजूद पता बार में, chrome://apps टाइप करें
3. Enter दबाएं.
4. खुलने वाली विंडो में, वेब सर्वर आइकॉन पर क्लिक करें किसी ऐप्लिकेशन को सामान्य या छोटे टैब, फ़ुलस्क्रीन या नई विंडो में खोलने के लिए उस पर राइट-क्लिक भी किया जा सकता है इसके बाद, आपको यह डायलॉग दिखेगा. इसकी मदद से, अपने लोकल वेब सर्वर को कॉन्फ़िगर किया जा सकता है:
5. 'फ़ोल्डर चुनें' पर क्लिक करें और वह जगह चुनें जहां आपने कोडलैब की सैंपल फ़ाइलें डाउनलोड की हैं
6. ‘विकल्प' सेक्शन में जाकर, ‘index.html अपने-आप दिखाएं' के बगल में मौजूद बॉक्स पर सही का निशान लगाएं:
7. वेब सर्वर को बंद करने और फिर से चालू करने के लिए, ‘वेब सर्वर: चालू है' लेबल वाले टॉगल को बाईं ओर स्लाइड करें. इसके बाद, इसे वापस दाईं ओर स्लाइड करें

5. मैप और ड्रॉइंग टूल लोड किए जा रहे हैं

एक बेसिक मैप पेज बनाना

Maps JavaScript API और JavaScript की कुछ लाइनों का इस्तेमाल करके, Google मैप लोड करने वाले एक सामान्य एचटीएमएल पेज से शुरुआत करें. Google Maps Platform के आसान मैप के सैंपल से कोड लेकर शुरुआत की जा सकती है. इसे यहां फिर से दिया गया है, ताकि आप इसे अपनी पसंद के टेक्स्ट एडिटर या आईडीई में कॉपी करके चिपका सकें. इसके अलावा, इसे डाउनलोड की गई रिपॉज़िटरी से index.html खोलकर भी देखा जा सकता है.

1. index.html को repo की लोकल कॉपी में मौजूद work फ़ोल्डर में कॉपी करें
2. repo की अपनी लोकल कॉपी में, img/ फ़ोल्डर को work/ फ़ोल्डर में कॉपी करें
3. अपने टेक्स्ट एडिटर या आईडीई में work/index.html खोलें
4. YOUR_API_KEY को उस एपीआई पासकोड से बदलें जिसे आपने पहले बनाया था

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

5. अपने ब्राउज़र में localhost:<port>/work खोलें. यहां port, आपके लोकल वेब सर्वर के कॉन्फ़िगरेशन में दिया गया पोर्ट नंबर है. डिफ़ॉल्ट पोर्ट 8887 है. आपको अपना पहला मैप दिखेगा.

अगर आपको ब्राउज़र में गड़बड़ी का मैसेज मिलता है, तो पक्का करें कि आपका एपीआई पासकोड सही हो और आपका लोकल वेब सर्वर चालू हो.

डिफ़ॉल्ट जगह और ज़ूम लेवल बदलना

जगह और ज़ूम लेवल सेट करने वाला कोड, index.html की 27वीं और 28वीं लाइन में है. फ़िलहाल, यह सिडनी, ऑस्ट्रेलिया पर सेट है:

<script>
      let map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
</script>

यह ट्यूटोरियल, न्यूयॉर्क में टैक्सी यात्रा के BigQuery डेटा के साथ काम करता है. इसलिए, इसके बाद आपको मैप के इनिशियलाइज़ेशन कोड में बदलाव करना होगा, ताकि वह न्यूयॉर्क शहर की किसी जगह पर सही ज़ूम लेवल पर फ़ोकस कर सके. ज़ूम लेवल 13 या 14 सही रहेगा.

सलाह: किसी जगह का अक्षांश और देशांतर जानने के लिए, maps.google.com का इस्तेमाल करके उस जगह को खोजें. इसके बाद, उस पर राइट क्लिक करें और दिखने वाले कॉन्टेक्स्ट मेन्यू में से ‘यहां क्या है?' चुनें.

इसके लिए, ऊपर दिए गए कोड ब्लॉक को नीचे दिए गए कोड से बदलें. इससे मैप का केंद्र एंपायर स्टेट बिल्डिंग पर सेट हो जाएगा और ज़ूम लेवल 14 पर सेट हो जाएगा:

<script>
      let map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 40.7484405, lng: -73.9878531},
          zoom: 14
        });
      }
</script>

इसके बाद, नतीजे देखने के लिए अपने ब्राउज़र में मैप को फिर से लोड करें.

ड्राइंग और विज़ुअलाइज़ेशन लाइब्रेरी लोड करना

अपने मैप में ड्रॉइंग की सुविधाएं जोड़ने के लिए, आपको Maps JavaScript API को लोड करने वाली स्क्रिप्ट में बदलाव करना होगा. इसके लिए, आपको एक ऐसा वैकल्पिक पैरामीटर जोड़ना होगा जो Google Maps Platform को ड्रॉइंग लाइब्रेरी चालू करने के लिए कहे.

इस कोडलैब में HeatmapLayer का भी इस्तेमाल किया गया है. इसलिए, विज़ुअलाइज़ेशन लाइब्रेरी का अनुरोध करने के लिए, आपको स्क्रिप्ट को भी अपडेट करना होगा. इसके लिए, libraries पैरामीटर जोड़ें.साथ ही, visualization और drawing लाइब्रेरी को कॉमा लगाकर अलग की गई वैल्यू के तौर पर डालें. उदाहरण के लिए, libraries=visualization,drawing

यह ऐसा दिखना चाहिए:

<script src='http://maps.googleapis.com/maps/api/js?libraries=visualization,drawing&callback=initMap&key=YOUR_API_KEY' async defer></script>

DrawingManager जोड़ना

क्वेरी के इनपुट के तौर पर, उपयोगकर्ता के बनाए गए शेप का इस्तेमाल करने के लिए, अपने मैप में DrawingManager जोड़ें. इसके लिए, Circle, Rectangle, और Polygon टूल चालू करें.

DrawingManager सेट अप कोड को एक नए फ़ंक्शन में डालना बेहतर होता है. इसलिए, index.html की अपनी कॉपी में यह काम करें:

1. DrawingManager बनाने के लिए, setUpDrawingTools() नाम का एक फ़ंक्शन जोड़ें. साथ ही, पेज में मौजूद मैप ऑब्जेक्ट को रेफ़रंस करने के लिए, इसकी map प्रॉपर्टी को सेट करें. इसके लिए, यह कोड इस्तेमाल करें.

google.maps.drawing.DrawingManager(options) को पास किए गए विकल्प, ड्रॉ किए गए शेप के लिए डिफ़ॉल्ट शेप ड्रॉइंग टाइप और डिसप्ले के विकल्प सेट करते हैं. मैप के जिन हिस्सों को क्वेरी के तौर पर भेजना है उनके लिए, शेप की ओपैसिटी शून्य होनी चाहिए. उपलब्ध विकल्पों के बारे में ज़्यादा जानने के लिए, DrawingManager के विकल्प देखें.

function setUpDrawingTools() {
  // Initialize drawing manager
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.CIRCLE,
    drawingControl: true,
    drawingControlOptions: {
      position: google.maps.ControlPosition.TOP_LEFT,
      drawingModes: [
        google.maps.drawing.OverlayType.CIRCLE,
        google.maps.drawing.OverlayType.POLYGON,
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    circleOptions: {
      fillOpacity: 0
    },
    polygonOptions: {
      fillOpacity: 0
    },
    rectangleOptions: {
      fillOpacity: 0
    }
  });
  drawingManager.setMap(map);
}

2. मैप ऑब्जेक्ट बनाने के बाद, अपने initMap() फ़ंक्शन में setUpDrawingTools() को कॉल करें

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
    zoom: 12
  });

  setUpDrawingTools();
}

3. index.html को फिर से लोड करें और देखें कि आपको ड्राइंग टूल दिख रहे हैं या नहीं. यह भी देखें कि इनका इस्तेमाल करके, सर्कल, रेक्टैंगल, और पॉलीगॉन शेप बनाए जा सकते हों.

सर्कल और रेक्टैंगल बनाने के लिए, क्लिक करके खींचने और छोड़ने की सुविधा का इस्तेमाल किया जा सकता है. हालांकि, पॉलीगॉन बनाने के लिए, हर वर्टेक्स पर क्लिक करना होता है. साथ ही, शेप को पूरा करने के लिए दो बार क्लिक करना होता है.

ड्रॉइंग इवेंट मैनेज करना

आपको कुछ कोड की ज़रूरत होगी, ताकि जब कोई उपयोगकर्ता कोई शेप बना ले, तो फ़ायर होने वाले इवेंट को हैंडल किया जा सके. ठीक उसी तरह, जैसे एसक्यूएल क्वेरी बनाने के लिए, आपको बनाए गए शेप के कोऑर्डिनेट की ज़रूरत होती है.

हम बाद में इसके लिए कोड जोड़ेंगे. हालांकि, फ़िलहाल हम rectanglecomplete, circlecomplete, और polygoncomplete इवेंट को हैंडल करने के लिए, तीन खाली इवेंट हैंडलर स्टब आउट करेंगे. इस चरण में हैंडलर को कोई कोड चलाने की ज़रूरत नहीं होती.

अपने setUpDrawingTools() फ़ंक्शन के आखिर में यह जोड़ें:

drawingManager.addListener('rectanglecomplete', rectangle => {
    // We will add code here in a later step.
});
drawingManager.addListener('circlecomplete', circle => {
  // We will add code here in a later step.
});

drawingManager.addListener('polygoncomplete', polygon => {
  // We will add code here in a later step.
});

इस कोड का काम करने वाला उदाहरण, repo की आपकी लोकल कॉपी में step2 फ़ोल्डर में देखा जा सकता है: step2/map.html.

6. BigQuery Client API का इस्तेमाल करना

Google BigQuery Client API की मदद से, अनुरोध बनाने, जवाबों को पार्स करने, और पुष्टि करने के लिए ज़रूरी छोटे-मोटे बदलाव वाले कई कोड लिखने से बचा जा सकता है. इस कोडलैब में, BigQuery API का इस्तेमाल Google APIs Client Library for JavaScript के ज़रिए किया जाता है. ऐसा इसलिए, क्योंकि हमें ब्राउज़र पर आधारित ऐप्लिकेशन डेवलप करना है.

इसके बाद, आपको वेब पेज में इस एपीआई को लोड करने के लिए कोड जोड़ना होगा. साथ ही, BigQuery के साथ इंटरैक्ट करने के लिए इसका इस्तेमाल करना होगा.

ध्यान दें: अपने ऐप्लिकेशन में, क्वेरी भेजने के लिए अपनी पसंद के किसी भी क्लाइंट का इस्तेमाल किया जा सकता है. BigQuery API, एचटीटीपी अनुरोधों के साथ काम करता है. साथ ही, अनुरोधों और जवाबों के लिए JSON डेटा का इस्तेमाल करता है.

JavaScript के लिए Google Client API जोड़ना

BigQuery के ख़िलाफ़ क्वेरी चलाने के लिए, Google Client API for Javascript का इस्तेमाल किया जाएगा. index.html की अपनी कॉपी (आपके work फ़ोल्डर में) में, इस तरह के <script> टैग का इस्तेमाल करके एपीआई लोड करें. Maps API को लोड करने वाले <script> टैग के ठीक नीचे टैग लगाएं:

<script src='https://apis.google.com/js/client.js'></script>

Google Client API लोड करने के बाद, उपयोगकर्ता को BigQuery में मौजूद डेटा ऐक्सेस करने की अनुमति दें. इसके लिए, OAuth 2.0 का इस्तेमाल किया जा सकता है. सबसे पहले, आपको Google Cloud Console प्रोजेक्ट में कुछ क्रेडेंशियल सेट अप करने होंगे.

OAuth 2.0 क्रेडेंशियल बनाना

1. Google Cloud Console में, नेविगेशन मेन्यू में जाकर, एपीआई और सेवाएं > क्रेडेंशियल को चुनें.

अपने क्रेडेंशियल सेट अप करने से पहले, आपको अनुमति वाली स्क्रीन के लिए कुछ कॉन्फ़िगरेशन जोड़ना होगा. यह स्क्रीन, आपके ऐप्लिकेशन के उस एंड यूज़र को दिखेगी जो आपके ऐप्लिकेशन को, उसकी ओर से BigQuery डेटा ऐक्सेस करने की अनुमति देगा.

इसके लिए, OAuth के लिए सहमति वाली स्क्रीन टैब पर क्लिक करें. 2. आपको इस टोकन के स्कोप में BigQuery API जोड़ना होगा. 'Google API के लिए स्कोप' सेक्शन में जाकर, स्कोप जोड़ें बटन पर क्लिक करें. 3. सूची में, ../auth/bigquery स्कोप वाली Big Query API एंट्री के बगल में मौजूद बॉक्स को चुनें. 4. जोड़ें पर क्लिक करें. 5. ‘ऐप्लिकेशन का नाम' फ़ील्ड में कोई नाम डालें. 6. अपनी सेटिंग सेव करने के लिए, सेव करें पर क्लिक करें. 7. इसके बाद, आपको अपना OAuth क्लाइंट आईडी बनाना होगा. इसके लिए, क्रेडेंशियल बनाएं पर क्लिक करें:

8. ड्रॉपडाउन मेन्यू में, OAuth क्लाइंट आईडी पर क्लिक करें.
9. ऐप्लिकेशन टाइप में जाकर, वेब ऐप्लिकेशन चुनें.
10. 'ऐप्लिकेशन का नाम' फ़ील्ड में, अपने प्रोजेक्ट का नाम टाइप करें. उदाहरण के लिए, "BigQuery और Maps".
11. पाबंदियां में जाकर, अनुमति वाले JavaScript ऑरिजिन फ़ील्ड में, पोर्ट नंबर के साथ लोकलहोस्ट का यूआरएल डालें. उदाहरण के लिए: http://localhost:8887

अहम जानकारी: आपको ऑरिजिन यूआरएल को ‘127.0.0.1' के बजाय ‘localhost' के तौर पर डालना होगा.

12. बनाएं बटन पर क्लिक करें.

आपको एक पॉप-अप दिखेगा. इसमें क्लाइंट आईडी और क्लाइंट सीक्रेट दिखेगा. BigQuery के ख़िलाफ़ पुष्टि करने के लिए, आपको क्लाइंट आईडी की ज़रूरत होगी. इसे कॉपी करें और work/index.html में clientId नाम के नए ग्लोबल JavaScript वैरिएबल के तौर पर चिपकाएं.

let clientId = 'YOUR_CLIENT_ID';

7. अनुमति देना और डेटा लेयर में इवेंट बनाने की प्रोसेस

मैप शुरू करने से पहले, आपके वेब पेज को उपयोगकर्ता को BigQuery ऐक्सेस करने की अनुमति देनी होगी. इस उदाहरण में, हमने OAuth 2.0 का इस्तेमाल किया है. इसके बारे में JavaScript Client API के दस्तावेज़ के ऑथराइज़ेशन सेक्शन में बताया गया है. क्वेरी भेजने के लिए, आपको OAuth क्लाइंट आईडी और अपने प्रोजेक्ट आईडी का इस्तेमाल करना होगा.

जब Google Client API को वेब पेज में लोड किया जाता है, तब आपको यह तरीका अपनाना होगा:

• उपयोगकर्ता को अनुमति दें.
• अगर अनुमति मिली है, तो BigQuery API लोड करें.
• मैप को लोड और शुरू करें.

पूरा होने के बाद एचटीएमएल पेज कैसा दिखेगा, इसका उदाहरण देखने के लिए step3/map.html देखें.

उपयोगकर्ता को अनुमति देना

ऐप्लिकेशन के असली उपयोगकर्ता को, ऐप्लिकेशन को यह अनुमति देनी होगी कि वह उसकी ओर से BigQuery में मौजूद डेटा को ऐक्सेस कर सके. इसके लिए, JavaScript के लिए Google Client API, OAuth लॉजिक को मैनेज करता है.

असल दुनिया में, आपके पास अनुमति देने के चरण को इंटिग्रेट करने के कई विकल्प होते हैं.

उदाहरण के लिए, किसी बटन जैसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट से authorize() को कॉल किया जा सकता है. इसके अलावा, पेज लोड होने पर भी ऐसा किया जा सकता है. यहां हमने Google Client API for JavaScript लोड होने के बाद, उपयोगकर्ता को अनुमति देने का विकल्प चुना है. इसके लिए, हमने gapi.load()तरीके में कॉलबैक फ़ंक्शन का इस्तेमाल किया है.

<script> टैग के तुरंत बाद कुछ ऐसा कोड लिखें जो JavaScript के लिए Google Client API को लोड करता हो. इससे क्लाइंट लाइब्रेरी और पुष्टि करने वाले मॉड्यूल, दोनों को लोड किया जा सकेगा. इससे हम उपयोगकर्ता की तुरंत पुष्टि कर पाएंगे.

<script src='https://apis.google.com/js/client.js'></script>
<script type='text/javascript'>
  gapi.load('client:auth', authorize);
</script>

ध्यान दें: अनुमति देने की प्रोसेस में पॉप-अप विंडो का इस्तेमाल किया जाता है. इसलिए, पहली बार कोड चलाने पर, यह विंडो ब्लॉक न हो, यह पक्का करें.

अनुमति मिलने पर, BigQuery API लोड करें

उपयोगकर्ता को अनुमति मिलने के बाद, BigQuery API लोड करें.

सबसे पहले, gapi.auth.authorize() को कॉल करें. इसके लिए, पिछले चरण में जोड़ा गया clientId वैरिएबल इस्तेमाल करें. handleAuthResult नाम के कॉलबैक फ़ंक्शन में रिस्पॉन्स को हैंडल करें.

immediate पैरामीटर से यह कंट्रोल किया जाता है कि उपयोगकर्ता को पॉप-अप दिखाया जाए या नहीं. अगर उपयोगकर्ता को पहले ही अनुमति मिल चुकी है, तो अनुमति मांगने वाला पॉप-अप न दिखाने के लिए, इसे true पर सेट करें.

अपने पेज पर handleAuthResult() नाम का एक फ़ंक्शन जोड़ें. फ़ंक्शन को authresult पैरामीटर लेना होगा. इससे, आपको यह तय करने में मदद मिलेगी कि उपयोगकर्ता को अनुमति मिली है या नहीं. इसके आधार पर, लॉजिक के फ़्लो को कंट्रोल किया जा सकेगा.

अगर उपयोगकर्ता की पुष्टि हो जाती है, तो BigQuery API को लोड करने के लिए, loadApi नाम का एक फ़ंक्शन भी जोड़ें.

handleAuthResult() फ़ंक्शन में लॉजिक जोड़ें, ताकि अगर फ़ंक्शन को authResult ऑब्जेक्ट पास किया जाता है और ऑब्जेक्ट की error प्रॉपर्टी की वैल्यू false है, तो loadApi() को कॉल किया जा सके.

gapi.client.load() तरीके का इस्तेमाल करके BigQuery API को लोड करने के लिए, loadApi() फ़ंक्शन में कोड जोड़ें.

let clientId = 'your-client-id-here';
let scopes = 'https://www.googleapis.com/auth/bigquery';

// Check if the user is authorized.
function authorize(event) {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: false}, handleAuthResult);
  return false;
}

// If authorized, load BigQuery API
function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    loadApi();
    return;
  }
  console.error('Not authorized.')  
}

// Load BigQuery client API
function loadApi(){
  gapi.client.load('bigquery', 'v2');
}

मैप लोड करना

आखिरी चरण में, मैप को शुरू करना होता है. इसके लिए, आपको लॉजिक के क्रम में थोड़ा बदलाव करना होगा. फ़िलहाल, यह Maps API JavaScript के लोड होने पर शुरू होता है.

इसके लिए, gapi.client ऑब्जेक्ट पर load() वाले तरीके के बाद, then() वाले तरीके से initMap() फ़ंक्शन को कॉल करें.

// Load BigQuery client API
function loadApi(){
  gapi.client.load('bigquery', 'v2').then(
   () => initMap()
  );
}

अहम जानकारी: Maps API के JavaScript टैग से &callback=initMap पैरामीटर हटाएं. BigQuery API लोड होने के बाद, अब initMap को loadApi() फ़ंक्शन से कॉल किया जाता है.

8. BigQuery API के कॉन्सेप्ट

BigQuery API कॉल आम तौर पर कुछ सेकंड में पूरे हो जाते हैं, लेकिन हो सकता है कि आपको तुरंत जवाब न मिले. आपको BigQuery को पोल करने के लिए कुछ लॉजिक की ज़रूरत होती है, ताकि लंबे समय तक चलने वाले जॉब की स्थिति का पता लगाया जा सके. साथ ही, जॉब पूरा होने पर ही नतीजे फ़ेच किए जा सकें.

इस चरण का पूरा कोड, step4/map.html में है.

अनुरोध भेजना

एपीआई का इस्तेमाल करके क्वेरी भेजने के लिए, work/index.html में एक JavaScript फ़ंक्शन जोड़ें. साथ ही, क्वेरी करने के लिए टेबल वाले BigQuery डेटासेट और प्रोजेक्ट की वैल्यू सेव करने के लिए कुछ वैरिएबल जोड़ें. इसके अलावा, उस प्रोजेक्ट का आईडी जोड़ें जिसके लिए बिल भेजा जाएगा.

ध्यान दें: कोड चलाने से पहले, 'datasetId', 'publicProjectId' और 'billingProjectId' को BigQuery के काम के प्रोजेक्ट की वैल्यू से बदलें. इसके बारे में अगले चरण में बताया जाएगा.

let datasetId = 'your_dataset_id';
let billingProjectId = 'your_project_id';
let publicProjectId = 'bigquery-public-data';

function sendQuery(queryString){
  let request = gapi.client.bigquery.jobs.query({
      'query': queryString,
      'timeoutMs': 30000,
      'datasetId': datasetId,
      'projectId': billingProjectId,
      'useLegacySql':false
  });
  request.execute(response => {
      //code to handle the query response goes here.
  });
}

ध्यान दें: डेटासेट, टेबल का एक कलेक्शन होता है. ज़्यादा जानकारी के लिए, BigQuery का दस्तावेज़ देखें.

किसी नौकरी का स्टेटस देखना

नीचे दिए गए checkJobStatus फ़ंक्शन में दिखाया गया है कि get एपीआई के तरीके और मूल क्वेरी अनुरोध से मिले jobId का इस्तेमाल करके, किसी जॉब की स्थिति को समय-समय पर कैसे देखा जाता है. यहां एक ऐसा उदाहरण दिया गया है जो तब तक हर 500 मिलीसेकंड में चलता है, जब तक काम पूरा नहीं हो जाता.

let jobCheckTimer;

function checkJobStatus(jobId){
  let request = gapi.client.bigquery.jobs.get({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response =>{
    if (response.status.errorResult){
      // Handle any errors.
      console.log(response.status.error);
      return;
    }

    if (response.status.state == 'DONE'){
      // Get the results.
      clearTimeout(jobCheckTimer);
      getQueryResults(jobId);
      return;
    }
    // Not finished, check again in a moment.
    jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]);    
  });
}

sendQuery वाले तरीके में बदलाव करें, ताकि request.execute() कॉल में checkJobStatus() वाले तरीके को कॉलबैक के तौर पर कॉल किया जा सके. जॉब आईडी को checkJobStatus पर पास करें. इसे रिस्पॉन्स ऑब्जेक्ट के ज़रिए jobReference.jobId के तौर पर दिखाया जाता है.

function sendQuery(queryString){
  let request = gapi.client.bigquery.jobs.query({
      'query': queryString,
      'timeoutMs': 30000,
      'datasetId': datasetId,
      'projectId': billingProjectId,
      'useLegacySql':false
  });
  request.execute(response => checkJobStatus(response.jobReference.jobId));
}

क्वेरी के नतीजे पाना

क्वेरी पूरी होने के बाद उसके नतीजे पाने के लिए, jobs.getQueryResults API कॉल का इस्तेमाल करें. अपने पेज में getQueryResults() नाम का एक फ़ंक्शन जोड़ें, जो jobId पैरामीटर को स्वीकार करता है:

function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    // Do something with the results.
  })
}

9. BigQuery API की मदद से, जगह की जानकारी से जुड़े डेटा को क्वेरी करना

BigQuery में मौजूद डेटा के लिए, स्पेस से जुड़ी क्वेरी चलाने के लिए SQL का इस्तेमाल तीन तरीकों से किया जा सकता है:

• रेक्टैंगल (इसे बाउंडिंग बॉक्स भी कहा जाता है) के हिसाब से चुनें,
• दायरे के हिसाब से चुनें, और
• उपयोगकर्ता के तय किए गए फ़ंक्शन की शानदार सुविधा का इस्तेमाल करें.

BigQuery लेगसी एसक्यूएल के रेफ़रंस में, ‘ऐडवांस उदाहरण' सेक्शन में, गणितीय फ़ंक्शन के तहत बाउंडिंग बॉक्स और रेडियस क्वेरी के उदाहरण दिए गए हैं.

बाउंडिंग बॉक्स और रेडियस क्वेरी के लिए, BigQuery API के query तरीके का इस्तेमाल किया जा सकता है. हर क्वेरी के लिए एसक्यूएल बनाएं और उसे पिछले चरण में बनाए गए sendQuery फ़ंक्शन को पास करें.

इस चरण के लिए कोड का एक उदाहरण, step4/map.html में दिया गया है.

रेक्टैंगल क्वेरी

मैप पर BigQuery डेटा दिखाने का सबसे आसान तरीका यह है कि उन सभी लाइनों के लिए अनुरोध किया जाए जिनमें अक्षांश और देशांतर, आयत के अंदर आते हैं. इसके लिए, तुलना में 'इससे कम' और 'इससे ज़्यादा' ऑपरेटर का इस्तेमाल करें. यह मौजूदा मैप व्यू या मैप पर बनाया गया कोई शेप हो सकता है.

उपयोगकर्ता की ओर से बनाए गए किसी शेप का इस्तेमाल करने के लिए, index.html में मौजूद कोड को बदलें. इससे, रेक्टैंगल पूरा होने पर फ़ायर होने वाले ड्रॉइंग इवेंट को मैनेज किया जा सकेगा. इस उदाहरण में, कोड, मैप के निर्देशांकों में रेक्टैंगल की सीमा को दिखाने वाले ऑब्जेक्ट को पाने के लिए, रेक्टैंगल ऑब्जेक्ट पर getBounds() का इस्तेमाल करता है. इसके बाद, इसे rectangleQuery नाम के फ़ंक्शन को पास करता है:

drawingManager.addListener('rectanglecomplete', rectangle => rectangleQuery(rectangle.getBounds()));

rectangleQuery फ़ंक्शन को सिर्फ़ ऊपर दाएं (उत्तर-पूर्व) और नीचे बाएं (दक्षिण-पश्चिम) के निर्देशांकों का इस्तेमाल करना होता है. इससे आपकी BigQuery टेबल की हर लाइन की तुलना, कम या ज़्यादा से की जा सकती है. यहां एक उदाहरण दिया गया है. इसमें ऐसी टेबल को क्वेरी किया गया है जिसमें 'pickup_latitude' और 'pickup_longitude' नाम के कॉलम हैं. इनमें जगह की वैल्यू सेव होती हैं.

BigQuery टेबल तय करना

BigQuery API का इस्तेमाल करके किसी टेबल को क्वेरी करने के लिए, आपको अपनी एसक्यूएल क्वेरी में टेबल का पूरा नाम देना होगा. स्टैंडर्ड एसक्यूएल में फ़ॉर्मैट project.dataset.tablename है. लेगसी एसक्यूएल में यह project.dataset.tablename है.

NYC टैक्सी की यात्राओं से जुड़ी कई टेबल उपलब्ध हैं. इन्हें देखने के लिए, BigQuery वेब कंसोल पर जाएं और "सार्वजनिक डेटासेट" मेन्यू आइटम को बड़ा करें. new_york नाम का डेटासेट ढूंढें और टेबल देखने के लिए उसे बड़ा करें. Yellow Taxi trips टेबल चुनें: bigquery-public-data.new_york_taxi_trips.tlc_yellow_trips_2016).

प्रोजेक्ट आईडी के बारे में बताना

एपीआई कॉल में, आपको बिलिंग के लिए अपने Google Cloud Platform प्रोजेक्ट का नाम बताना होगा. इस कोडलैब में, यह टेबल वाले प्रोजेक्ट से अलग प्रोजेक्ट है. अगर आपने डेटा अपलोड करके अपने प्रोजेक्ट में कोई टेबल बनाई थी, तो यह प्रोजेक्ट आईडी, आपके एसक्यूएल स्टेटमेंट में मौजूद प्रोजेक्ट आईडी के जैसा ही होगा.

अपने कोड में JavaScript वैरिएबल जोड़ें. इससे, आपको उस Public Datasets प्रोजेक्ट के रेफ़रंस मिलेंगे जिसमें क्वेरी की जा रही टेबल मौजूद है. साथ ही, आपको टेबल का नाम और डेटासेट का नाम भी मिलेगा. आपको अपने बिलिंग प्रोजेक्ट आईडी को रेफ़र करने के लिए, एक अलग वैरिएबल की भी ज़रूरत होगी.

index.html की अपनी कॉपी में, billingProjectId, publicProjectId, datasetId और tableName नाम के ग्लोबल JavaScript वैरिएबल जोड़ें.

BigQuery के सार्वजनिक डेटासेट प्रोजेक्ट से मिली जानकारी का इस्तेमाल करके, 'publicProjectId', 'datasetId', और 'tableName' वैरिएबल को शुरू करें. billingProjectId को अपने प्रोजेक्ट आईडी से शुरू करें. यह वही आईडी है जिसे आपने इस कोडलैब में "सेट अप करना" सेक्शन में बनाया था.

let billingProjectId = 'YOUR_PROJECT_ID';
let publicProjectId = 'bigquery-public-data';
let datasetId = 'new_york_taxi_trips';
let tableName = 'tlc_yellow_trips_2016';

ध्यान दें: हर क्वेरी के लिए, हर महीने मिलने वाले 1 टीबी के मुफ़्त कोटे का कुछ हिस्सा इस्तेमाल किया जाएगा. हर BigQuery क्वेरी से पूरी टेबल स्कैन होगी. इसलिए, क्वेरी करने से पहले टेबल का साइज़ देखें और सिर्फ़ उन कॉलम के बारे में बताएं जिनकी आपको ज़रूरत है. LIMIT स्टेटमेंट का इस्तेमाल करके, वापस लाए गए डेटा की मात्रा को कम करें.

अब अपने कोड में दो फ़ंक्शन जोड़ें. एक फ़ंक्शन SQL जनरेट करने के लिए और दूसरा फ़ंक्शन, पिछले चरण में बनाए गए sendQuery फ़ंक्शन का इस्तेमाल करके BigQuery को क्वेरी भेजने के लिए.

पहले फ़ंक्शन को rectangleSQL() कहा जाना चाहिए. इसे दो आर्ग्युमेंट स्वीकार करने चाहिए. ये आर्ग्युमेंट, मैप कोऑर्डिनेट में रेक्टैंगल के कोनों को दिखाने वाले google.Maps.LatLng ऑब्जेक्ट का एक पेयर होना चाहिए.

दूसरे फ़ंक्शन को rectangleQuery() कहा जाना चाहिए. इससे क्वेरी के टेक्स्ट को sendQuery फ़ंक्शन में पास किया जाता है.

let billingProjectId = 'YOUR_PROJECT_ID';
let publicProjectId = 'bigquery-public-data';
let datasetId = 'new_york';
let tableName = 'tlc_yellow_trips_2016';

function rectangleQuery(latLngBounds){
  let queryString = rectangleSQL(latLngBounds.getNorthEast(), latLngBounds.getSouthWest());
  sendQuery(queryString);
}

function rectangleSQL(ne, sw){
  let queryString = 'SELECT pickup_latitude, pickup_longitude '
  queryString +=  'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '`'
  queryString += ' WHERE pickup_latitude > ' + sw.lat();
  queryString += ' AND pickup_latitude < ' + ne.lat();
  queryString += ' AND pickup_longitude > ' + sw.lng();
  queryString += ' AND pickup_longitude < ' + ne.lng();
  return queryString;
}

इस समय, आपके पास इतना कोड है कि उपयोगकर्ता की ओर से बनाए गए रेक्टैंगल में मौजूद सभी लाइनों के लिए, BigQuery को क्वेरी भेजी जा सके. सर्कल और फ़्रीहैंड शेप के लिए, क्वेरी करने के अन्य तरीके जोड़ने से पहले, आइए देखते हैं कि क्वेरी से मिले डेटा को कैसे मैनेज किया जाता है.

ध्यान दें: Google Maps या वेब मेर्काटोर प्रोजेक्शन वाले किसी भी मैप पर आयताकार शेप, ज़मीन पर आयताकार जगह को नहीं दिखाता है. ऐसा इसलिए होता है, क्योंकि देशांतर रेखाएं ध्रुवों की ओर एक-दूसरे से मिलती हैं. Google Maps, भूमध्य रेखा के उत्तर या दक्षिण में 85 डिग्री से ज़्यादा के अक्षांश वाले इलाकों को नहीं दिखाता है. ज़मीन का जितना ज़्यादा हिस्सा कवर किया जाएगा, ज़मीन पर मौजूद चीज़ों की असल बनावट और क्षेत्रफल में उतना ही ज़्यादा अंतर आएगा. हालांकि, कुछ किलोमीटर की दूरी पर इसका असर न के बराबर होना चाहिए.

10. जवाब को विज़ुअलाइज़ किया जा रहा है

BigQuery टेबल बहुत बड़ी हो सकती हैं. इनमें पेटाबाइट में डेटा होता है. साथ ही, इनमें हर सेकंड लाखों पंक्तियां जुड़ सकती हैं. इसलिए, यह ज़रूरी है कि लौटाए गए डेटा की मात्रा को कम किया जाए, ताकि उसे मैप पर दिखाया जा सके. नतीजों के बहुत बड़े सेट (हज़ारों या उससे ज़्यादा लाइनें) में मौजूद हर लाइन की जगह की जानकारी देने से, मैप को पढ़ा नहीं जा सकेगा. SQL क्वेरी और मैप, दोनों में जगहों को इकट्ठा करने के कई तरीके हैं. साथ ही, किसी क्वेरी से मिलने वाले नतीजों को सीमित किया जा सकता है.

इस चरण का पूरा कोड step5/map.html में उपलब्ध है.

इस कोडलैब के लिए, अपने वेब पेज पर ट्रांसफ़र किए गए डेटा को कम रखने के लिए, rectangleSQL() फ़ंक्शन में बदलाव करें. ऐसा करने के लिए, एक स्टेटमेंट जोड़ें, ताकि जवाब में सिर्फ़ 10,000 लाइनें शामिल हों. नीचे दिए गए उदाहरण में, इसे recordLimit नाम के ग्लोबल वैरिएबल में बताया गया है, ताकि सभी क्वेरी फ़ंक्शन एक ही वैल्यू का इस्तेमाल कर सकें.

let recordLimit = 10000;
function rectangleSQL(ne, sw){
  var queryString = 'SELECT pickup_latitude, pickup_longitude '
  queryString +=  'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '`'
  queryString += ' WHERE pickup_latitude > ' + sw.lat();
  queryString += ' AND pickup_latitude < ' + ne.lat();
  queryString += ' AND pickup_longitude > ' + sw.lng();
  queryString += ' AND pickup_longitude < ' + ne.lng();
  queryString += ' LIMIT ' + recordLimit;
  return queryString;
}

जगहों की डेंसिटी को विज़ुअलाइज़ करने के लिए, हीटमैप का इस्तेमाल किया जा सकता है. Maps JavaScript API में इस काम के लिए, HeatmapLayer क्लास मौजूद है. HeatmapLayer, अक्षांश और देशांतर के निर्देशांकों का कलेक्शन लेता है. इसलिए, क्वेरी से मिली लाइनों को हीटमैप में बदलना बहुत आसान है.

getQueryResults फ़ंक्शन में, response.result.rows ऐरे को doHeatMap() नाम के नए JavaScript फ़ंक्शन में पास करें. यह फ़ंक्शन, हीटमैप बनाएगा.

हर लाइन में f नाम की एक प्रॉपर्टी होगी. यह कॉलम का एक कलेक्शन होता है. हर कॉलम में एक v प्रॉपर्टी होगी, जिसमें वैल्यू मौजूद होगी.

आपके कोड को हर लाइन के कॉलम में लूप करना होगा और वैल्यू निकालनी होंगी.

एसक्यूएल क्वेरी में, आपने सिर्फ़ टैक्सी पिकअप के अक्षांश और देशांतर की वैल्यू मांगी हैं. इसलिए, जवाब में सिर्फ़ दो कॉलम होंगे.

जब आपने हीटमैप लेयर को पोज़िशन का ऐरे असाइन कर दिया हो, तब setMap() को कॉल करना न भूलें. इससे यह मैप पर दिखने लगेगा.

यहां एक उदाहरण दिया गया है:

function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => doHeatMap(response.result.rows))
}

let heatmap;

function doHeatMap(rows){
  let heatmapData = [];
  if (heatmap != null){
    heatmap.setMap(null);
  }
  for (let i = 0; i < rows.length; i++) {
      let f = rows[i].f;
      let coords = { lat: parseFloat(f[0].v), lng: parseFloat(f[1].v) };
      let latLng = new google.maps.LatLng(coords);
      heatmapData.push(latLng);
  }
  heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData
  });
  heatmap.setMap(map);
}

इस समय, आपके पास ये विकल्प होने चाहिए:

• पेज खोलें और BigQuery के लिए अनुमति दें
• न्यूयॉर्क में कहीं भी एक आयत बनाओ
• क्वेरी के नतीजों को हीटमैप के तौर पर विज़ुअलाइज़ करें.

यहां 2016 के NYC Yellow Taxi के डेटा के आधार पर, रेक्टैंगल क्वेरी के नतीजे का उदाहरण दिया गया है. इसे हीटमैप के तौर पर दिखाया गया है. इस इमेज में, जुलाई के महीने में शनिवार के दिन एंपायर स्टेट बिल्डिंग के आस-पास पिकअप की जानकारी दिखाई गई है:

11. किसी पॉइंट के आस-पास के दायरे के हिसाब से क्वेरी करना

रेडियस क्वेरी काफ़ी मिलती-जुलती हैं. BigQuery के लेगसी एसक्यूएल गणितीय फ़ंक्शन का इस्तेमाल करके, हैवर्सिन फ़ॉर्मूला का इस्तेमाल करके एसक्यूएल क्वेरी बनाई जा सकती है. यह फ़ॉर्मूला, पृथ्वी की सतह पर गोलाकार क्षेत्र का अनुमान लगाता है.

रेक्टैंगल के लिए इस्तेमाल की गई तकनीक का इस्तेमाल करके, OverlayComplete इवेंट को मैनेज किया जा सकता है. इससे, उपयोगकर्ता के बनाए गए सर्कल का सेंटर और रेडियस मिलता है. साथ ही, क्वेरी के लिए SQL को उसी तरीके से बनाया जा सकता है.

इस चरण के कोड का एक उदाहरण, कोड रिपॉज़िटरी में step6/map.html के तौर पर शामिल किया गया है.

drawingManager.addListener('circlecomplete', circle => circleQuery(circle));

index.html की अपनी कॉपी में, दो नए खाली फ़ंक्शन जोड़ें: circleQuery() और haversineSQL().

इसके बाद, एक circlecomplete इवेंट हैंडलर जोड़ें. यह हैंडलर, सेंटर और रेडियस को circleQuery(). नाम के नए फ़ंक्शन में पास करता है

circleQuery() फ़ंक्शन, क्वेरी के लिए एसक्यूएल बनाने के लिए haversineSQL() को कॉल करेगा. इसके बाद, यहां दिए गए उदाहरण कोड के मुताबिक, sendQuery() फ़ंक्शन को कॉल करके क्वेरी भेजेगा.

function circleQuery(circle){
  let queryString = haversineSQL(circle.getCenter(), circle.radius);
  sendQuery(queryString);
}

// Calculate a circular area on the surface of a sphere based on a center and radius.
function haversineSQL(center, radius){
  let queryString;
  let centerLat = center.lat();
  let centerLng = center.lng();
  let kmPerDegree = 111.045;

  queryString = 'CREATE TEMPORARY FUNCTION Degrees(radians FLOAT64) RETURNS FLOAT64 LANGUAGE js AS ';
  queryString += '""" ';
  queryString += 'return (radians*180)/(22/7);';
  queryString += '"""; ';

  queryString += 'CREATE TEMPORARY FUNCTION Radians(degrees FLOAT64) RETURNS FLOAT64 LANGUAGE js AS';
  queryString += '""" ';
  queryString += 'return (degrees*(22/7))/180;';
  queryString += '"""; ';

  queryString += 'SELECT pickup_latitude, pickup_longitude '
  queryString += 'FROM `' + publicProjectId +'.' + datasetId + '.' + tableName + '` ';
  queryString += 'WHERE '
  queryString += '(' + kmPerDegree + ' * DEGREES( ACOS( COS( RADIANS('
  queryString += centerLat;
  queryString += ') ) * COS( RADIANS( pickup_latitude ) ) * COS( RADIANS( ' + centerLng + ' ) - RADIANS('
  queryString += ' pickup_longitude ';
  queryString += ') ) + SIN( RADIANS('
  queryString += centerLat;
  queryString += ') ) * SIN( RADIANS( pickup_latitude ) ) ) ) ) ';

  queryString += ' < ' + radius/1000;
  queryString += ' LIMIT ' + recordLimit;
  return queryString;
}

इसे आज़माएं!

ऊपर दिया गया कोड जोड़ें और मैप के किसी हिस्से को चुनने के लिए, ‘सर्कल' टूल का इस्तेमाल करें. नतीजा कुछ ऐसा दिखना चाहिए:

12. किसी भी शेप के बारे में क्वेरी करना

रीकैप: एसक्यूएल, आयतों और वृत्तों के अलावा किसी अन्य आकार का इस्तेमाल करके क्वेरी करने की सुविधा नहीं देता. BigQuery में कोई नेटिव ज्यामिति डेटा टाइप नहीं होता. इसलिए, पॉलीगॉन शेप का इस्तेमाल करके क्वेरी चलाने के लिए, आपको सामान्य एसक्यूएल क्वेरी से अलग तरीके का इस्तेमाल करना होगा.

BigQuery की एक बहुत ही काम की सुविधा है, जिसका इस्तेमाल इसके लिए किया जा सकता है. यह सुविधा, उपयोगकर्ता के तय किए गए फ़ंक्शन (यूडीएफ़) हैं. यूडीएफ़, एसक्यूएल क्वेरी के अंदर JavaScript कोड को एक्ज़ीक्यूट करते हैं.

इस चरण के लिए काम करने वाला कोड, step7/map.html में है.

BigQuery API में यूडीएफ़

यूडीएफ़ के लिए BigQuery API का तरीका, वेब कंसोल से थोड़ा अलग है: आपको jobs.insert method को कॉल करना होगा.

एपीआई के ज़रिए स्टैंडर्ड एसक्यूएल क्वेरी के लिए, उपयोगकर्ता के तय किए गए फ़ंक्शन का इस्तेमाल करने के लिए सिर्फ़ एक एसक्यूएल स्टेटमेंट की ज़रूरत होती है. useLegacySql की वैल्यू को false पर सेट करना ज़रूरी है. नीचे दिए गए JavaScript के उदाहरण में, एक ऐसा फ़ंक्शन दिखाया गया है जो नई नौकरी डालने के लिए अनुरोध ऑब्जेक्ट बनाता है और भेजता है. इस मामले में, यह उपयोगकर्ता के तय किए गए फ़ंक्शन वाली क्वेरी है.

इस तरीके का एक उदाहरण, step7/map.html में दिया गया है.

function polygonQuery(polygon) {
  let request = gapi.client.bigquery.jobs.insert({
    'projectId' : billingProjectId,
      'resource' : {
        'configuration':
          {
            'query':
            {
              'query': polygonSql(polygon),
              'useLegacySql': false
            }
          }
      }
  });
  request.execute(response => checkJobStatus(response.jobReference.jobId));
}

एसक्यूएल क्वेरी इस तरह बनाई जाती है:

function polygonSql(poly){
  let queryString = 'CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64) ';
  queryString += 'RETURNS BOOL LANGUAGE js AS """ ';
  queryString += 'var polygon=' + JSON.stringify(poly) + ';';
  queryString += 'var vertx = [];';
  queryString += 'var verty = [];';
  queryString += 'var nvert = 0;';
  queryString += 'var testx = longitude;';
  queryString += 'var testy = latitude;';
  queryString += 'for(coord in polygon){';
  queryString += '  vertx[nvert] = polygon[coord][0];';
  queryString += '  verty[nvert] = polygon[coord][1];';
  queryString += '  nvert ++;';
  queryString += '}';
  queryString += 'var i, j, c = 0;';
  queryString += 'for (i = 0, j = nvert-1; i < nvert; j = i++) {';
  queryString += '  if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){';
  queryString += '    c = !c;';
  queryString += '  }';
  queryString += '}';
  queryString += 'return c;';
  queryString += '"""; ';
  queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime ';
  queryString += 'FROM `' + publicProjectId + '.' + datasetId + '.' + tableName + '` ';
  queryString += 'WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE ';
  queryString += 'LIMIT ' + recordLimit;
  return queryString;
}

यहां दो चीज़ें हो रही हैं. सबसे पहले, कोड CREATE TEMPORARY FUNCTION स्टेटमेंट बना रहा है. यह स्टेटमेंट, JavaScript कोड को शामिल करता है. इससे यह पता चलता है कि कोई पॉइंट, पॉलीगॉन के अंदर है या नहीं. पॉलीगॉन के कोऑर्डिनेट डालने के लिए, JSON.stringify(poly) मेथड कॉल का इस्तेमाल किया जाता है. इससे x,y कोऑर्डिनेट पेयर की JavaScript ऐरे को स्ट्रिंग में बदला जाता है. पॉलीगॉन ऑब्जेक्ट को SQL बनाने वाले फ़ंक्शन में आर्ग्युमेंट के तौर पर पास किया जाता है.

इसके बाद, कोड मुख्य एसक्यूएल SELECT स्टेटमेंट बनाता है. इस उदाहरण में, WHERE एक्सप्रेशन में यूडीएफ़ को कॉल किया गया है.

Maps API के साथ इंटिग्रेट करना

Maps API की ड्रॉइंग लाइब्रेरी के साथ इसका इस्तेमाल करने के लिए, हमें उपयोगकर्ता की ओर से बनाए गए पॉलीगॉन को सेव करना होगा. साथ ही, इसे SQL क्वेरी के यूडीएफ़ वाले हिस्से में पास करना होगा.

सबसे पहले, हमें polygoncomplete ड्राइंग इवेंट को हैंडल करना होगा, ताकि हमें शेप के निर्देशांकों को देशांतर और अक्षांश के जोड़े के ऐरे के तौर पर मिल सकें:

drawingManager.addListener('polygoncomplete', polygon => {
  let path = polygon.getPaths().getAt(0);
  let queryPolygon = path.map(element => {
    return [element.lng(), element.lat()];
  });
  polygonQuery(queryPolygon);
});

इसके बाद, polygonQuery फ़ंक्शन, यूडीएफ़ JavaScript फ़ंक्शन को स्ट्रिंग के तौर पर बना सकता है. साथ ही, एसक्यूएल स्टेटमेंट भी बना सकता है, जो यूडीएफ़ फ़ंक्शन को कॉल करेगा.

इसका काम करने वाला उदाहरण देखने के लिए, step7/map.html देखें.

आउटपुट का उदाहरण

यहां BigQuery में, फ़्रीहैंड पॉलीगॉन का इस्तेमाल करके 2016 के NYC TLC येलो टैक्सी के डेटा से पिकअप की क्वेरी करने का उदाहरण दिया गया है. इसमें चुने गए डेटा को हीटमैप के तौर पर दिखाया गया है.

13. ज़्यादा जानकारी

इस कोडलैब को और बेहतर बनाने के लिए, यहां कुछ सुझाव दिए गए हैं. इनकी मदद से, डेटा के अन्य पहलुओं को भी देखा जा सकता है. आपको कोड रिपॉज़िटरी में, step8/map.html पर इन आइडिया का एक उदाहरण मिल सकता है.

मैपिंग में गिरावट

अब तक, हमने सिर्फ़ पिक अप करने की जगहों को मैप किया है. dropoff_latitude और dropoff_longitude कॉलम का अनुरोध करके और हीटमैप कोड में बदलाव करके, इन कॉलम को प्लॉट किया जा सकता है. इससे आपको यह पता चल सकता है कि किसी खास जगह से शुरू हुई टैक्सी यात्राएं कहां-कहां गईं.

उदाहरण के लिए, आइए देखते हैं कि जब लोग एंपायर स्टेट बिल्डिंग के आस-पास से टैक्सी बुक करते हैं, तो टैक्सी उन्हें कहां छोड़ती हैं.

पिकअप की जगह के साथ-साथ इन कॉलम का अनुरोध करने के लिए, polygonSql() में SQL स्टेटमेंट का कोड बदलें.

function polygonSql(poly){
  let queryString = 'CREATE TEMPORARY FUNCTION pointInPolygon(latitude FLOAT64, longitude FLOAT64) ';
  queryString += 'RETURNS BOOL LANGUAGE js AS """ ';
  queryString += 'var polygon=' + JSON.stringify(poly) + ';';
  queryString += 'var vertx = [];';
  queryString += 'var verty = [];';
  queryString += 'var nvert = 0;';
  queryString += 'var testx = longitude;';
  queryString += 'var testy = latitude;';
  queryString += 'for(coord in polygon){';
  queryString += '  vertx[nvert] = polygon[coord][0];';
  queryString += '  verty[nvert] = polygon[coord][1];';
  queryString += '  nvert ++;';
  queryString += '}';
  queryString += 'var i, j, c = 0;';
  queryString += 'for (i = 0, j = nvert-1; i < nvert; j = i++) {';
  queryString += '  if ( ((verty[i]>testy) != (verty[j]>testy)) &&(testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ){';
  queryString += '    c = !c;';
  queryString += '  }';
  queryString += '}';
  queryString += 'return c;';
  queryString += '"""; ';

  queryString += 'SELECT pickup_latitude, pickup_longitude, dropoff_latitude, dropoff_longitude, pickup_datetime ';
  queryString += 'FROM `' + publicProjectId + '.' + datasetId + '.' + tableName + '` ';
  queryString += 'WHERE pointInPolygon(pickup_latitude, pickup_longitude) = TRUE ';
  queryString += 'LIMIT ' + recordLimit;
  return queryString;
}

इसके बाद, doHeatMap फ़ंक्शन, ड्रॉपऑफ़ की वैल्यू का इस्तेमाल कर सकता है. नतीजे के ऑब्जेक्ट में एक स्कीमा होता है. इसकी जांच करके, यह पता लगाया जा सकता है कि ये कॉलम, ऐरे में कहां मौजूद हैं. इस मामले में, ये इंडेक्स पोज़िशन 2 और 3 पर होंगे. कोड को ज़्यादा आसानी से मैनेज करने के लिए, इन इंडेक्स को किसी वैरिएबल से पढ़ा जा सकता है. ध्यान दें कि हीटमैप का maxIntensity, हर पिक्सल पर ज़्यादा से ज़्यादा 20 ड्रॉप-ऑफ़ की डेंसिटी दिखाने के लिए सेट किया गया है.

कुछ वैरिएबल जोड़ें, ताकि हीटमैप डेटा के लिए इस्तेमाल किए जाने वाले कॉलम बदले जा सकें.

// Show query results as a Heatmap.
function doHeatMap(rows){
  let latCol = 2;
  let lngCol = 3;
  let heatmapData = [];
  if (heatmap!=null){
    heatmap.setMap(null);
  }
  for (let i = 0; i < rows.length; i++) {
      let f = rows[i].f;
      let coords = { lat: parseFloat(f[latCol].v), lng: parseFloat(f[lngCol].v) };
      let latLng = new google.maps.LatLng(coords);
      heatmapData.push(latLng);
  }
  heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      maxIntensity: 20
  });
  heatmap.setMap(map);
}

यहां एक हीटमैप दिया गया है. इसमें साल 2016 में, एंपायर स्टेट बिल्डिंग के आस-पास से पिकअप करने के बाद, तुरंत ड्रॉप ऑफ़ करने वाले लोगों की संख्या दिखाई गई है. इस इमेज में, मिडटाउन की जगहों पर लोगों की ज़्यादा संख्या (लाल रंग के धब्बे) देखी जा सकती है. खास तौर पर, टाइम्स स्क्वेयर के आस-पास और 23वीं स्ट्रीट और 14वीं स्ट्रीट के बीच 5वें एवेन्यू पर. इस ज़ूम लेवल पर, ज़्यादा घनत्व वाली अन्य जगहों को नहीं दिखाया गया है. इनमें ला गार्डिया और जेएफ़के एयरपोर्ट, वर्ल्ड ट्रेड सेंटर, और बैटरी पार्क शामिल हैं.

बेसमैप की स्टाइल तय करना

Maps JavaScript API का इस्तेमाल करके Google मैप बनाते समय, JSON ऑब्जेक्ट का इस्तेमाल करके मैप की स्टाइल सेट की जा सकती है. डेटा विज़ुअलाइज़ेशन के लिए, मैप में रंगों को म्यूट करना फ़ायदेमंद हो सकता है. mapstyle.withgoogle.com पर जाकर, Google Maps API Styling Wizard का इस्तेमाल करके मैप स्टाइल बनाई जा सकती हैं और उन्हें आज़माया जा सकता है.

मैप ऑब्जेक्ट को शुरू करते समय या बाद में किसी भी समय, मैप की स्टाइल सेट की जा सकती है. initMap() फ़ंक्शन में कस्टम स्टाइल जोड़ने का तरीका यहां बताया गया है:

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 40.744593, lng: -73.990370}, // Manhattan, New York.
  zoom: 12,
  styles: [
    {
        "elementType": "geometry",
          "stylers": [
            {
              "color": "#f5f5f5"
            }
          ]
        },
        {
          "elementType": "labels.icon",
            "stylers": [
              {
                "visibility": "on"
              }
            ]
        },
        {
          "featureType": "water",
            "elementType": "labels.text.fill",
              "stylers": [
                {
                  "color": "#9e9e9e"
                }
              ]
        }
      ]
    });
  setUpDrawingTools();
}

नीचे दिए गए स्टाइल के सैंपल में, लोकप्रिय जगहों के लेबल के साथ ग्रेस्केल मैप दिखाया गया है.

[
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "on"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
]

उपयोगकर्ता को सुझाव/राय देना या शिकायत करना

BigQuery आम तौर पर कुछ ही सेकंड में जवाब दे देता है. हालांकि, क्वेरी के चलने के दौरान उपयोगकर्ता को यह दिखाना कभी-कभी फ़ायदेमंद होता है कि कुछ हो रहा है.

अपने वेब पेज में कुछ यूज़र इंटरफ़ेस (यूआई) जोड़ें. इससे checkJobStatus() फ़ंक्शन का जवाब दिखेगा. साथ ही, एक ऐनिमेटेड ग्राफ़िक दिखेगा, जिससे पता चलेगा कि क्वेरी प्रोसेस की जा रही है.

क्वेरी की अवधि, मिले डेटा की मात्रा, और प्रोसेस किए गए डेटा की मात्रा जैसी जानकारी दिखाई जा सकती है.

मैप <div> के बाद कुछ एचटीएमएल जोड़ें, ताकि पेज पर एक पैनल बनाया जा सके. इस पैनल में, क्वेरी से मिली लाइनों की संख्या, क्वेरी में लगा समय, और प्रोसेस किए गए डेटा की मात्रा दिखेगी.

<div id="menu">
    <div id="stats">
        <h3>Statistics:</h3>
        <table>
            <tr>
                <td>Total Locations:</td><td id="rowCount"> - </td>
            </tr>
            <tr>
                <td>Query Execution:</td><td id="duration"> - </td>
            </tr>
            <tr>
                <td>Data Processed:</td><td id="bytes"> - </td>
            </tr>
        </table>
    </div>
</div>

इस पैनल के दिखने और इसकी पोज़िशन को सीएसएस कंट्रोल करती है. सीएसएस जोड़कर, पैनल को पेज के सबसे ऊपर बाईं ओर मैप टाइप बटन और ड्रॉइंग टूलबार के नीचे रखें. ऐसा करने का तरीका यहां दिए गए स्निपेट में बताया गया है.

#menu {
  position: absolute; 
  background: rgba(255, 255, 255, 0.8); 
  z-index: 1000; 
  top: 50px; 
  left: 10px; 
  padding: 15px;
}
#menu h1 {
  margin: 0 0 10px 0;
  font-size: 1.75em;
}
#menu div {
  margin: 5px 0px;
}

ऐनिमेटेड ग्राफ़िक को पेज में जोड़ा जा सकता है. हालांकि, इसे तब तक छिपाया जाता है, जब तक इसकी ज़रूरत न हो. साथ ही, BigQuery जॉब के चालू होने पर इसे दिखाने के लिए, कुछ JavaScript और सीएसएस कोड का इस्तेमाल किया जाता है.

ऐनिमेटेड ग्राफ़िक दिखाने के लिए, कुछ एचटीएमएल जोड़ें. कोड रिपॉज़िटरी में img फ़ोल्डर में loader.gif नाम की एक इमेज फ़ाइल मौजूद है.

<img id="spinner" src="img/loader.gif">

इमेज को पोज़िशन देने के लिए कुछ सीएसएस जोड़ें. साथ ही, जब तक इसकी ज़रूरत न हो, तब तक इसे डिफ़ॉल्ट रूप से छिपाएं.

#spinner {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  margin-left: -32px; 
  margin-top: -32px; 
  opacity: 0; 
  z-index: -1000;
}

आखिर में, स्टेटस पैनल को अपडेट करने के लिए कुछ JavaScript जोड़ें. साथ ही, क्वेरी चलने पर ग्राफ़िक को दिखाएं या छिपाएं. आपके पास उपलब्ध जानकारी के आधार पर, पैनल को अपडेट करने के लिए response ऑब्जेक्ट का इस्तेमाल करने का विकल्प होता है.

मौजूदा नौकरी की जानकारी देखते समय, आपके पास response.statistics प्रॉपर्टी का इस्तेमाल करने का विकल्प होता है. काम पूरा होने के बाद, response.totalRows और response.totalBytesProcessed प्रॉपर्टी ऐक्सेस की जा सकती हैं. यह उपयोगकर्ता के लिए मददगार होता है, क्योंकि इससे मिलीसेकंड को सेकंड में और बाइट को गीगाबाइट में बदला जा सकता है. इससे, नीचे दिए गए कोड सैंपल में दिखाए गए तरीके से डेटा को दिखाया जा सकता है.

function updateStatus(response){
  if(response.statistics){
    let durationMs = response.statistics.endTime - response.statistics.startTime;
    let durationS = durationMs/1000;
    let suffix = (durationS ==1) ? '':'s';
    let durationTd = document.getElementById("duration");
    durationTd.innerHTML = durationS + ' second' + suffix;
  }
  if(response.totalRows){
    let rowsTd = document.getElementById("rowCount");
    rowsTd.innerHTML = response.totalRows;
  }
  if(response.totalBytesProcessed){
    let bytesTd = document.getElementById("bytes");
    bytesTd.innerHTML = (response.totalBytesProcessed/1073741824) + ' GB';
  }
}

इस तरीके को तब कॉल करें, जब checkJobStatus() कॉल का जवाब मिल गया हो और क्वेरी के नतीजे मिल गए हों. उदाहरण के लिए:

// Poll a job to see if it has finished executing.
function checkJobStatus(jobId){
  let request = gapi.client.bigquery.jobs.get({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    //Show progress to the user
    updateStatus(response);

    if (response.status.errorResult){
      // Handle any errors.
      console.log(response.status.error);
      return;
    }
    if (response.status.state == 'DONE'){
      // Get the results.
      clearTimeout(jobCheckTimer);
      getQueryResults(jobId);
      return;
    }
    // Not finished, check again in a moment.
    jobCheckTimer = setTimeout(checkJobStatus, 500, [jobId]); 
  });
}

// When a BigQuery job has completed, fetch the results.
function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    doHeatMap(response.result.rows);
    updateStatus(response);
  })
}

ऐनिमेट किए गए ग्राफ़िक को टॉगल करने के लिए, उसकी दृश्यता को कंट्रोल करने वाला फ़ंक्शन जोड़ें. यह फ़ंक्शन, इसे पास किए गए किसी भी एचटीएमएल DOM एलिमेंट की ओपैसिटी को टॉगल करेगा.

function fadeToggle(obj){
    if(obj.style.opacity==1){
        obj.style.opacity = 0;
        setTimeout(() => {obj.style.zIndex = -1000;}, 1000);
    } else {
        obj.style.zIndex = 1000;
        obj.style.opacity = 1;
    }
}

आखिर में, क्वेरी को प्रोसेस करने से पहले और BigQuery से क्वेरी का नतीजा वापस आने के बाद, इस तरीके को कॉल करें.

जब उपयोगकर्ता रेक्टैंगल बनाना पूरा कर लेता है, तब यह कोड fadeToggle फ़ंक्शन को कॉल करता है.

drawingManager.addListener('rectanglecomplete', rectangle => {
  //show an animation to indicate that something is happening.
  fadeToggle(document.getElementById('spinner'));
  rectangleQuery(rectangle.getBounds());
});

क्वेरी का जवाब मिलने के बाद, ऐनिमेटेड ग्राफ़िक को छिपाने के लिए, fadeToggle() को फिर से कॉल करें.

// When a BigQuery job has completed, fetch the results.
function getQueryResults(jobId){
  let request = gapi.client.bigquery.jobs.getQueryResults({
    'projectId': billingProjectId,
    'jobId': jobId
  });
  request.execute(response => {
    doHeatMap(response.result.rows);
    //hide the animation.
    fadeToggle(document.getElementById('spinner'));
    updateStatus(response);
  })
}

पेज कुछ ऐसा दिखना चाहिए.

पूरा उदाहरण देखने के लिए, step8/map.html पर जाएं.

14. इन बातों का ध्यान रखें

बहुत ज़्यादा मार्कर

अगर बहुत बड़ी टेबल के साथ काम किया जा रहा है, तो हो सकता है कि आपकी क्वेरी से इतनी ज़्यादा लाइनें मिलें कि उन्हें मैप पर सही तरीके से दिखाया न जा सके. WHERE क्लॉज़ या LIMIT स्टेटमेंट जोड़कर, नतीजों को सीमित करें.

बहुत सारे मार्कर बनाने से, मैप को पढ़ना मुश्किल हो सकता है. डेंसिटी दिखाने के लिए, HeatmapLayer का इस्तेमाल करें. इसके अलावा, क्लस्टर मार्कर का इस्तेमाल करके यह दिखाया जा सकता है कि कई डेटा पॉइंट कहां मौजूद हैं. इसके लिए, हर क्लस्टर के लिए एक सिंबल का इस्तेमाल करें. ज़्यादा जानकारी के लिए, हमारा मार्कर क्लस्टरिंग ट्यूटोरियल देखें.

क्वेरी ऑप्टिमाइज़ करना

BigQuery, हर क्वेरी के साथ पूरी टेबल को स्कैन करेगा. BigQuery के कोटे का बेहतर तरीके से इस्तेमाल करने के लिए, अपनी क्वेरी में सिर्फ़ उन कॉलम को चुनें जिनकी आपको ज़रूरत है.

अगर अक्षांश और देशांतर को स्ट्रिंग के बजाय फ़्लोट के तौर पर सेव किया जाता है, तो क्वेरी ज़्यादा तेज़ी से पूरी होंगी.

दिलचस्प नतीजे एक्सपोर्ट करें

यहां दिए गए उदाहरणों में, असली उपयोगकर्ता को BigQuery टेबल के ख़िलाफ़ पुष्टि करनी होगी. यह हर इस्तेमाल के उदाहरण के लिए सही नहीं होगा. जब आपको कुछ दिलचस्प पैटर्न मिल जाते हैं, तो उन्हें ज़्यादा लोगों के साथ शेयर करना आसान हो सकता है. इसके लिए, BigQuery से नतीजों को एक्सपोर्ट करें और Google Maps डेटा लेयर का इस्तेमाल करके स्टैटिक डेटासेट बनाएं.

कानूनी जानकारी

Google Maps Platform की सेवा की शर्तों का ध्यान रखें. Google Maps Platform की कीमत के बारे में ज़्यादा जानने के लिए, ऑनलाइन दस्तावेज़ देखें.

ज़्यादा डेटा के साथ खेलें!

BigQuery में कई सार्वजनिक डेटासेट उपलब्ध हैं. इनमें अक्षांश और देशांतर कॉलम होते हैं. उदाहरण के लिए, साल 2009 से 2016 तक के NYC टैक्सी डेटासेट, Uber और Lyft के NYC ट्रिप डेटा, और GDELT डेटासेट.

15. बधाई हो!

हमें उम्मीद है कि इससे आपको BigQuery टेबल के ख़िलाफ़ कुछ जियो क्वेरी को जल्दी से सेट अप करने और चलाने में मदद मिलेगी. इससे आपको पैटर्न खोजने और उन्हें Google Maps पर विज़ुअलाइज़ करने में मदद मिलेगी. मैपिंग का आनंद लें!

आगे क्या करना है?

अगर आपको Google Maps Platform या BigQuery के बारे में ज़्यादा जानना है, तो यहां दिए गए सुझाव देखें.

Google की बिना सर्वर वाली, पेटाबाइट-स्केल की डेटा वेयरहाउस सेवा के बारे में ज़्यादा जानने के लिए, BigQuery क्या है लेख पढ़ें.

BigQuery API का इस्तेमाल करके, एक सामान्य ऐप्लिकेशन बनाने के तरीके के बारे में जानने के लिए, यह गाइड पढ़ें.

Google Maps पर आकृतियां बनाने के लिए, उपयोगकर्ता इंटरैक्शन की सुविधा चालू करने के बारे में ज़्यादा जानने के लिए, ड्राइंग लाइब्रेरी के लिए डेवलपर गाइड देखें.

Google Maps पर डेटा को विज़ुअलाइज़ करने के अन्य तरीके देखें.

अन्य Google API ऐक्सेस करने के लिए, Client API का इस्तेमाल करने के बुनियादी कॉन्सेप्ट समझने के लिए, JavaScript Client API का इस्तेमाल शुरू करने से जुड़ी गाइड देखें.