এই ডকুমেন্টটিতে বর্ণনা করা হয়েছে কেন এবং কীভাবে ম্যাপস জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে গুগল বাউন্ডারির ডাইনামিক ডেটা-ড্রাইভেন স্টাইলিং প্রয়োগ করতে হয়, যা বিভিন্ন শিল্প ও খণ্ড জুড়ে নানা ধরনের ব্যবহারের ক্ষেত্রে উপযোগী।
পোস্টাল কোড সীমানা অনুসারে নিউ ইয়র্ক সিটিতে ট্যাক্সির অ্যানিমেটেড গণনা (সিমুলেটেড, টাইম-ল্যাপসড):
ডেটা-ড্রাইভেন স্টাইলিং হলো গুগল ম্যাপস প্ল্যাটফর্মের একটি সক্ষমতা, যা আপনাকে গুগলের প্রশাসনিক সীমানা পলিগনগুলো ব্যবহার করতে, আপনার ম্যাপে প্রদর্শনের জন্য সেই পলিগনগুলোতে স্টাইলিং প্রয়োগ করতে এবং আপনার নিজস্ব ডেটা একত্রিত করে সমৃদ্ধ ও কাস্টমাইজড ম্যাপ তৈরি করতে দেয়। এই ম্যাপগুলো ভিজ্যুয়াল বিশ্লেষণ এবং আপনার ডেটা আরও ভালোভাবে বোঝার জন্য ব্যবহার করা যেতে পারে। এই ডকুমেন্টে কিছু ব্যবহারের ক্ষেত্র নিয়ে আলোচনা করা হবে, যা ব্যাখ্যা করবে কেন এবং কীভাবে আপনি ডাইনামিক ডেটা ফিড ইন্টিগ্রেট করে ডেটা-ড্রাইভেন স্টাইলিং ব্যবহার করে প্রায় রিয়েল-টাইমে একটি ম্যাপে আপনার ডেটা ভিজ্যুয়ালাইজ করতে পারেন।
ডেটা-চালিত স্টাইলিং আপনাকে এমন মানচিত্র তৈরি করতে দেয় যা ডেটার ভৌগোলিক বন্টন দেখায়, গতিশীলভাবে পলিগনের স্টাইল কাস্টমাইজ করতে দেয় এবং ক্লিক ইভেন্টের মাধ্যমে আপনার ডেটার সাথে ইন্টারঅ্যাক্ট করতে দেয়। এই বৈশিষ্ট্যগুলি বিভিন্ন ধরনের ব্যবহার এবং শিল্পের জন্য তথ্যপূর্ণ ও আকর্ষণীয় মানচিত্র তৈরি করতে ব্যবহার করা যেতে পারে।
ডেটা-ড্রাইভেন স্টাইলিং-এ ডাইনামিক ডেটা আপডেট প্রদর্শনকারী একটি ম্যাপের ক্ষেত্রে প্রযোজ্য হতে পারে এমন কিছু ব্যবহারের উদাহরণ নিচে দেওয়া হলো:
- রাইড শেয়ারিং: রিয়েল-টাইম আপডেটের মাধ্যমে অধিক চাহিদার এলাকাগুলো চিহ্নিত করা যায়, সেক্ষেত্রে কিছু পরিষেবা প্রদানকারী সারজ প্রাইসিং (অতিরিক্ত মূল্য) আরোপ করতে পারে।
- পরিবহন: রিয়েল-টাইম আপডেট ব্যবহার করে যানজটপূর্ণ এলাকাগুলো চিহ্নিত করা যেতে পারে, যা সর্বোত্তম বিকল্প পথ নির্ধারণে সহায়তা করবে।
- নির্বাচন: নির্বাচনের রাতে, ফলাফল প্রকাশের সাথে সাথে তা দেখার জন্য রিয়েল-টাইম পোলিং ডেটা ব্যবহার করা যেতে পারে।
- শ্রমিক নিরাপত্তা: রিয়েল-টাইম আপডেট ব্যবহার করে ঘটনাপ্রবাহকে তাৎক্ষণিকভাবে পর্যবেক্ষণ করা, উচ্চ-ঝুঁকিপূর্ণ এলাকা চিহ্নিত করা এবং মাঠপর্যায়ে কর্মরত কর্মীদের পরিস্থিতি সম্পর্কে সচেতন করা যায়।
- আবহাওয়া: ঝড়ের গতিবিধি পর্যবেক্ষণ করতে, বর্তমান বিপদ শনাক্ত করতে এবং সতর্কতা ও সতর্কবার্তা প্রদান করতে রিয়েল-টাইম আপডেট ব্যবহার করা যেতে পারে।
- পরিবেশ: আগ্নেয়গিরির ছাই ও অন্যান্য দূষণকারী পদার্থের গতিবিধি পর্যবেক্ষণ করতে, পরিবেশগত অবক্ষয়ের এলাকাগুলো চিহ্নিত করতে এবং মানুষের কার্যকলাপের প্রভাব নিরীক্ষণ করতে রিয়েল-টাইম আপডেট ব্যবহার করা যেতে পারে।
এই সমস্ত পরিস্থিতিতে, গ্রাহকরা তাদের রিয়েল-টাইম ডেটা ফিডকে গুগলের সীমানার সাথে একত্রিত করে দ্রুত ও সহজে একটি মানচিত্রে তাদের ডেটা ভিজ্যুয়ালাইজ করার মাধ্যমে অতিরিক্ত সুবিধা লাভ করতে পারেন, যা তাদের আরও ভালোভাবে অবহিত সিদ্ধান্ত গ্রহণের জন্য প্রায়-তাৎক্ষণিক অন্তর্দৃষ্টির অসাধারণ ক্ষমতা প্রদান করে।
সমাধানের স্থাপত্যগত পদ্ধতি
এখন চলুন, ডাইনামিক ডেটা ভিজ্যুয়ালাইজ করার জন্য ডেটা-ড্রাইভেন স্টাইলিং ব্যবহার করে একটি ম্যাপ তৈরির প্রক্রিয়াটি দেখে নেওয়া যাক। পূর্বে যেমন দেখানো হয়েছে, এর ব্যবহারিক ক্ষেত্রটি হলো পোস্টাল কোড অনুযায়ী নিউ ইয়র্ক সিটির ট্যাক্সির সংখ্যা দেখানো। ট্যাক্সি ডাকা কতটা সহজ হবে, তা বুঝতে এটি ব্যবহারকারীদের জন্য সহায়ক হতে পারে।
পদ্ধতিটির একটি অ্যাপ্লিকেশন আর্কিটেকচার ডায়াগ্রাম নিচে দেওয়া হলো:
ডাইনামিক ডেটা-চালিত স্টাইলিং সলিউশন
এখন চলুন আপনার ডেটাসেটের জন্য একটি ডাইনামিক ডেটা-ড্রাইভেন স্টাইলিং কোরোপ্লেথ ম্যাপ বাস্তবায়নের প্রয়োজনীয় ধাপগুলো দেখে নেওয়া যাক।
এই সমাধানটি আপনাকে পোস্টাল কোড অনুযায়ী নিউ ইয়র্ক সিটির আশেপাশে রিয়েল-টাইম ট্যাক্সি ঘনত্বের একটি কাল্পনিক ডেটাসেটকে দৃশ্যমান করতে সক্ষম করে। যদিও এটি বাস্তব জগতের ডেটা নাও হতে পারে, তবে এর বাস্তব প্রয়োগ রয়েছে এবং ডেটা-ড্রাইভেন স্টাইলিংয়ের মাধ্যমে কীভাবে ডাইনামিক ডেটাকে ম্যাপে দৃশ্যমান করা যায়, তার শক্তি ও সক্ষমতা সম্পর্কে এটি আপনাকে একটি ধারণা দেয়।
ধাপ ১: ভিজ্যুয়ালাইজ করার জন্য ডেটা নির্বাচন করুন এবং একটি বাউন্ডারি প্লেস আইডি-র সাথে যুক্ত করুন।
প্রথম ধাপ হলো আপনি যে ডেটা প্রদর্শন করতে চান তা শনাক্ত করা এবং নিশ্চিত করা যে এটি গুগলের সীমানার সাথে মেলানো যায়। আপনি প্রতিটি পোস্টাল কোডের জন্য `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]);
}
});
}
আপনার ডেটাতে যদি অক্ষাংশ এবং দ্রাঘিমাংশের মান থাকে, তাহলে আপনি যে ফিচার লেয়ারটি স্টাইল করতে আগ্রহী, তার জন্য সেই অক্ষাংশ/দ্রাঘিমাংশের মানগুলোকে প্লেস আইডি (Place ID) মানে রূপান্তর করতে কম্পোনেন্ট ফিল্টারিং সহ জিওকোডিং এপিআই (Geocoding API) ব্যবহার করতে পারেন। এই উদাহরণে আপনি POSTAL_CODE ফিচার লেয়ারটি স্টাইল করবেন।
ধাপ ২: রিয়েল-টাইম ডেটার সাথে সংযোগ করুন
ডেটা সোর্সের সাথে সংযোগ করার বিভিন্ন উপায় রয়েছে, এবং এর সর্বোত্তম বাস্তবায়ন আপনার নির্দিষ্ট প্রয়োজন ও প্রযুক্তিগত পরিকাঠামোর উপর নির্ভর করবে। এক্ষেত্রে, ধরা যাক আপনার ডেটা “zip_code” এবং “taxi_count” এই দুটি কলামসহ একটি BigQuery টেবিলে রয়েছে, এবং আপনি একটি 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 ভ্যালুগুলোর অনুরোধ করবে।
এখন যেহেতু আমরা ডেটা কোয়েরি এবং রিফ্রেশ করতে পারি, চলুন নিশ্চিত করি যেন ম্যাপের পলিগনগুলোর চেহারায় এই পরিবর্তনগুলো প্রতিফলিত হয়।
ধাপ ৩: ডেটা-চালিত স্টাইলিং ব্যবহার করে আপনার ম্যাপকে সাজান।
এখন যেহেতু আপনার Maps জাভাস্ক্রিপ্ট ইনস্ট্যান্সে পোস্টাল কোডের সীমানাগুলোতে একটি ভিজ্যুয়াল স্টাইল তৈরি ও প্রয়োগ করার জন্য প্রয়োজনীয় ডাইনামিক ডেটা ভ্যালুগুলো একটি JSON অবজেক্ট হিসেবে রয়েছে, তাই এটিকে একটি কোরোপ্লেথ ম্যাপ হিসেবে স্টাইল দেওয়ার সময় এসেছে।
এই উদাহরণে আপনি প্রতিটি পোস্টাল কোডে ট্যাক্সির সংখ্যার উপর ভিত্তি করে ম্যাপটিকে স্টাইল করবেন, যা আপনার ব্যবহারকারীদের তাদের এলাকায় ট্যাক্সির ঘনত্ব এবং প্রাপ্যতা সম্পর্কে একটি ধারণা দেবে। ট্যাক্সির সংখ্যার মানের উপর নির্ভর করে স্টাইলটি পরিবর্তিত হবে। সবচেয়ে কম ট্যাক্সি থাকা এলাকাগুলিতে বেগুনি রঙের স্টাইলিং প্রয়োগ করা হবে, এবং রঙের গ্রেডিয়েন্টটি লাল, কমলা রঙের মধ্য দিয়ে গিয়ে সর্বোচ্চ ঘনত্বের এলাকাগুলির জন্য NYC ট্যাক্সির হলুদ রঙে শেষ হবে। এই কালার স্কিমের জন্য আপনি 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,
};
উপসংহার
গুগল বাউন্ডারির জন্য ডেটা-চালিত স্টাইলিং আপনাকে বিভিন্ন শিল্প ও বিভাগ জুড়ে নানা ধরনের বাস্তবায়নের জন্য আপনার ডেটা ব্যবহার করে ম্যাপকে স্টাইল করার সুযোগ করে দেয়। রিয়েল-টাইম ডেটার সাথে সংযোগ আপনাকে জানাতে সক্ষম করে যে কী ঘটছে, কোথায় ঘটছে এবং ঘটার সাথে সাথেই ঘটছে। এই সক্ষমতা আপনার রিয়েল-টাইম ডেটার মূল্যকে উন্মোচন করতে পারে এবং আপনার ব্যবহারকারীদের বাস্তব জগতে, রিয়েল-টাইমে তা আরও ভালোভাবে বুঝতে সাহায্য করতে পারে।
পরবর্তী পদক্ষেপ
- গুগল ম্যাপের সীমানা স্টাইল করতে কীভাবে ডেটা-চালিত স্টাইলিং ব্যবহার করবেন, সেই ওয়েবিনারটি দেখুন।
- ডেটা-চালিত স্টাইলিংয়ের জন্য ক্লিক ইভেন্ট ব্যবহার করে আপনার ভিজ্যুয়ালাইজেশনকে আরও এক ধাপ এগিয়ে নিয়ে যান।
- আপনার মানচিত্রে উন্নত মার্কার যোগ করার কথা বিবেচনা করুন।
অবদানকারীরা
প্রধান লেখক:
জিম লেফলার | গুগল ম্যাপস প্ল্যাটফর্ম সলিউশনস ইঞ্জিনিয়ার