डेटा-ड्रिवन स्टाइल का इस्तेमाल करके, रीयल टाइम में अपना डेटा देखें

इस दस्तावेज़ में, Maps JavaScript API का इस्तेमाल करके, Google की सीमाओं की डाइनैमिक डेटा-ड्रिवन स्टाइलिंग को लागू करने की वजह और तरीका बताया गया है. यह तरीका, अलग-अलग इंडस्ट्री और सेगमेंट में कई तरह के इस्तेमाल के मामलों के लिए काम का है.

एनवाईसी में पिन कोड के हिसाब से टैक्सी की संख्या
न्यूयॉर्क शहर में पिन कोड के हिसाब से टैक्सी की संख्या दिखाने वाला ऐनिमेटेड मैप (सिमुलेटेड, टाइम-लैप्स्ड):

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

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

यहां इस्तेमाल के कुछ ऐसे मामलों के उदाहरण दिए गए हैं जो डेटा-ड्रिवन स्टाइलिंग की मदद से, डाइनैमिक डेटा अपडेट दिखाने वाले मैप पर लागू हो सकते हैं:

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

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

अभी आज़माएं: Google Cloud Console पर जाएं और Maps JavaScript API की सुविधा चालू करें.

सॉल्यूशन के लिए आर्किटेक्चरल तरीका

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

आर्किटेक्चर
यहां इस तरीके का ऐप्लिकेशन आर्किटेक्चर डायग्राम दिया गया है:

डाइनैमिक डेटा-ड्रिवन स्टाइलिंग का सॉल्यूशन

अब अपने डेटासेट के लिए, डाइनैमिक डेटा-ड्रिवन स्टाइलिंग वाला कोरोप्लेथ मैप लागू करने के लिए ज़रूरी चरणों के बारे में जानते हैं.

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

पहला चरण: विज़ुअलाइज़ करने के लिए डेटा चुनना और उसे किसी बाउंड्री के प्लेस आईडी से जोड़ना

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

const request = {
    query: postalCode,
    fields: ['place_id'],
};
 
function findPlaceId() {
   placesService.findPlaceFromQuery(request, function (results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
         console.log(results[0]);
      }
   });
}

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

दूसरा चरण: रीयल-टाइम डेटा से कनेक्ट करना

डेटा सोर्स से कनेक्ट करने के कई तरीके हैं. सबसे अच्छा तरीका, आपकी ज़रूरतों और तकनीकी इन्फ़्रास्ट्रक्चर पर निर्भर करेगा. इस मामले में, मान लें कि आपका डेटा, BigQuery टेबल में मौजूद है. इसमें दो कॉलम हैं: “zip_code” और “taxi_count”. साथ ही, आपको Firebase Cloud Function के ज़रिए इसकी क्वेरी करनी होगी.

async function queryNycTaxis() {
   // Queries the NYC Taxis dataset.

   // Create a client
   const bigqueryClient = new BigQuery();
  
   // The SQL query to run
   const sqlQuery = 'SELECT zip_code, taxi_count
      FROM \'YOUR_DATASET_ID.TABLE\' LIMIT 100';
      
   const options = {
      query: sqlQuery,
      // Location must match that of the dataset(s)
      // referenced in the query.
      location: 'US',
   };
  
   // Run the query
   const [rows] = await bigqueryClient.query(options);
  
   rows.forEach(row => {
      const postalCode = row['zip_code'];
      const taxiCount = row['taxi_count'];
   });
}

इसके बाद, आपको यह पक्का करना होगा कि डेटा अप-टू-डेट रहे. ऐसा करने का एक तरीका यह है कि वेब वर्कर का इस्तेमाल करके, ऊपर दी गई क्वेरी को कॉल किया जाए. साथ ही, setInterval फ़ंक्शन का इस्तेमाल करके, अपने डेटा को रीफ़्रेश करने के लिए टाइमर सेट किया जाए. इंटरवल को कोई सही वैल्यू पर सेट किया जा सकता है. जैसे, हर 15 सेकंड में मैप को रीफ़्रेश करना. हर बार इंटरवल का समय पूरा होने पर, वेब वर्कर, हर postalCode के लिए taxiCount की अपडेट की गई वैल्यू का अनुरोध करेगा.

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

