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

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

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

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

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

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

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

समाधान के लिए आर्किटेक्चरल अप्रोच

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

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

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

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

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

सबसे पहले, उस डेटा की पहचान करें जिसे आपको दिखाना है. साथ ही, यह पक्का करें कि वह Google के डेटा से मेल खाता हो. हर पिनकोड के लिए 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]);
      }
   });
}

अगर आपके डेटा में अक्षांश और देशांतर की वैल्यू हैं, तो आपको जिस सुविधा लेयर को स्टाइल करने में दिलचस्पी है उसके लिए, अक्षांश/देशांतर की वैल्यू को जगह के आईडी की वैल्यू से बदलने के लिए, कॉम्पोनेंट को फ़िल्टर करने के साथ जियोकोडिंग एपीआई का इस्तेमाल किया जा सकता है. इस उदाहरण में, 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 सेकंड में मैप को रीफ़्रेश करना. इंटरवल का समय जितनी बार खत्म होगा, वेब वर्कर हर पिनकोड के लिए, अपडेट की गई टैक्सी काउंट वैल्यू का अनुरोध करेगा.

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

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

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

इस उदाहरण में, हर पिन कोड में टैक्सी की संख्या के आधार पर मैप की स्टाइल तय की जाएगी. इससे उपयोगकर्ताओं को यह पता चलेगा कि उनके इलाके में टैक्सी कितनी है और वहां उनकी कितनी जगह है. यह स्टाइल, टैक्सी की संख्या की वैल्यू के हिसाब से अलग-अलग होगी. सबसे कम टैक्सी वाले इलाकों में बैंगनी रंग की स्टाइल लागू की जाएगी. साथ ही, सबसे ज़्यादा सघनता वाले इलाकों में रंग ग्रेडिएंट, लाल, नारंगी, और न्यूयॉर्क सिटी टैक्सी पीला हो जाएगा. इस कलर स्कीम के लिए, आपको इन कलर वैल्यू को एडिट कलर और स्ट्रोककलर में लागू करना होगा. भरेंओपैसिटी को 0.5 पर सेट करने से, उपयोगकर्ता इस्तेमाल कर रहे लोगों को मैप देख सकते हैं. साथ ही, स्ट्रोक ओपैसिटी को 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 सलूशन इंजीनियर