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

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

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

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

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

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

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

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

अभी आज़माएं: Google Cloud console पर जाएं और Maps JavaScript API को चालू करें.

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

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

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

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

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

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

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

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

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