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

इस दस्तावेज़ में बताया गया है कि 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]);
      }
   });
}

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

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

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

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 सेकंड में रीफ़्रेश करना. हर बार अंतराल का समय बीतने पर, वेब वर्कर हर बार पिन कोड के हिसाब से, नई टैक्सी काउंट वैल्यू का अनुरोध करेगा.

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

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

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

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