আপনি ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করে 3D বেসম্যাপের চেহারা ও অনুভূতি কাস্টমাইজ করতে পারেন।
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিংয়ের মাধ্যমে, আপনি ব্যবহারকারীদের কাছে যে ম্যাপটি উপস্থাপন করেন তার চেহারা ও অনুভূতির উপর আপনার নিয়ন্ত্রণ থাকে। আগ্রহের স্থানগুলির (POI) ঘনত্ব নিয়ন্ত্রণ, নির্দিষ্ট POI বিভাগ অপসারণ, এবং বৈশিষ্ট্যগুলির ফিল বা স্ট্রোক পরিবর্তন করার মতো ফিচারগুলির সাহায্যে, আপনি আপনার ব্যবহারকারীদের জন্য বিশেষভাবে উপযোগী একটি ম্যাপ অভিজ্ঞতা তৈরি করতে পারেন।
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং গুগল ক্লাউড কনসোলে কোড ছাড়াই সম্পাদনার অভিজ্ঞতা প্রদান করে। আপনার তৈরি করা প্রতিটি কাস্টম স্টাইল একটি ম্যাপ আইডির সাথে যুক্ত থাকে; ম্যাপ কনসোলে আপনার স্টাইলে করা পরিবর্তনগুলো আপনার অ্যাপ্লিকেশনে স্বয়ংক্রিয়ভাবে প্রদর্শিত হবে।
নিম্নলিখিত উদাহরণটিতে এমন একটি মানচিত্র দেখানো হয়েছে, যেখানে একটি কাস্টম স্টাইল ব্যবহার করে বিনোদনমূলক ফিচারের আইকন ও লেখার রঙ কমলাতে পরিবর্তন করা হয়েছে:
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.75183154601466, lng: -119.52369070507672, altitude: 2200, }, tilt: 67.5, heading: 108.94057782079429, range: 6605.57279990986, mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs. mode: 'HYBRID', }); document.body.append(map); } void init();
সংক্ষিপ্ত বিবরণ
ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করে 3D ম্যাপ কাস্টমাইজ করার প্রক্রিয়াটি 2D ম্যাপের মতোই:
| ১ | একটি মানচিত্র আইডি তৈরি করুন | একটি ম্যাপ আইডি তৈরি করুন। স্টাইলিং পরিচালনার জন্য ম্যাপ আইডিগুলো আপনার অ্যাপ্লিকেশনে পাঠানো হয়। পরবর্তী ধাপগুলোতে আপনি এই ম্যাপ আইডির সাথে একটি কাস্টম স্টাইল যুক্ত করবেন। |
| ২ | ক্লাউড-ভিত্তিক মানচিত্র শৈলী তৈরি করুন | এই ধাপে আপনাকে অবশ্যই '3D Hybrid' নির্বাচন করতে হবে এবং 'light mode' ব্যবহার করতে হবে। |
| ৩ | আপনার মানচিত্রের শৈলীকে একটি মানচিত্রের সাথে সংযুক্ত করুন | প্রথম ধাপে তৈরি করা ম্যাপ আইডির সাথে আপনার স্টাইলটি লিঙ্ক করুন। |
| ৪ | আপনার অ্যাপ্লিকেশনে ম্যাপ আইডি যোগ করুন | আপনার কোডে map-id প্যারামিটার ব্যবহার করে ম্যাপ আইডি নির্দিষ্ট করুন। |
| ৫ | মানচিত্র আইডি প্রকাশ করুন | মনে রাখবেন, প্রকাশ করার পর আপনার কাস্টম স্টাইলে করা পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত হয়ে যায়। |
ম্যাপ স্টাইল তৈরি করার পদ্ধতি বিস্তারিতভাবে জানতে, “ম্যাপ স্টাইল তৈরি ও ব্যবহার করুন” পর্যালোচনা করুন।
মানচিত্র আইডি গতিশীলভাবে আপডেট করুন
ম্যাপ ইনস্ট্যানশিয়েট করার পর আপনি mapId প্রপার্টিটি ডাইনামিকভাবে আপডেট করতে পারেন। এর ফলে, সম্পূর্ণ Map3DElement ইনস্ট্যান্সটি পুনরায় তৈরি না করেই আপনি একটি ভিন্ন ক্লাউড-ভিত্তিক ম্যাপ স্টাইল প্রয়োগ করতে পারবেন।
ম্যাপ আইডি আপডেট করতে, Map3DElement ইনস্ট্যান্সের mapId প্রপার্টিটি সেট করুন:
const map3DElement = document.querySelector('gmp-map-3d');
// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';
যেহেতু mapId প্রপার্টিটি HTML অ্যাট্রিবিউটকে প্রতিফলিত করে, তাই আপনি অ্যাট্রিবিউটটি পরিবর্তন করে এটিকে ডাইনামিকভাবেও আপডেট করতে পারেন:
const map3DElement = document.querySelector('gmp-map-3d');
// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');
সীমাবদ্ধতা
Maps JavaScript-এ 3D Maps-এর সাথে ক্লাউড-ভিত্তিক ম্যাপের স্টাইলিং ব্যবহার করার সময় কিছু সীমাবদ্ধতা সম্পর্কে সচেতন থাকতে হবে:
- ডার্ক মোড সমর্থিত নয়।
- ম্যাপ আইডি-সক্ষম ফিচার, যেমন ডেটা-চালিত স্টাইলিং, সমর্থিত নয়।