रीयल-टाइम डेटा-ड्रिवन स्टाइलिंग

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

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

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

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

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

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

समाधान के लिए आर्किटेक्चरल तरीका

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

डाइनैमिक डेटा-ड्रिवन स्टाइलिंग की सुविधा

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

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

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

सबसे पहले, वह डेटा चुनें जिसे आपको दिखाना है. साथ ही, पक्का करें कि वह 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 फ़ंक्शन की मदद से, इस डेटा पर क्वेरी की जाएगी.

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 मैप की सीमाओं को स्टाइल करने के लिए, डेटा-ड्रिवन स्टाइलिंग का इस्तेमाल करने का तरीका वेबिनार देखें.
• डेटा-ड्रिवन स्टाइलिंग के लिए, क्लिक इवेंट की मदद से विज़ुअलाइज़ेशन को बेहतर बनाएं.
• अपने मैप में ऐडवांस मार्कर जोड़ें.

योगदानकर्ता

मुख्य लेखक:

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