तीसरा चरण: डेटा-ड्रिवन स्टाइलिंग की मदद से अपने मैप को स्टाइल करना

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

इस उदाहरण में, मैप को हर पिन कोड में टैक्सी की संख्या के आधार पर स्टाइल किया जाएगा. इससे आपके उपयोगकर्ताओं को उनके इलाके में टैक्सी की संख्या और उपलब्धता के बारे में पता चलेगा. टैक्सी की संख्या की वैल्यू के आधार पर, स्टाइल अलग-अलग होगी. सबसे कम टैक्सी वाले इलाकों में, पर्पल स्टाइलिंग लागू की जाएगी. वहीं, सबसे ज़्यादा टैक्सी वाले इलाकों के लिए, कलर ग्रेडिएंट लाल और नारंगी रंग से होते हुए, एनवाईसी की टैक्सी के पीले रंग पर खत्म होगा. इस कलर स्कीम के लिए, fillColor और strokeColor पर ये कलर वैल्यू लागू की जाएंगी. fillOpacity को 0.5 पर सेट करने से, आपके उपयोगकर्ता, मैप को देख पाएंगे. वहीं, strokeOpacity को 1.0 पर सेट करने से, वे एक ही रंग के पॉलीगॉन की सीमाओं के बीच अंतर कर पाएंगे:

const featureLayer = map.getFeatureLayer(
   google.maps.FeatureType.POSTAL_CODE
);
featureLayer.style = (featureStyleFunctionOptions) => {
   const placeFeature = featureStyleFunctionOptions.feature;
   // taxiCount per (postal_code) PlaceID 
   const taxiCount = zips[placeFeature.placeId];
   let fillColor;
   let strokeColor;
// Apply colors to features based on taxiCount values
if (taxiCount < 8) {
   fillColor = "#571845";  
   strokeColor = "#571845"; 
} else if (taxiCount < 13) {
   fillColor = "#900c3e";
   strokeColor = "#900c3e";
} else if (taxiCount < 21) {
   fillColor = "#c60039"; 
   strokeColor = "#c60039"; 
} else if (taxiCount < 34) {
   fillColor = "#fe5733";
   strokeColor = "#fe5733";
// keep else if or the whole map gets this style with else
} else if (taxiCount >= 34) { 
   fillColor = "#fec30f";
   strokeColor = "#fec30f";
}  
return {
   fillColor,
   strokeColor,
   fillOpacity: 0.5,
   strokeOpacity: 1.0,
};
 

नतीजा

Google की सीमाओं के लिए डेटा-ड्रिवन स्टाइलिंग की मदद से, अपने डेटा का इस्तेमाल करके, अलग-अलग इंडस्ट्री और सेगमेंट में कई तरह के इस्तेमाल के मामलों के लिए, अपने मैप को स्टाइल किया जा सकता है. रीयल-टाइम डेटा से कनेक्ट करने पर, यह बताया जा सकता है कि क्या हो रहा है, कहां हो रहा है, और कब हो रहा है. इस सुविधा की मदद से, रीयल-टाइम डेटा की वैल्यू को अनलॉक किया जा सकता है. साथ ही, आपके उपयोगकर्ताओं को असल दुनिया में, रीयल-टाइम में इसे बेहतर तरीके से समझने में मदद मिलती है.

अगली कार्रवाइयां

• Google Maps की सीमाओं को स्टाइल करने के लिए, डेटा-ड्रिवन स्टाइलिंग का इस्तेमाल करने का तरीका बताने वाला वेबिनार देखें.
• डेटा-ड्रिवन स्टाइलिंग के लिए, क्लिक इवेंट की मदद से अपने विज़ुअलाइज़ेशन को एक कदम आगे ले जाएं.
• अपने मैप में ऐडवांस मार्कर जोड़ने पर विचार करें.

योगदानकर्ता

मुख्य लेखक:

जिम लेफ़्लर | Google Maps Platform के सॉल्यूशन इंजीनियर