রিয়েল-টাইম ডেটা-ড্রিভেন স্টাইলিং

এই ডকুমেন্ট থেকে আপনি জানতে পারবেন যে Maps JavaScript API ব্যবহার করে Google সীমানার ডায়নামিক ডেটা-ড্রিভেন স্টাইলিং কেন এবং কীভাবে প্রয়োগ করতে হয়। এটি বিভিন্ন ইন্ডাস্ট্রি ও সেগমেন্ট জুড়ে বিভিন্ন ধরনের ব্যবহারের ক্ষেত্রে উপযোগী।

পোস্টাল কোড অনুযায়ী NYC-তে ট্যাক্সির সংখ্যা
পোস্টাল কোড অনুযায়ী নিউ ইয়র্ক সিটিতে অ্যানিমেটেড ট্যাক্সির সংখ্যা (সিমুলেটেড, টাইম-ল্যাপ্সড):
পোস্টাল কোড অনুযায়ী NYC-তে ট্যাক্সির সংখ্যা (টাইম-ল্যাপ্স) ম্যাপ লিজেন্ড

ডেটা-ড্রিভেন স্টাইলিং হল Google Maps Platform-এর একটি ক্ষমতা যা আপনাকে Google-এর প্রশাসনিক সীমানা বহুভুজ ব্যবহার করতে, আপনার ম্যাপে প্রদর্শনের জন্য সেই বহুভুজগুলিতে স্টাইলিং প্রয়োগ করতে এবং সমৃদ্ধ, কাস্টমাইজ করা ম্যাপ তৈরি করতে আপনার নিজস্ব ডেটা একত্রিত করতে দেয় যা ভিজ্যুয়াল বিশ্লেষণ এবং আপনার ডেটার উন্নত বোঝার জন্য ব্যবহার করা যেতে পারে। এই ডকুমেন্টে কিছু ব্যবহারের কেস নিয়ে আলোচনা করা হবে যা ব্যাখ্যা করে যে কেন এবং কীভাবে আপনি ডাইনামিক ডেটা ফিড ইন্টিগ্রেট করে প্রায় রিয়েল-টাইমে ম্যাপে ডেটা-ড্রিভেন স্টাইলিংয়ের মাধ্যমে আপনার ডেটা ভিজ্যুয়ালাইজ করতে পারবেন।

ডেটা-ড্রিভেন স্টাইলিংয়ের মাধ্যমে আপনি এমন ম্যাপ তৈরি করতে পারবেন যা ডেটার ভৌগোলিক ডিস্ট্রিবিউশন দেখায়, ডায়নামিক পদ্ধতিতে পলিগন স্টাইল কাস্টমাইজ করে এবং ক্লিক ইভেন্টের মাধ্যমে আপনার ডেটার সাথে ইন্টার‍্যাক্ট করে। বিভিন্ন ধরনের ব্যবহার ও ইন্ডাস্ট্রির জন্য তথ্যপূর্ণ ও আকর্ষণীয় ম্যাপ তৈরি করতে এইসব ফিচার ব্যবহার করা যেতে পারে।

ডেটা-ড্রিভেন স্টাইলিংয়ে ডাইনামিক ডেটা আপডেট দেখানো ম্যাপের ক্ষেত্রে প্রযোজ্য হতে পারে এমন কিছু ব্যবহারের উদাহরণ এখানে দেওয়া হল:

  • রাইড শেয়ারিং: রিয়েল-টাইম আপডেট ব্যবহার করে বেশি চাহিদা আছে এমন এলাকা শনাক্ত করা যেতে পারে, এই ক্ষেত্রে কিছু পরিষেবা প্রদানকারী বেশি দাম নিতে পারে।
  • পরিবহন: রিয়েল-টাইম আপডেট ব্যবহার করে যানজটপূর্ণ এলাকা শনাক্ত করা যেতে পারে, যা সেরা বিকল্প রুট নির্ধারণ করতে সাহায্য করবে।
  • নির্বাচন: নির্বাচনের রাতে, রিয়েল-টাইম পোলিং ডেটা ব্যবহার করে ফলাফল যেভাবে ঘটছে তা ভিজ্যুয়ালাইজ করা যেতে পারে।
  • কর্মীর নিরাপত্তা: রিয়েল-টাইম আপডেট ব্যবহার করে ইভেন্ট রিয়েল-টাইমে ট্র্যাক করা, বেশি ঝুঁকিপূর্ণ এলাকা শনাক্ত করা এবং ফিল্ডে থাকা রেসপন্ডারদের পরিস্থিতি সম্পর্কে সচেতন করা যেতে পারে।
  • আবহাওয়া: ঝড়ের গতিবিধি ট্র্যাক করতে, বর্তমান বিপদ শনাক্ত করতে এবং সতর্কতা ও অ্যালার্ট প্রদান করতে রিয়েল-টাইম আপডেট ব্যবহার করা যেতে পারে।
  • পরিবেশ: আগ্নেয়গিরির ছাই এবং অন্যান্য দূষণকারীর গতিবিধি ট্র্যাক করতে, পরিবেশগত অবনতির ক্ষেত্রগুলি চিহ্নিত করতে এবং মানুষের কার্যকলাপের প্রভাব নিরীক্ষণ করতে রিয়েল-টাইম আপডেট ব্যবহার করা যেতে পারে।

এইসব পরিস্থিতিতে, গ্রাহকরা তাদের রিয়েল-টাইম ডেটা ফিড Google-এর বাউন্ডারির সাথে একত্রিত করে অতিরিক্ত সুবিধা আনলক করতে পারেন, যাতে ম্যাপে তাদের ডেটা দ্রুত ও সহজে ভিজ্যুয়ালাইজ করা যায়। এর ফলে, তারা আরও ভালভাবে জেনেবুঝে সিদ্ধান্ত নেওয়ার জন্য প্রায়-তাত্ক্ষণিক ইনসাইট পাওয়ার সুপারপাওয়ার পান।

সমাধানের জন্য আর্কিটেকচারাল অ্যাপ্রোচ

এখন, ডাইনামিক ডেটা ভিজ্যুয়ালাইজ করার জন্য ডেটা-ড্রিভেন স্টাইলিং ব্যবহার করে ম্যাপ তৈরি করার পদ্ধতিটি দেখে নেওয়া যাক। আগে যেমন দেখানো হয়েছে, এই ব্যবহারের ক্ষেত্রে পোস্টাল কোড অনুযায়ী NYC ট্যাক্সির সংখ্যা দেখানো হয়েছে। ট্যাক্সি ডাকা কতটা সহজ হবে তা বুঝতে এটি ব্যবহারকারীদের সাহায্য করতে পারে।

আর্কিটেকচার
এখানে এই পদ্ধতির অ্যাপ্লিকেশন আর্কিটেকচার ডায়াগ্রাম দেওয়া হল:
অ্যাপ্লিকেশন আর্কিটেকচার

ডায়নামিক ডেটা-ড্রিভেন স্টাইলিং সমাধান

এখন, আপনার ডেটাসেটের জন্য ডায়নামিক ডেটা-ড্রিভেন স্টাইলিং কোরোপ্লেথ ম্যাপ প্রয়োগ করার জন্য প্রয়োজনীয় ধাপগুলি দেখে নেওয়া যাক।

এই সমাধান আপনাকে পোস্টাল কোড অনুযায়ী নিউ ইয়র্ক সিটির আশেপাশে রিয়েল-টাইম ট্যাক্সি ঘনত্বের একটি কাল্পনিক ডেটাসেট ভিজ্যুয়ালাইজ করতে দেয়। এটি বাস্তব-জগতের ডেটা না হলেও, এর বাস্তব-জগতের অ্যাপ্লিকেশন রয়েছে এবং এটি আপনাকে ডেটা-ড্রিভেন স্টাইলিংয়ের মাধ্যমে ম্যাপে কীভাবে ডাইনামিক ডেটা ভিজ্যুয়ালাইজ করা যায় তার ক্ষমতা এবং দক্ষতার একটি ধারণা প্রদান করে।

ধাপ ১: ভিজ্যুয়ালাইজ করার জন্য ডেটা বেছে নিন এবং বাউন্ডারি প্লেস আইডিতে যোগ দিন

প্রথম ধাপ হল, আপনি যে ডেটা দেখাতে চান তা শনাক্ত করা এবং এটি 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 ফাংশন ব্যবহার করে আপনার ডেটা রিফ্রেশ করার জন্য একটি টাইমার সেট করা। আপনি ইন্টারভ্যালকে উপযুক্ত ভ্যালুতে সেট করতে পারেন, যেমন প্রতি ১৫ সেকেন্ডে ম্যাপ রিফ্রেশ করা। প্রতিবার ইন্টারভ্যাল টাইম পার হয়ে গেলে, ওয়েব ওয়ার্কার প্রতি postalCode-এ আপডেট করা taxiCount ভ্যালুর জন্য অনুরোধ করবে।

এখন আমরা ডেটা কোয়েরি ও রিফ্রেশ করতে পারি, তাই ম্যাপ পলিগনের চেহারা যেন এইসব পরিবর্তন প্রতিফলিত করে তা নিশ্চিত করা যাক।

ধাপ ৩: ডেটা-ড্রিভেন স্টাইলিংয়ের মাধ্যমে আপনার ম্যাপ স্টাইল করুন

এখন আপনার কাছে JSON অবজেক্ট হিসেবে Maps JavaScript ইনস্ট্যান্সে পোস্টাল কোড সীমানায় ভিজ্যুয়াল স্টাইল তৈরি ও প্রয়োগ করার জন্য প্রয়োজনীয় ডায়নামিক ডেটা ভ্যালু আছে, এবার এটিকে কোরোপ্লেথ ম্যাপ হিসেবে স্টাইল দেওয়ার সময় এসেছে।

এই উদাহরণে, আপনি প্রতিটি পোস্টাল কোডে ট্যাক্সির সংখ্যার উপর ভিত্তি করে ম্যাপ স্টাইল করবেন, যা আপনার ব্যবহারকারীদের তাদের এলাকায় ট্যাক্সির ঘনত্ব এবং উপলভ্যতা সম্পর্কে ধারণা দেবে। ট্যাক্সি কাউন্ট ভ্যালুর উপর নির্ভর করে স্টাইল আলাদা হবে। সবচেয়ে কম ট্যাক্সি থাকা এলাকাগুলিতে বেগুনি স্টাইলিং প্রয়োগ করা হবে এবং রঙের সমাহার লাল, কমলা হয়ে সর্বোচ্চ ঘনত্ব থাকা এলাকার জন্য NYC ট্যাক্সি হলুদ রঙে শেষ হবে। এই কালার স্কিমের জন্য আপনি fillColor এবং strokeColor-এ এইসব কালার ভ্যালু প্রয়োগ করবেন। fillOpacity-কে ০.৫-এ সেট করলে আপনার ব্যবহারকারীরা অন্তর্নিহিত ম্যাপ দেখতে পাবেন এবং strokeOpacity-কে ১.০-এ সেট করলে তারা একই রঙের বহুভুজের সীমানার মধ্যে পার্থক্য করতে পারবেন: 


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 Platform সলিউশন ইঞ্জিনিয়ার